Problem with label on top of graphics in Chartjs

Asked

Viewed 141 times

1

I’m using Chartjs and Stackedbar to create some graphics, however, Chartjs has no option to put the respective values on top of the bars, for this, I implemented the following solution:

    onAnimationComplete: function() {
        var ctx = this.chart.ctx;
        ctx.font = this.scale.font;
        ctx.fillStyle = '#FFF';
        ctx.fontSize = '14px';
        ctx.textAlign = "center";
        ctx.textBaseline = "middle";
        this.datasets.forEach(function(dataset) {
            dataset.bars.forEach(function(bar) {
                ctx.fillText(bar.value, bar.x, bar.y + 15);
            });
        });
    }

However, when you hover over the graphics, the values disappear as shown in the Fiddle below:

https://jsfiddle.net/bspe1w2q/

Can someone help me make the values not fade when passing the mouse?

  • turned out that I managed by solving changing the plugin’s own color, eliminating the code that made the texts disappear when passing the mouse, was the only solution I could find

  • Good afternoon Caio. Could show how the code with the solution?

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.