Chartjs-Customize fill colors for ChartJS 3.x using beforRender plugin event

by

0👍

After some search i found a solution changing the event of plugin to beforeDraw and calling the update() method of chart.

this.ChartInst = new Chart(this._ctx, {
        type: "line",
        data: this._data ,
        options: this._chartoptions,
        plugins: [{
            beforeDraw: function (c, a, o) {
                var yScale = c.scales['y'];                   
                var max = c.data.datasets[0].data.reduce(function (prev, current) { return (prev.y > current.y) ? prev : current }).y;
                var yPos = yScale.getPixelForValue(max);
                var gradientFill = c.ctx.createLinearGradient(0, yPos, 0, c.height);
                gradientFill.addColorStop(0.4, 'rgba(83, 155, 243, 0.25)');
                gradientFill.addColorStop(0.9, 'rgba(223,140,255,0.25)');
                c.data.datasets[0].backgroundColor = gradientFill;
                c.update();
            }
        }]
    })

Leave a comment