Chart.js not showing value on top of bars

Question

I started to learn chart.js a while ago and got stuck where the bars are not showing the value on top bars, and how do I add percentage sign after the value? I use chart.js 3.3.2 cdn btw. Please I need help

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);
                        });
                    });
            }
        }
            
    }
});

Someone knows why?

LeeLenalee · Accepted Answer

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);
          });
        });
      }
    }

  }
});

Chart.js not showing value on top of bars

Answers (1)

Related Questions