[Chartjs]-Chart JS grouped sub labels

by

1👍

✅

I haven’t seen that done before. But I can see a possible alternative solution.

You can use the chartjs datalabels plugin, which allows you to put labels on the data itself.

Here is an example: https://chartjs-plugin-datalabels.netlify.com/samples/charts/bar.html with the source code here: https://github.com/chartjs/chartjs-plugin-datalabels/blob/master/samples/charts/bar.html

First you’ll have to install the datalabels plugin, and add the datalabels parameter to your data.

0👍

Stumbled upon this with the same issue and came to the following much less attractive option but simpler than going to a d3js solution (such as posted here: d3 based multiple sub groups of a bar chart). Note this solution probably only works to one level of subgroups before it gets unwieldy if not impossible:

  • create separate charts for each category and then set their y-axes to be the same.

Depending on how you want it to look, it is possible to turn off the y-axes for a subset of the charts and leave zero spacing which could give a similar look as desired.

0👍

You have to use chartjs-plugin-datalabels plugin. Using this plugin you can give label to each bar of the chart. Please have a look at the given example.
Hope this will help.

data: {
    labels: labels,
    datasets: [{
      datalabels: {
        labels: {
          name: {
            align: 'top',
            font: {size: 16},
            formatter: function(value, ctx) {
              return "name"
            }
          },
          value: {
            align: 'bottom',
            formatter: function(value, ctx) {
              return value;
            },
            padding: 4
          }
        }
      }
    }]
  }

Leave a comment