How set text above bar on Bar Chart ?

[maximys963]

• Missing or needed
• Confusing
• Not Sure?

Hello, I'm trying to implement text value above bars in Bar Chart, there is a lot of solutions for 2x version but I'm little bit confusing now about implementing such a feature in 3x version

After reading the documentation and migration guide I found such a description
"Removed from Dataset Controllers
* BarController.getDatasetMeta().bar
"

I found such implementation based on 2x version https://stackoverflow.com/questions/31631354/how-to-display-data-values-on-chart-js/37550150

But have no idea how to implement feature ( have on access to bar instance )it after migration to 3x:(
Help please )

[kurkle]

How about https://chartjs-plugin-datalabels.netlify.app/ ?

Btw, the removed bar was a boolean indication its a bar.

[maximys963]

@kurkle thank you very much)

[jimpriest]

I have similar issue - I have some old legacy code which is failing after trying to migrate to v3 - and migration notes don't mention getDatasetMeta()...

Plugin mentioned by @kurkle isn't compatible with v3

Reading Migration guide it looks like 'Chart.Controller' was removed - so what can I use now to get the same meta info?

var ctx2 = document.getElementById('programsByStatusChartjs').getContext('2d');
var programsByStatusChart = new Chart(ctx2, {
    type: 'bar',
    plugins:[{
      afterDatasetsDraw: function(chart,options) {

      let ctx = chart.ctx;
      ctx.textAlign = "left";
      ctx.font = "14px sans-serif";
      ctx.fillStyle = "black";

      // draw count labels on bars
      chart.data.datasets.forEach(function (dataset, i) {
          let meta = chart.controller.getDatasetMeta(i);
          meta.data.forEach(function (bar, index) {
            data = dataset.data[index];
            ctx.fillText(data + '%', bar._model.x-10, bar._model.y-10);
          })
        })
      }
    }],
    data: {
      labels: [],
      datasets: [
        // colors:  https://learnui.design/tools/data-color-picker.html
        {
          data: [],
          backgroundColor: ['##88c580','##aed987','##d6ec91','##fee17e','##fcc267','##f7a258','##ef8250','##e4604e','##d43d51']
        }
      ]
    },
    options: programsByStatusChartBarOptions,
});

[kurkle]

@jimpriest I don't recall how many years ago this has changed, but getDatasetMeta has been directly in the chart instance for a long time. https://www.chartjs.org/docs/latest/developers/api.html#getdatasetmeta-index

[jimpriest]

@kurkle Thanks! I'll try again today to covert over to v3 and see how it goes.

[jimpriest]

@kurkle Got it working with your help and doing some RTFM. Unfortunately we're still supporting IE11 so will have to wait to upgrade :\