NM Charts

<!-- 1. Add script tags -->
<script src="https://cdn.jsdelivr.net/gh/malinconico/maquette@latest/demo/nmcharts.js"></script>
<script src="https://cdn.jsdelivr.net/gh/malinconico/maquette@latest/demo/nmcharts-categories.js"></script>

<!-- 2. Add a container -->
<div id="myChart"></div>

<!-- 3. Create your first chart -->
<script>
  NMCharts.create('#myChart', {
    title: 'My First Chart',
    series: [{
      name: 'Sales',
      type: 'area',
      color: '#4f46e5',
      data: [[1704067200000, 42], [1704153600000, 58], ...]
    }]
  });
</script>

// 1. Add to angular.json > scripts
"scripts": [
  "node_modules/@malinconico/nmcharts/nmcharts.js",
  "node_modules/@malinconico/nmcharts/nmcharts-categories.min.js"
]

// 2. In your component
import { Component, AfterViewInit } from '@angular/core';
declare var NMCharts: any;

@Component({
  template: '<div id="chart"></div>'
})
export class ChartComponent implements AfterViewInit {
  ngAfterViewInit() {
    NMCharts.create('#chart', {
      title: 'Angular Chart',
      series: [{ name: 'Data', type: 'area', data: [...] }]
    });
  }
}

// React integration — coming soon!
// Contributions welcome on GitHub

// In the meantime, you can use NM Charts with a ref:
import { useRef, useEffect } from 'react';

export function Chart() {
  const ref = useRef(null);

  useEffect(() => {
    if (ref.current) {
      NMCharts.create(ref.current, {
        title: 'React Chart',
        series: [{ name: 'Data', type: 'area', data: [...] }]
      });
    }
  }, []);

  return <div ref={ref} />;
}