Show Data labels on Bar in ChartJS
10,234
Solution 1
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*/
Solution 2
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/
Author by
Enick
Updated on June 07, 2022Comments
-
Enick almost 2 years
I have a very special question concerning the horizontal Bar Chart. Is it possible to show the dataLabels ON the Bar itself?
Like on this picture: Drawing of the charts
I tried to do it with this:
ticks: { padding: -xx, },
but unfortunately the labels disappear beneath the bar, like the bars are one layer above the labels.
Is it possible to change this?
Here is my code:
var ctx = document.getElementById("stakeholderChart").getContext('2d'); var stakeholderChart = new Chart(ctx, { type: 'horizontalBar', data: { labels: ["Point 1", "Point 2", "Point 3", "Point 4", "Point 5", "Point 6", "Point 7", "Point 8", "Point 9", "Point 10", "Point 11", "Point 12"], datasets: [{ backgroundColor: "#527a82", data: [74, 74, 68,67,65,63,60,60,58,57,45,44], }], }, options: opt });
and my options:
var opt = { /*Legende ausblenden*/ legend:{ display: false, }, /*responsive*/ responsive: true, /*tooltips - hover labels*/ tooltips: { enabled: false, }, /*Layout*/ layout:{ padding: { right: 30, } }, /* Label auf Balken – Werte hinter balken*/ plugins: { datalabels: { align: 'end', anchor: 'end', color: '#fff', font: { weight: 'bold', size: 14, }, formatter: function(value, context) { return value + '%'; }, }, },/*Plugins ende*/ /*Animation*/ animation: { duration: 2000 },/*Animation Ende*/ /*Achsen Einstellungen*/ scales: { /* x Achse */ xAxes: [{ display: false, gridLines: { display: false }, ticks: { beginAtZero: true, max: 90, } }], /*x-axes ende*/ /* Y Achse */ yAxes: [{ display: true, gridLines: { display: false, }, ticks: { fontColor: '#fff', fontStyle: 'normal', fontSize: 13, padding: -170, }, categoryPercentage: 1.0, barPercentage: 0.85, }],/* y-axes ende*/ }, /*Scales Ende*/ }
Thank You in advance!
Kind regards, Enick