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": "Jesse", "month": "February", "y": 32 },
  { "label": "Lilia", "month": "February", "y": 65 }
];

var technicianData = {};

for(var i=0; i<csvData.length; i++) {
	var csvLines = csvData[i];
  if(!technicianData[csvLines.label]) {
  	technicianData[csvLines.label] = [];
  }
  technicianData[csvLines.label].push({ "label" : csvLines.month, y: csvLines.y});
}
//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();