JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.3/Chart.bundle.js"></script>
<canvas id="a"></canvas>
JavaScript
var data = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
{
label: "My First dataset",
backgroundColor: "rgba(255,99,132,0.2)",
borderColor: "rgba(255,99,132,1)",
borderWidth: 1,
hoverBackgroundColor: "rgba(255,99,132,0.4)",
hoverBorderColor: "rgba(255,99,132,1)",
data: [0, 1, 3, 0, 3, 1, 1],
scaleOverride:true,
scaleSteps:4,
scaleStartValue:0,
scaleStepWidth:1
}
]
};
var myBarChart = new Chart($("#a"), {
type: 'horizontalBar',
data: data,
options: {
scales: {
yAxes: [{
scaleLabel: {
display: true
}
}],
xAxes: [{
scaleLabel: {
display: true
},
}]
}
}
});