JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://rawgit.com/nnnick/Chart.js/v1.0.2/Chart.min.js"></script>
<canvas id="myChart" height="300" width="800"></canvas>
JavaScript
var data = {
labels: ["JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC"],
datasets: [{
data: [12, 3, 2, 1, 8, 8, 2, 2, 3, 5, 7, 1]
}]
};
var ctx = document.getElementById("myChart").getContext("2d");
Chart.types.Line.extend({
name: "LineWithYLine",
draw: function () {
Chart.types.Line.prototype.draw.apply(this, arguments);
var scale = this.scale
var ctx = this.chart.ctx;
// calculate using the scale
var y = scale.calculateY(this.options.lineAtValue);
// draw line
ctx.save();
ctx.strokeStyle = '#ff0000';
ctx.beginPath();
ctx.moveTo(Math.round(scale.xScalePaddingLeft), y);
ctx.lineTo(this.chart.width, y);
ctx.stroke();
ctx.restore();
}
});
new Chart(ctx).LineWithYLine(data, {
datasetFill: false,
lineAtValue: 7.5
});