[Chartjs]-Show Data labels on the Bar in Chart.js

by

2👍

       yAxes: [{
                display: true,
                gridLines: {
                    display: false,
                },

                ticks: {
                    fontColor: '#fff',<-- Text is currently white, change to black
                    fontStyle: 'normal',
                    fontSize: 13,
                    padding: -170,,<-- set to 0 or remove
                },
                categoryPercentage: 1.0,
                barPercentage: 0.85,

            }],/* y-axes ende*/

1👍

Add options as follows in your code 

options:  {
"hover": {
                      "animationDuration": 0
                    },
                    "animation": {
                      "duration": 1,
                      "onComplete": function() {
                        var chartInstance = this.chart
                        ctx = chartInstance.ctx;
                        ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);
                        ctx.fillStyle = this.chart.config.options.defaultFontColor;
                        ctx.textAlign = 'left';
                        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);
                          });
                        });
                      }
                    },

} 
});

or visit https://jsfiddle.net/tushar22/bfd98r26/5/

1👍

For horizontal bar charts, you can simply enable the 'mirror' option:

options: {
    scales: {
        yAxes: [{
            ticks: {
                mirror: true //Show y-axis labels inside horizontal bars
            }
        }]
    }
}

Check out the documentation: https://www.chartjs.org/docs/latest/axes/cartesian/#tick-configuration

“Flips tick labels around axis, displaying the labels inside the chart
instead of outside. Note: Only applicable to vertical scales.“

Leave a comment