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", {
title:{
text: "Evening Sales of a Restaurant"
},
axisX: {
interval: 1
},
data: [
{
type: "stackedBar",
dataPoints: [
{ label: 'a', y: 71 },
{ label: 'b', y: 75 },
{ label: 'c', y: 55},
{ label: 'd', y: 50 },
{ label: 'e', y: 65 },
{ label: 'f', y: 62 },
{ label: 'g', y: 68 },
{ label: 'h', y: 72 },
{ label: 'i', y: 33 },
{ label: 'j', y: 45 },
{ label: 'k', y: 25 },
{ label: 'l', y: 15 }
]
}
]
});
chart.render();
}