Looking at the documentation, i'm struggling to find a solution for rendering a chart with the attached data structure.

Could anyone help answering if and how the below is possible?

• Multiple grouped stacks (re-using datasets in groups)
• Adding sub labels to each of the bars within a group.

Has anyone been able to achieve this with the library?

Thanks in advance.

Looking at the documentation, i'm struggling to find a solution for rendering a chart with the attached data structure.

Could anyone help answering if and how the below is possible?

• Multiple grouped stacks (re-using datasets in groups)
• Adding sub labels to each of the bars within a group.

Has anyone been able to achieve this with the library?

Thanks in advance.

• javascript
• chart.js

• 1 did you get it working? can you please share your code? I have the same problem. – webcoder Commented Mar 16, 2020 at 3:03
• i have the same problem did you guys get it working? – arash esmaealbeigi Commented Jan 29, 2022 at 9:44

3 Answers 3

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-datalabelslify./samples/charts/bar.html with the source code here: https://github./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.

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.

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
          }
        }
      }
    }]
  }