JSFiddle - React, Tailwind, and code Playground

by Vladimir Jovanović

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer1" style="height: 300px; width: 100%;"></div>
<div id="chartContainer2" style="height: 300px; width: 100%;"></div>

JavaScript

// For some reason, 'Set', is more reliable than regular array, "let stackedCharts = []"
let stackedCharts = new Set();

// =====================================================
// There is only one 'CanvasJS.Chart()' constructor
// The same constructor also renders different type of charts
// 'chartContainer' is also dynamic. Can be 'chartContainer1' or 'chartContainer10', etc.
const chart = new CanvasJS.Chart('chartContainer1', {
  zoomEnabled: true,
  toolTip: {
    shared: true
  },
  data: [{
    type: "line",
    dataPoints: [{
        x: new Date(1992, 0),
        y: 2500000
      },
      {
        x: new Date(1993, 0),
        y: 2798000
      },
      {
        x: new Date(1994, 0),
        y: 3386000
      },
      {
        x: new Date(1995, 0),
        y: 6944000
      },
      {
        x: new Date(1996, 0),
        y: 6026000
      },
      {
        x: new Date(1997, 0),
        y: 2394000
      },
      {
        x: new Date(1998, 0),
        y: 1872000
      },
      {
        x: new Date(1999, 0),
        y: 2140000
      },
      {
        x: new Date(2000, 0),
        y: 7289000
      },
      {
        x: new Date(2001, 0),
        y: 4830000
      },
      {
        x: new Date(2002, 0),
        y: 2009000
      },
      {
        x: new Date(2003, 0),
        y: 2840000
      },
      {
        x: new Date(2004, 0),
        y: 2396000
      },
      {
        x: new Date(2005, 0),
        y: 1613000
      },
      {
        x: new Date(2006, 0),
        y: 2821000
      }
    ]
  }],
  rangeChanged: syncHandler
})

chart.render();

// Adds margins to all charts
if (chart.axisY[0]) {
  const chartMargin = 110 - (chart.axisY[0].bounds.x2 - chart.axisY[0].bounds.x1);
  chart.axisY[0].set("margin", chartMargin);
}

stackedCharts.add(chart1); // chart2, chart3, etc. in the future, for e.g. after 5 minutes,
// a new chart has been added

syncChartsTooltip();

//...