Pages

How to hide/unhide data series on click of legend items – in case of multi series chart

CanvasJS supports setting the visibility of a specific data series in chart using its “visible” property. By combining this with the legend events we can create charts that toggle data series visibility on click of corresponding legend items.

In the first line we’re setting up cursor attribute to “pointer” which changes the mouse pointer to “hand” while hovering the legend items.

In the second line, we’re setting up the item click attribute, which actually toggles the visibility of the specific data series clicked inside the legend, and updates the state by redrawing the chart.

Step 4:

And the final compilation looks like… (You can try clicking on the legend items)

Try it Yourself by Editing the Code below.

In order to provide better support,we have closed the comments and switched completely to our Forums. If you have any questions, please feel free to ask in our forums.