Hi,
I would like to know if there's a native way of actually hiding some legend items under a toggle (something like in the attached photo). Ideally this would responsive to the screen size so that the legend is not too cluttered.
At the moment, when we display many series we have the pagination and having so many items clutter the UI.
Thanks in advance!
Re: Dropdown for legend items when there are many
Hi,
Welcome to our forum and thanks for contacting us with your question!
Highcharts doesn't have a built-in feature for collapsing legend items into a dropdown directly. However, you can achieve a similar effect by customizing the legend using a combination of JavaScript and CSS.
Here's a general approach:
1. Custom Dropdown: Create a custom dropdown outside the chart container. You can use JavaScript to toggle the visibility of certain series based on dropdown selections.
2. Responsive Design: Use the responsive options to adjust the chart and legend layout based on screen size. For example, you could hide the legend entirely on smaller screens and replace it with your custom dropdown.
Here's a basic example of how you might start with a custom dropdown: https://jsfiddle.net/BlackLabel/km5nq42w/
Feel free to reach out if you have any further questions.
Welcome to our forum and thanks for contacting us with your question!
Highcharts doesn't have a built-in feature for collapsing legend items into a dropdown directly. However, you can achieve a similar effect by customizing the legend using a combination of JavaScript and CSS.
Here's a general approach:
1. Custom Dropdown: Create a custom dropdown outside the chart container. You can use JavaScript to toggle the visibility of certain series based on dropdown selections.
2. Responsive Design: Use the responsive options to adjust the chart and legend layout based on screen size. For example, you could hide the legend entirely on smaller screens and replace it with your custom dropdown.
Here's a basic example of how you might start with a custom dropdown: https://jsfiddle.net/BlackLabel/km5nq42w/
Feel free to reach out if you have any further questions.
Andrzej
Highcharts Developer
Highcharts Developer
Re: Dropdown for legend items when there are many
Hi Andrej,
Thanks a lot for your response.
I had seen this demo when exploring about the feature but it's not exactly what I meant.
I'm not really looking to select/unselect to hide/show data in the chart. I just want to display them grouped so that there is no clutter in the chart and avoid showing countless items. Is there a way we could achieve that?
Thanks a lot for your response.
I had seen this demo when exploring about the feature but it's not exactly what I meant.
I'm not really looking to select/unselect to hide/show data in the chart. I just want to display them grouped so that there is no clutter in the chart and avoid showing countless items. Is there a way we could achieve that?
Re: Dropdown for legend items when there are many
Hi,
I see what you mean. As I replied before, there is no option in the API to get what you want.
You can use this example: https://jsfiddle.net/gh/get/library/pur ... -vertical/
Alternatively, you can create your own custom legend toggle (similar to the one from the first reply, but you can target legend items visibility, not series).
If you think such a feature would be useful for more users, you can request it here: https://github.com/highcharts/highchart ... new/choose You can expect possible updates or workarounds there. However, if you need a customized solution for yourself without waiting for us to resolve the request, please contact us directly.
If anything else pops up, please let us know.
Kind regards,
I see what you mean. As I replied before, there is no option in the API to get what you want.
You can use this example: https://jsfiddle.net/gh/get/library/pur ... -vertical/
Alternatively, you can create your own custom legend toggle (similar to the one from the first reply, but you can target legend items visibility, not series).
If you think such a feature would be useful for more users, you can request it here: https://github.com/highcharts/highchart ... new/choose You can expect possible updates or workarounds there. However, if you need a customized solution for yourself without waiting for us to resolve the request, please contact us directly.
If anything else pops up, please let us know.
Kind regards,
Andrzej
Highcharts Developer
Highcharts Developer