[Chartjs]-Chartjs numbers on bar chart flash on hover

by

2👍

Changing onComplete to onProgress seems to fix it.

animation: {
        onProgress: function () {
            var chartInstance = this.chart,
          ctx = chartInstance.ctx;
            ctx.fillStyle = "white";
            ctx.font = "600 30px Helvetica";
            ctx.textAlign = 'center';
            ctx.textBaseline = 'bottom';

            this.data.datasets.forEach((dataset) => {
                for (var i = 0; i < dataset.data.length; i++) {
                    for(var key in dataset._meta)
                    {
                        var model = dataset._meta[key].data[i]._model;
                        ctx.fillText(dataset.data[i], model.x, model.y + 50);
                    }
                }
            });

As for the numbers disappearing, it appears that the text on the chart isn’t being redrawn on a resize. Therefore you’ll need to re-render it on a window resize.

This is fixable by using the onresize event of the window and rendering the chart again.

window.onresize = function(event) {
   new Chart(ctx, options);
};

Leave a comment