0👍
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.
- Chartjs-How do I emulate the stacked bar chart from Apple Health's Cardio Fitness article using chart.js and Bootstrap tabs?
- Chartjs-How to change the color of y axis labels in different color in Chart.js