Chartjs-How to draw a hover effect behind a bar chart?

by

0👍

✅

I solved it by playing with the lintTo and lineWidth values

my final code looks like this:

Chart.controllers.bar = Chart.controllers.bar.extend({
    draw: function (ease) {
        Chart.controllers.line.prototype.draw.call(this, ease);
        if (this.chart.tooltip._active && this.chart.tooltip._active.length) {
            var activePoint = this.chart.tooltip._active[0],
                ctx = this.chart.ctx,
                x = activePoint.tooltipPosition().x,
                topY = 1000000,
                width = activePoint._view.width,
                bottomY = 0;
            ctx.save();
            ctx.beginPath();
            ctx.moveTo(x, topY);
            ctx.lineTo(x, bottomY);
            ctx.lineWidth = width + 20;
            ctx.strokeStyle = 'rgba(0, 123, 255, 0.1)';
            ctx.stroke();
            ctx.restore();
        }
    }
});

Leave a comment