JSFiddle - React, Tailwind, and code Playground

by nehamahajan

HTML

<div id="chartContainer" style="height: 370px; width: 100%;"></div>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div style="margin-top:16px;color:dimgrey;font-size:9px;font-family: Verdana, Arial, Helvetica, sans-serif;text-decoration:none;">Source: <a href="https://canvasjs.com/html5-javascript-bar-chart/" target="_blank" title="JavaScript Bar Charts &amp; Graphs ">https://canvasjs.com/html5-javascript-bar-chart/</a></div>

JavaScript

window.onload = function () {
	
var chart = new CanvasJS.Chart("chartContainer", {
	animationEnabled: false,
	height: 225,
	title:{
		text:""
	},
  axisX: {
     labelFormatter: function(){
       return " ";
     },
     tickLength: 0,
     lineThickness: 0
  },
  toolTip:{
   enabled: false,
 },
  legend: {
  	verticalAlign: "center",
    horizontalAlign: "right"
  },
	data: [{
		type: "bar",
		name: "abc",
    showInLegend: true,
		color: "red",
		dataPoints: [{ y:10 },{} ,{}]
	},
  {
		type: "bar",
		name: "xyz",
    showInLegend: true,
		color: "yellow",
		dataPoints: [{}, { y:5 }, {}]
	},
  {
		type: "bar",
		name: "pqr",
    showInLegend: true,
		color: "green",
		dataPoints: [{}, {},  { y:5 }]
	}]
});
chart.render();

}