[Chartjs]-Chart.js not showing value on top of bars

by

3👍

✅

Code was bit outdated, to add a percentage sign to the value you can just add it using string interpolation in the fillText method.

Working sample:

let myChart = document.getElementById('chartJSContainer').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:  (x) => {
        const chart = x.chart;
        var { ctx } = chart;
        ctx.textAlign = 'center';
        ctx.fillStyle = "rgba(0, 0, 0, 1)";
        ctx.textBaseline = 'bottom';
        // Loop through each data in the datasets
        const metaFunc = this.getDatasetMeta;
        chart.data.datasets.forEach((dataset, i) => {
          var meta = chart.getDatasetMeta(i);
          meta.data.forEach((bar, index) => {
            var data = dataset.data[index];
            ctx.fillText(`${data}%`, bar.x, bar.y - 5);
          });
        });
      }
    }

  }
});
<body>
    <canvas id="chartJSContainer" width="600" height="400"></canvas>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.3.2/chart.js"></script>
</body>

Leave a comment