I am trying to build a bar-graph using chart.js where i add “random” groups of data. Each group should be labeled with a group name and each bar with the property it really represents.
Data is fetched from a DB and the groups may differ in size, depending on the selection criteria of the user.
In Excel it is possible to achieve a result similar to the desired one (padding each new dataset with 0 for each already existing bar). The drawback is that with each new dataset the bars grow thinner and thinner.
A similar result is achievable with Chart.js using the same trick. Each new dataset is padded with null so the bars don’t get mixed up with the previous ones. By setting skipNull: true the bars don’t grow thinner.
So far so good, but when you click on a category name in the legend, its data is hidden, but the labels on X-Axis and the gaps left by the hidden bars still remain. It would be very useful to hide/show some of the added categories to enable a closer comparison between two categories.
In a previous SO-Question, the only answer tells it is not possible to achieve my desired result, but this QA is seven years old, so things might have changed.
Another SO-Post achieves a similar result by reordering the data and putting the Bar-Names as labels on top of the bars, but it loses the ability to hide a category. (The legend is hidden to avoid it, if you show the legend and click on one item, it will not hide a category but the n-th element of all categories. Try it out on the demo of the accepted answer, edit line 76)
An alternative approach would be to add a separate “chart-object” to the same canvas sharing the axes, is there any possibility to achieve this?