3👍
✅
Drawing a Horizontal Line at a Specific Y Value
Just utilize the scale.calculateY
to do this
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
});
If you want to draw a label, you can adjust the line end position to leave space. Then use the same y value to draw text there.
If your chart data points don’t cause the scale to stretch enough (eg. the scale is from 0 to 10, but you want to draw a line at 12) use the chart.js options to override the scale.
Fiddle – http://jsfiddle.net/gywzg9e4/
Source:stackexchange.com