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 csvData = [
  { "label": "Bill", "month": "January", "y": 11 },
  { "label": "Chris", "month": "January", "y": 13 },
  { "label": "Jesse", "month": "January", "y": 18 },
  { "label": "Lilia", "month": "January", "y": 65 },
  { "label": "Bill", "month": "February", "y": 7 },
  { "label": "Chris", "month": "February", "y": 56 },
  { "label": "Bill", "month": "Mars", "y": 11 },
  { "label": "Chris", "month": "Mars", "y": 13 },
  { "label": "Jesse", "month": "Mars", "y": 18 },
  { "label": "Lilia", "month": "Mars", "y": 65 }
];

var technicianData = {};
var months = {};
var monthIndex = 0;

for(var i=0; i<csvData.length; i++) {
  var csvLines = csvData[i];
  if(!technicianData[csvLines.label]) {
    technicianData[csvLines.label] = [];
  }

  if(typeof months[csvLines.month] === "undefined") {
    months[csvLines.month] = monthIndex;
    monthIndex += 1;
  }
  technicianData[csvLines.label].push({ "label" : csvLines.month, y: csvLines.y, x: months[csvLines.month]});
}
//console.log(technicianData)

var data = [];

for (var technician in technicianData ) {
  if (!technicianData.hasOwnProperty(technician)) continue;
  data.push({"name": technician, dataPoints: technicianData[technician]})
}
var chart = new CanvasJS.Chart("chartContainer", {
  title: {
    text: "Work Orders Details"
  },
  axisX: {
    title: "Month →"
  },
  axisY: {
    title: "No of Work Orders Closed →"
  },
  toolTip: {
    content: "{name}: {y}",
  },
  data: data

});

chart.render();