JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://www.prioritymarketers.com/jqplot/src/jquery.jqplot.css">
<script src="http://www.prioritymarketers.com/jqplot/src/jquery.jqplot.js"></script>
<script src="http://www.prioritymarketers.com/jqplot/src/plugins/jqplot.dateAxisRenderer.js"></script>
<script src="http://www.prioritymarketers.com/jqplot/src/plugins/jqplot.barRenderer.js "></script>
<script src="http://www.prioritymarketers.com/jqplot/src/plugins/jqplot.categoryAxisRenderer.js"></script>
@{
	Layout = null;
}
 
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function () {
 
var chart = new CanvasJS.Chart("chartContainer", {
	animationEnabled: true,
	theme: "light2", // "light1", "light2", "dark1", "dark2"
	title: {
		text: "Number of Employees under Each Manager"
	},
	axisY: {
		title: "No. of Employees"
	},
	data: [{
		type: "column",
		dataPoints: @Html.Raw(ViewBag.DataPoints)
	}]
});
chart.render();
 
}
</script>
</head>
<body>
<div id="chartContainer" style="height: 370px; width: 100%;"></div>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>	
</body>
</html>

JavaScript

var s1 = [200, 600, 700, 1000];
var s2 = [460, -210, 690, 820];
var s3 = [-260, -440, 320, 200];
var ticks = ['May', 'June', 'July', 'August'];
var plot1 = $.jqplot('chart1', [s1, s2, s3], {
    seriesDefaults: {
        renderer: $.jqplot.BarRenderer,
        rendererOptions: {fillToZero: true}
    },
    series: [
        {label: 'Hotel'},
        {label: 'Event Regristration'},
        {label: 'Airfare'}
     ],
     legend: {
         show: true,
         placement: 'outsideGrid'
     },
         axes: {
             xaxis: {
                 renderer: $.jqplot.CategoryAxisRenderer,
                 ticks: ticks
              },
              yaxis: {
                  pad: 1.05,
                  tickOptions: {formatString: '$%d'}
              }
          }
      });