Chartjs numbers on bar chart flash on hover

user_668499 0
Viewed 899

I have a a simple chartjs bar chart here - https://jsfiddle.net/e8n4xd4z/1037/

I am displaying the amounts in the bars using the onComplete function.

When I hover the bar the numbers flash on and off.

Can anyone see or know why this happens?

<body>
    <canvas id="chartJSContainer" width="600" height="400"></canvas>
</body>
chart.js javascript
1 Answers

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);
};
user_87071100
Related