JSFiddle - React, Tailwind, and code Playground

HTML

<div id="chartContainer" style="height: 370px; width: 100%;"></div>
<script src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
<script src="https://canvasjs.com/assets/script/jquery.canvasjs.min.js"></script>

JavaScript

//Creating a multi-series line graph from 2 sets of data. Namely dataPoints1 and dataPoints2.

var dataPoints1 = [], dataPoints2 = [];

// Ajax request for getting JSON data

$.getJSON("https://canvasjs.com/data/docs/btcusd2018.json", function(data1) {
  for( var i = 0; i < data1.length; i++) {
    dataPoints1.push({ x: new Date(data1[i].date), y: data1[i].open }); 
  }
  chart.render();
});

$.getJSON("https://canvasjs.com/data/docs/btcusd2018.json", function(data2) {
  for( var i = 0; i < data2.length; i++) {
    dataPoints2.push({ x: new Date(data2[i].date), y: data2[i].close });
  }
  chart.render();
})

var chart = new CanvasJS.Chart("chartContainer", {
  title: {
    text: "Live Data"
  },
  axisX: {
    title: "Date & Time"
  },
  axisY: {
    title: "Units"
  },

  data: [
    { type: "line", dataPoints: dataPoints1 },
    { type: "line", dataPoints: dataPoints2 }
  ]
  // end of data for 2 line graphs

});