[Chartjs]-How to display stack label/name?

0👍

I found the datalabels plugin the easiest to use and quite simple to install: https://github.com/chartjs/chartjs-plugin-datalabels

A quick demo is here:
https://chartjs-plugin-datalabels.netlify.com/samples/charts/bar.html

Edit: Oh I see you want to actually just label the data with what it represents, and not the value. You may still be able to do this by providing a formatter function as an option. https://chartjs-plugin-datalabels.netlify.com/formatting . In this case, you’d override the data to just display the label. The label data might be in the context.

0👍

Like David said you can use chartjs-plugin-datalabels with a implementation like this:

plugins: {
  datalabels: {
    align: 'start',
    anchor: 'start',
    color: 'black',
    formatter: function(value, context) {
      let ds = context.chart.data.datasets
      // check if it's the first ds
      if(ds[context.datasetIndex - 1]) {
        // check if the ds is in the same stack as the ds before
        if(ds[context.datasetIndex - 1].stack == ds[context.datasetIndex].stack) {
          return ''
        } else {
          return ds[context.datasetIndex].stack;
        }
      } else {
        return ds[context.datasetIndex].stack;
      }
    }
  }
}

Leave a comment