Home » How to toggle off or disable legend items when no data is present in Highcharts column type (or other chart types that supports legends)

How to toggle off or disable legend items when no data is present in Highcharts column type (or other chart types that supports legends)


In classic Robido form, I was unable to find the particular code snippet or example to toggle off or disable legend items when no data is present in Highcharts column type (or other chart types that support legends). It’s very simple so I’m just going to keep this short and sweet.

Here’s the snippet that you can use to trigger the click event on each legend item when no series data is present. In this example, chart.series is going to be our Highcharts series array (the same thing you’d add to Highchart’s “series” object when you define a chart https://api.highcharts.com/highcharts/series).

As long as you set a variable with the return value of when you call Highcharts, then you should have access to the JS object(s) (series data in this case) that are defined when you’re calling the chart.

Here’s a basic example (stolen and modifed from https://www.highcharts.com/demo/column-basic) of instantiating your Highcharts chart in an IIFE and returning your chart object so we can use the snippet above:

By setting the return value from a Highcharts instantiation into a variable (line 2: let chart = Highcharts.chart(‘container’, { (where the id of the chart is “container” like: <div id=”container”>) you can then access all the Highcharts objects and variables after that Highcharts object is defined.

So to recap, if you’re looking for a way to toggle off or disable legend items when no data is present in Highcharts, use the top snippet or grab the second one and modify it to make your chart if you haven’t already set up your Highcharts chart). In order for chart.series to be available, you’ll have to have a variable defined as “chart” that is the return value of instantiating a Highcharts chart (line 2 of the second snippet).

This is going to the first of a series of new discussions and topics covered under the Highcharts umbrella, so make sure to check out our Highcharts Category for more articles as they come out!

As always, feel free to comment or ask questions as you see fit.

Leave a Reply

Your email address will not be published. Required fields are marked *