JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.bundle.js"></script>
<div >
<canvas id="canvas" width="300" height="300" ></canvas>
</div>
JavaScript
var config = {
type: 'bar',
data: {
labels: ["25", "60", "15", "30"],
datasets: [{
data: [25, 60, 15, 30],
backgroundColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)'
]
}]
},
options: {
scales: {
xAxes: [{
gridLines: {
display: true
},
barThickness: 40,
stacked: true
}],
yAxes: [{
gridLines: {
display: true
},
stacked: true
}]
},
horizontalLine: [{
y: 50,
style: "rgba(255, 0, 0, .4)",
text: "max"
}, {
y: 15,
text: "min"
}]
}
};
;
var ctx = document.getElementById("canvas");
var horizonalLinePlugin = {
afterDraw: function (chartInstance) {
var yScale = chartInstance.scales["y-axis-0"];
var canvas = chartInstance.chart;
var ctx = canvas.ctx;
var index;
var line;
var style;
if (chartInstance.options.horizontalLine) {
for (index = 0; index < chartInstance.options.horizontalLine.length; index++) {
...