JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 300px; width: 100%;"></div>
JavaScript
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer", {
theme: "light2",
axisX: {
interval: 1,
labelFormatter: function(e) {
return e.label ? e.label : "";
}
},
data: [
{
// Change type to "doughnut", "line", "splineArea", etc.
type: "column",
dataPoints: [
{ label: "Chrome", y: 10, x: 1 },
{ label: "Chrome", y: 15, x: 2 },
{ label: "Chrome", y: 25, x: 3 },
{ label: "Safari", y: 30, x: 5 },
{ label: "Safari", y: 28, x: 6 }
]
}
]
});
chart.render();
}