I have a scatter line chart that routinely displays 10 -15 individual series. Users can reduce clutter and focus on a specific series by clicking off the corresponding legend items. However, it's a bit ponderous for the user to click that number of legend items. I'd like to streamline this operation for users by providing two buttons: one that deactivates all legend items and the other that activates them all. I can't see anything obvious in the Chart API. Is there a way of accomplishing this programmatically?
2 Answers, 1 is accepted
0
Hi Mike,
We can use the [visible] input property of the SeriesItemComponent in order to display or not the series on button click.
We could also prevent the default behavior of the chart when clicking on a legend item by using the (legendItemClick) event.
Check the following sample plunker demonstrating the suggested approach:
https://plnkr.co/edit/1POVYre6qQ10vC3tmM0R?p=preview
I hope this helps. Please let me know in case you need further assistance for this case.
Regards,
Svetlin
Progress Telerik
We can use the [visible] input property of the SeriesItemComponent in order to display or not the series on button click.
We could also prevent the default behavior of the chart when clicking on a legend item by using the (legendItemClick) event.
Check the following sample plunker demonstrating the suggested approach:
https://plnkr.co/edit/1POVYre6qQ10vC3tmM0R?p=preview
I hope this helps. Please let me know in case you need further assistance for this case.
Regards,
Svetlin
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which
deliver the business app essential building blocks - a grid component,
data visualization (charts) and form elements.
0
Mike
Top achievements
Rank 1
Rank 1
answered on 13 Mar 2018, 03:06 PM
Thanks, Svetlin.
Exactly what I was looking for.