How to add labels on top of each bar in a bar chart

[thealein]

Hello everyone,
I want to add labels at the top of each bar in my bar chart..
I found out that this is possible with this callback:
onAnimationComplete
But I have no idea how to use it and how to display the data without having a context or chart object (like in Chart.js).
If I use this code for example:
scope.options.onAnimationComplete = function() { console.log("hi")};
It wont even make the console log in the browser.. so it doesn't enter the function..

Does anyone have a solution for that?

[lfhenaol]

Maybe this will help you

scope.options = {
                tooltips: {
                    enabled: true
                },
                hover: {
                    animationDuration: 1
                },
                animation: {
                    duration: 1,
                    onComplete: function () {
                        var chartInstance = this.chart,
                            ctx = chartInstance.ctx;
                        ctx.textAlign = 'center';
                        ctx.fillStyle = "rgba(0, 0, 0, 1)";
                        ctx.textBaseline = 'bottom';

                        this.data.datasets.forEach(function (dataset, i) {
                            var meta = chartInstance.controller.getDatasetMeta(i);
                            meta.data.forEach(function (bar, index) {
                                var data = dataset.data[index];
                                ctx.fillText(data, bar._model.x, bar._model.y - 5);

                            });
                        });
                    }
                }

[masudshrabon]

Thanks @lfhenaol.
How to set '%' (eg., 5.5%) beside the value on each bar

[Rupesh87]

var data = dataset.data[index]+" %";

[Sapkotaanish]

Is there any way to show label in the bottom of negative bar and total data in the top in case of stacked bar?

[thomasvt1]

Is there any way to show label in the bottom of negative bar and total data in the top in case of stacked bar?

Something like this would work;

const offset = value >= 0 ? -5 : 20; // Calculate offset
...
ctx.fillText(data, bar._model.x, bar._model.y + offset);

[brunoromeo001]

It's possible define color to text?

[Magomed26]

It's possible define color to text?

ctx.fillStyle = 'red'

[pjrobertson]

Using chart.js 3.7.0, here's the code that worked for me (above code had to be modified slightly, likely due to updated versions of chart.js:

           animation: {
                            duration: 1,
                          onComplete: function() {
                            var chart = this;
                            var ctx = chart.ctx;
 
                            ctx.font = Chart.helpers.fontString(Chart.defaults.font.size, Chart.defaults.font.style, Chart.defaults.font.family);
                            ctx.textAlign = 'center';
                            ctx.textBaseline = 'bottom';
 
                            this.data.datasets.forEach(function(dataset, i) {
                              var meta = chart.getDatasetMeta(i);
                              meta.data.forEach(function(bar, index) {
                                var data = dataset.data[index];
                                ctx.fillText(data, bar.x, bar.y - 5);
                              });
                            });
                          }
                        },