sgtpepper
Posts: 3
Joined: Thu Dec 06, 2018 9:13 am

Checkbox to show/hide all series

I would like to put a checkbox to the left of the text Hide/Show all series above the legends.

How do I put the checkbox and text there and how do I create the Hide/Show all functionin pure javascript code?
rafalS
Posts: 2665
Joined: Thu Jun 14, 2018 11:40 am

Re: Checkbox to show/hide all series

Hi, sgtpepper!

You didn't give me much details so I am not sure if our Highcharts legends with checkboxes will be enough for you.
You can always create your own custom legend and use series.hide() and series.show() method.

Some useful API: https://api.highcharts.com/highcharts/p ... owCheckbox
https://api.highcharts.com/class-refere ... eries#hide
https://api.highcharts.com/class-refere ... eries#show

Let me know if you need any specific informations.

Best regards!
Rafal Sebestjanski,
Highcharts Team Lead
sgtpepper
Posts: 3
Joined: Thu Dec 06, 2018 9:13 am

Re: Checkbox to show/hide all series

I found some inspiration here: https://jsfiddle.net/lot224/8qLdptLv

Ideally I would like the code to:

1) let the user switch between show all/hide using built standard Higcharts functionality
2) use setvisible() to control series visabilty
3) be written in pure javascript without jQuery
4) show an checkbox to the left of the label name to show but its necessary
rafalS
Posts: 2665
Joined: Thu Jun 14, 2018 11:40 am

Re: Checkbox to show/hide all series

sgtpepper,

Ok, I thought that you wanted HTML "checkbox" but you just meant "legend item".
Here is an example of what you've been trying to achieve without jQuery and with the ability to show/hide series: https://jsfiddle.net/BlackLabel/hcyz3pxj/

Let me know if you need anything else.

Best regards!
Rafal Sebestjanski,
Highcharts Team Lead
sgtpepper
Posts: 3
Joined: Thu Dec 06, 2018 9:13 am

Re: Checkbox to show/hide all series

Actually I think that's exactly what I need!

Thank you so much and happy holidays!
rafalS
Posts: 2665
Joined: Thu Jun 14, 2018 11:40 am

Re: Checkbox to show/hide all series

You're welcome and thank you!
Rafal Sebestjanski,
Highcharts Team Lead

Return to “Highcharts Usage”