Accepted answer

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: with the source code here:

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

Related Query

More Query from same tag