JSFiddle - React, Tailwind, and code Playground

HTML

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

JavaScript

var dataPoints1 = [], dataPoints2 = [];

var chart = new CanvasJS.Chart("chartContainer", {
  theme: "light2",
  title: {
    text: "Multi-Series Chart from JSON"
  },
  axisX: [{
    valueFormatString: "DD MMM YY"
  }, {
    valueFormatString: "DD MMM YY"
  }],
  data: [
    {
      type: "line",
      showInLegend: true,
      legendText: "Chart From 1st JSON",
      dataPoints: dataPoints1
    },
    {
      type: "line",
      axisXIndex: 1,    
      showInLegend: true,
      legendText: "Chart From 2nd JSON",
      dataPoints: dataPoints2
    }
  ]
});

$.when($.getJSON("https://api.npoint.io/eef1138dc72b4ac725d2", function(data){
  for (var i = 0; i < data.length; i++) {
    dataPoints1.push({
      x: new Date(data[i].partialDate),
      y: data[i].partialCount
    });
  }
})).then(function(){
  $.getJSON("https://api.npoint.io/4eba2d1dbcc0c16e5bcc", function(data){
    for (var i = 0; i < data.length; i++) {
      dataPoints2.push({
        x: new Date(data[i].partialDate),
        y: data[i].partialCount
      });
    }    
    chart.render(); 
  })
})