Recently, I started learning about chart.js and encountered an issue where the bars were not displaying the values on top, along with a question on how to add a percentage sign after the value. I'm using chart.js version 3.3.2 from a CDN. Any assistance would be greatly appreciated.
let myChart = document.getElementById('myChart').getContext('2d');
const label = ['A','B','C','D','E'];
const datas = [85, 90, 53, 100, 76];
const backgroundColors = [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)'
];
const borderColors = [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)'
]
let iChart = new Chart(myChart, {
type: 'bar',
data: {
labels: label,
datasets: [{
label: 'EQA-Übereinstimmung',
data: datas,
backgroundColor: backgroundColors,
borderColor: borderColors,
borderWidth: 1
}]
},
options: {
responsive:true,
maintainAspectRatio: false,
animation: {
duration: 1,
onComplete: function () {
var chartInstance = this.chart,
myChart = chartInstance.myChart;
myChart.textAlign = 'center';
myChart.fillStyle = "rgba(0, 0, 0, 1)";
myChart.textBaseline = 'bottom';
// Loop through each data in the datasets
this.data.datasets.forEach(function (dataset, i) {
var meta = chartInstance.controller.getDatasetMeta(i);
meta.data.forEach(function (bar, index) {
var data = dataset.data[index];
myChart.fillText(data, bar._model.x, bar._model.y - 5);
});
});
}
}
}
});
Any insights on why this is happening?