JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://eauditportal.net/public/link/js/canvasjs.min.js"></script>



<body>
	<div id="chartContainer" style="height: 300px; width: 100%;">
	</div>
</body>

JavaScript

window.onload = function () {
		var chart = new CanvasJS.Chart("chartContainer",
		{
			title:{
				text: "Import Cost Impact on Business",      
				fontFamily: "arial black",
				fontColor: "DarkSlateGrey"
			},
                        animationEnabled: true,
			axisX: {
				title:"Ease of Doing Business(1 = most friendly)",
				titleFontFamily: "arial"

			},
			axisY:{
				title: "Import cost per container",
				titleFontFamily: "arial",
				valueFormatString:"0 USD",
				titleFontSize: 12
			},

			data: [
			{        
				type: "scatter",  
				toolTipContent: "<span style='\"'color: {color};'\"'><strong>{label}</strong></span> <br/>  {y} <br/>",
				dataPoints: [
  {
    "y": 66,
    "label": "FRI1121",
    "audited_id": "452"
  },
  {
    "y": 77,
    "label": "FRI1124",
    "audited_id": "453"
  },
  {
    "y": 25,
    "label": "FRI1128",
    "audited_id": "465"
  },
  {
    "y": 77,
    "label": "FRI1129",
    "audited_id": "468"
  },
  {
    "y": 74,
    "label": "FRI1130",
    "audited_id": "470"
  },
  {
    "y": 30,
    "label": "FRI1132",
    "audited_id": "471"
  },
  {
    "y": 100,
    "label": "FRI1137",
    "audited_id": "472"
  },
  {
    "y": 100,
    "label": "FRI1144",
    "audited_id": "473"
  },
  {
    "y": 73,
    "label": "FRI1145",
    "audited_id": "474"
  },
  {
    "y": 84,
    "label": "FRI1146",
    "audited_id": "475"
  },
  {
    "y": 66,
    "label": "FRI1147",
    "audited_id": "476"
  },
  {
    "y": 74,
    "label": "FRI1154",
    "audited_id": "479"
  },
  {
    "y": 50,
    "label": "FRI1155",
    "audited_id": "480"
  },
  {
    "y": 31,
    "label": "FRI1156",
    "audited_id": "481"
  },
  {
    "y": 66,
    "label": "FRI1174",
    "audited_id": "497"
  },
  {
    "y": 63,
    "label": "FRI1175",
    "audited_id": "498"
  },
  {
    "y": 66,
    "label": "FRI1183",
    "audited_id": "535"
  },
  {
    "y": 65,
    "label": "FRI1184",
    "audited_id": "537"
  },
  {
    "y": 65,
    "label": "FRI1185",
   ...