[Chartjs]-Chart.js – draw horizontal line based on a certain y-value

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/

Leave a comment