Chart.js Draw a Stacked Bar Chart with Limit Line

Question

I would like to draw a horizontal line in a chart using Chart.js. But I'm not able to do it.

I've found this example but I've had trouble converting it to a bar chart as it's using points to determine where to place the line and bar charts don't seem to use "points"

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("LineWithLine").getContext("2d");

Chart.types.Line.extend({
    name: "LineWithLine",
    initialize: function () {
        Chart.types.Line.prototype.initialize.apply(this, arguments);
    },
    draw: function () {
        Chart.types.Line.prototype.draw.apply(this, arguments);
        
        var point = this.datasets[0].points[this.options.lineAtIndex]
        var scale = this.scale
        console.log(this);

        // draw line
        this.chart.ctx.beginPath();
        this.chart.ctx.moveTo(scale.startPoint+12, point.y);
        this.chart.ctx.strokeStyle = '#ff0000';
        this.chart.ctx.lineTo(this.chart.width, point.y);
        this.chart.ctx.stroke();
        
        // write TODAY
        this.chart.ctx.textAlign = 'center';
        this.chart.ctx.fillText("TODAY", scale.startPoint + 35, point.y+10);
    }
});

new Chart(ctx).LineWithLine(data, {
    datasetFill : false,
    lineAtIndex: 2
});

<script src="http://www.chartjs.org/assets/Chart.min.js"></script>
<div>
    <canvas id="LineWithLine" width="600" height="400"></canvas>
</div>

Is there a nicer way to do this in Chart.js 2? Perhaps with the use of a line chart and bar chart combination or is that overkill?

Hopefully you guys can help me figure this out, I've created this chart already using CSS and Javascript as you can see below:

In this example the limit was a minus value so it has charted itself below the actual line, which may be confusing but the main thing is the line is plotted at the value I have chosen. :)

score 2 · Accepted Answer · answered Jun 02 '17 at 15:41

If you still have this problem, check this question about drawing a custom horizontal line in Chart.js 2

In the answer to the queston I linked, it's been defined a new plugin in chart.js (more infos in Chart.js' site) allowing you to draw a bar chart and a custom line. There's also a jsfiddle to better understand how plugins work

Chart.js Draw a Stacked Bar Chart with Limit Line

1 Answers1