Optionally adding a "Show all & Hide all" option in Chart Legends

[kashifshamaz21]

Hi @etimberg @LeeLenaleee ,

I have integrated Charts.js library in my React-based web-app and its been working very well, thanks to everyone who is actively contributing & maintaining this library.
A feature addition which we are trying to add on top of our "graph widgets" is:
To provide an option for users to be able to "Show all" or "Hide all" the currently rendered metrics (data fields).
I have mocked up how those two buttons/labels could look like, if they were added next to the Legends section.

While its totally possible to implement this feature by adding those buttons outside the Chart canvas, I was curious to know if you feel these options could be usable for others too, and if adding this feature natively into Charts.js would make sense. Rendering those options in the legend section would be an optional config that users can opt into.
I am willing to work on this feature and send PRs for it, if you guys think its worthwhile. :)

Thanks for your inputs, thoughts & suggestions.

[LeeLenaleee]

I personally dont think this is a feature a lot of people will benefit from, I dont see a lot of use cases where you want to hide all datasets. In my oppinion if you have to hide a lot of datasets in your chart you might have to rethink your implementation.

So I guess this is best done as an external plugin or external of canvas buttons.

[kashifshamaz21]

@LeeLenaleee Thanks for your reply, I understand your point that not a lot of users might benefit from it.

Regarding use case wise, in our case, we have lots of fields and users select about 5-10 fields from the dropdown to plot their data. Now, users want to a quick way to only view the data of one of the fields from their selected group, in that scenario they would click the Hide all button, then click on the metric they want to see.
I'll implement it outside the canvas or maybe create an external plugin for it. Thanks for your thoughts :)

[wenweih]

In my case, it's nice to have hide all option, user want to select several series and hide the rest of series.

[LeeLenaleee]

You could use a custom generateLabels function and a custom onClick as I described in this SO answer:
https://stackoverflow.com/a/69731726/8682983