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

window.onload = function() {
  var dataPoints = [], dataPoints2 = [];
  var chart = new CanvasJS.Chart("chartContainer", {
    title:{
      text:"Plotting Temperature and Humidity"
    },
    data: [{
      type: "line",
      dataPoints: dataPoints
    }, {
      type: "line",
      dataPoints: dataPoints2,

    }]
  });
  $.getJSON("https://api.myjson.com/bins/oa82u", function(data) {  
    $.each(data, function(key, value){
      dataPoints.push({x: value[0], y: parseInt(value[1])});
      dataPoints2.push({x: value[0], y: parseInt(value[2])});
    });
    chart.render();
  });
}