[Solved]-Overlay Line on chart.js Graph-Chart.js

strangewill's answer was excellent as a foundation but i needed data-driven vertical lines on a bar graph so modified it as follows:

first i added a property to the options array (adding another dataset is perhaps cleaner but i would have had to tell chartjs to ignore it), where each option is a data value index that i want to highlight, roughly as follows:

chartdefaults.verticaloverlayatbar = [itemone, itemtwo]
...
var historychart = new chart(ctx).baroverlay(chartdata, chartdefaults);

i then modified strangewill's code, extending it to iterate the array of items from above and draw vertical lines on the indicated bar.

chart.types.bar.extend({
    name: 'baroverlay',
    draw: function (ease) {

        // first draw the main chart
        chart.types.bar.prototype.draw.apply(this);

        var ctx = this.chart.ctx;
        var barwidth = this.scale.calculatebarwidth(this.datasets.length);

        for (var i = 0; i < this.options.verticaloverlayatbar.length; ++i) {

            var overlaybar = this.options.verticaloverlayatbar[i];

            // i'm hard-coding this to only work with the first dataset, and using a y value that i know is maximum
            var x = this.scale.calculatebarx(this.datasets.length, 0, overlaybar);
            var y = this.scale.calculatey(2000);

            var bar_base = this.scale.endpoint

            ctx.beginpath();
            ctx.linewidth = 2;
            ctx.strokestyle = 'rgba(255, 0, 0, 1.0)';
            ctx.moveto(x, bar_base);
            ctx.lineto(x, y);
            ctx.stroke();
        }
        ctx.closepath();
    }
});

it's not perfect as i'm not familiar with the internals chartjs code, in particular my lines were 2 bars off although my suspicion is that that's a fencepost error in the data array rather than the chart calculations. however, hopefully it's a useful step forwards for someone else.

i needed something similar, but instead of a line graph i needed like a real overlay line that was flat.

just extended the chart like so:

    chart.types.bar.extend({
        name: 'baroverlay',
        draw: function (ease) {
            chart.types.bar.prototype.draw.apply(this);
            ctx.beginpath();
            ctx.linewidth = 2;
            ctx.strokestyle = 'rgba(255, 0, 0, 1.0)';
            ctx.moveto(35, this.scale.calculatey(100));
            ctx.lineto(this.scale.calculatex(this.datasets[0].bars.length), this.scale.calculatey(100));
            ctx.stroke();
        }
    });

mine is hard-coded to draw a line at the "100" mark (in this case, where we were looking at having a target of 100%).

and call it like so:

new chart(ctx).baroverlay(data, options);

i also found quince's code out of date and not compatible with the 1.0.2 chart.js code somehow (rendering went all sideways).