Grouped bar charts each group different level in chart.js

Question

using char. JS bar chart, First group Car data (fuel,EMI,service), each group having individual label how to split group individual label

let randomScalingFactor = function(){ return Math.round(Math.random()*5000)};
    return {
      labels: ["car","Recharge","Food","May","June","July"],
      datasets : [
            {
                fillColor : 'rgba(220,220,220,0.8)',
                data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor()],
        labels: ["fuel","Emi","service"],
            },
      {
                fillColor : [chartColors.white, chartColors.gossip, chartColors.blueStone, chartColors.surfieGreen, chartColors.silverTree, chartColors.gossip ],
                data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor()],
        labels: ["DTH","postpaid","prepaid"],
            },
            {
                fillColor : [chartColors.white, chartColors.gossip, chartColors.blueStone, chartColors.surfieGreen, chartColors.silverTree, chartColors.gossip ],
                data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor()],label: 'sadf'
            }

        ]         
    }

her ref image

Answer 1

The reason you are not seeing the tooltip label is because you used the incorrect label config option. The option is called label not labels and only accepts a single string (not an array of strings). If you pass in an array of strings to label then chart.js simply assembles a comma separated string for each index in the array for the label.

With that said, I can see what you are attempting to do, but unfortunately, there is no way to do this using Chart.js. A dataset always represents a data value per each category label. In other words, each index in a dataset's data array maps to the same index in the labels array (which is defined outside of the dataset).

Here is a codepen to show what I mean.

As you can see, each dataset spans across all categories (labels). You cannot have 3 datasets for 'car', 3 datasets for 'Recharge', etc. The best you could hope to do is set a value of 0 for the categories that the dataset does not belong to, but it makes the graph appear quite confusing.

Here is an example showing that.