JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<br/><!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->
<div id="chartContainer" style="height: 360px; width: 100%;"></div>

JavaScript

var data = [];
var chart = new CanvasJS.Chart("chartContainer", {
  title: {
    text: "Work Orders Details"
  },
  subtitles: [{
  	text: "Data from External JSON"
  }],
  axisX: {
    title: "Month →"
  },
  axisY: {
    title: "No of Work Orders Closed →"
  },
  toolTip: {
    content: "{name}: {y}",
  },
  data: data

});
chart.render();

$.getJSON("https://api.myjson.com/bins/64ihm", function(jsonData) {
  var technicianData = {};
  for(var i=0; i<jsonData.length; i++) {
    var json = jsonData[i];

    if(!technicianData[json.label]) 
      technicianData[json.label] = [];

    technicianData[json.label].push({ "label" : json.month, y: json.y});
  }

  for (var technician in technicianData ) {
    if (!technicianData.hasOwnProperty(technician)) continue;
    data.push({"name": technician, dataPoints: technicianData[technician]})
  }
  chart.render();
});