Chartjs-Vertical scrubber line using chartjs

2👍

You can extend Chart.js to do this. Just override the showTooltip method after initializing the chart.


Preview

enter image description here


Script

Chart.types.Line.extend({
    name: "LineAlt",
    initialize: function () {
        Chart.types.Line.prototype.initialize.apply(this, arguments);

        var originalShowTooltip = this.showTooltip;
        this.showTooltip = function (activePoints) {

            if (activePoints.length) {
                var ctx = this.chart.ctx;
                var scale = this.scale;
                ctx.save();
                ctx.strokeStyle = '#aaa';
                ctx.beginPath();
                ctx.moveTo(activePoints[0].x, scale.startPoint);
                ctx.lineTo(activePoints[0].x, scale.endPoint);
                ctx.stroke();
                ctx.restore();
            }

            return originalShowTooltip.apply(this, arguments);
        }
    }
});

and then

new Chart(ctx).LineAlt(data);

Fiddle – http://jsfiddle.net/98gz1fhw/

Leave a comment