ChartJS: how to make a bar chart with a horizontal guideline:

Question

Is it possible to make a chart like the example below?

I haven't been able to find an example with an overlay. I'm using this in the context of an atmosphere plugin within a meteor application so it might not be possible for me to easily add plugins to my chartjs instance.

I've built out quite a few charts already, so for that reason it's my strong preference to get this to work over switching to another charting library, but it's not too late to port them over if there's no other way to make this work.

Answer 1

You could extend the Bar Chart to add the horizontal line

Chart.types.Bar.extend({
        name: "BarLine",
        draw: function () {

            Chart.types.Bar.prototype.draw.apply(this, arguments);

            var scale = this.scale,
                barHeight = this.scale.calculateY(83);


            // draw line
            this.chart.ctx.beginPath();
            this.chart.ctx.moveTo(30, barHeight);

            this.chart.ctx.strokeStyle = '#ff0000';
            this.chart.ctx.lineWidth = 3;
            this.chart.ctx.lineTo(this.chart.width, barHeight);
            this.chart.ctx.stroke();

            // write Label Text
            this.chart.ctx.fillStyle = '#000000';
            var text = this.options.labelText ? this.options.labelText : "DEFAULT TEXT" 
            this.chart.ctx.textAlign = 'center';
            this.chart.ctx.font = '22px Arial';
            this.chart.ctx.fillText(text, this.chart.width  * 0.5, 95);
            this.chart.ctx.closePath();                            

        }
    });`

You could add the bar values in the draw function i'm sure, but I generally do it in the 'onanimationcomplete' function for the chart, like so:

resultChart = new Chart(resultGraphCanvas.getContext("2d")).BarLine(chart, {

                        scaleBeginAtZero: true,
                        scaleOverride: true,
                        scaleSteps: 10,
                        scaleStepWidth: 10,
                        maintainAspectRatio: false,
                        labelText: "TEST DRAWN NEAR THE LINE",

                        showTooltips: false, //Needs to be set to false for the onAnimationComplete drawing to persist
                        onAnimationComplete: function () {


                            var ctx = this.chart.ctx;
                            ctx.font = this.scale.font;
                            ctx.fillStyle = this.scale.textColor
                            ctx.textAlign = "center";
                            ctx.textBaseline = "bottom";

                            this.datasets.forEach(function (dataset) {
                                dataset.bars.forEach(function (bar) {

                                    ctx.fillText(bar.value, bar.x, bar.y );
                                });
                            })
                        },
                    });

This will draw the values at the top of the bars, i'll leave positioning them elsewhere to you :)