score:1
I think what you are after is a way to make only the clicked legend series show. If that is the case you can do it with the plotOptions.series.events.legendItemClick
. To have only one series show up initially on the chart (but still show in the legend) you need to set that series' visible
property to true
and the others to false
. If you want to have all series show on initial load that step can be ignored.
To get the toggle working you need to get the index of the legend item you clicked. You then loop through all the series in your chart to find the one that matches that clicked index. When it matches you set series\[i\].show()
for the ones that don't you set series.hide()
.
Here is the basic toggling code:
series: {
events: {
legendItemClick: function (event) {
var seriesIndex = this.index;
var serie = this.chart.series;
console.log(seriesIndex);
for (i = 0; i < serie.length; i++) {
if (serie[i].index == seriesIndex) {
serie[i].show();
console.log(serie[i].index);
} else {
serie[i].hide();
}
}
return false;
}
}
}
And here is a live fiddle.
score:1
When creating chart, just set series.visible = false
for series which should be hidden by default.
See docs.
Source: stackoverflow.com
Related Query
- How to set the enable property to a highcharts line in page load
- how to enable only 1 out of 2 column column graph by default when page loads in highcharts and the 2nd one gets visible when toggled in the legend
- how to set the interval of points on Y - Axis highcharts
- How to export the whole page or html content with Highcharts not just the chart?
- Highcharts - How to set custom colors for the series
- Highcharts Bar Chart - How to set the minimum bar width/length
- How do I set highcharts line graph point colors to an array of colors?
- How to set the z-index of points on a HighCharts scatter plot?
- Highcharts (Highstock) how to manually set the navigator selected range
- How do I set the background color of a Highcharts HTML label?
- How to customize the crosshair Line for Highcharts
- How do you set the text-overflow property of a highcharts-legend-item to ellipsis in styled mode?
- In highcharts how do I change the color of the line above the categories?
- highcharts pie monochrome: how to set the default color?
- How to set 'lang' property in Highcharts using Angular JS?
- How to cut off the line in highcharts between two pointI
- how to display 2 same highcharts without duplicate the code
- How do I export the content of a page as either jpg or pdf with Highcharts and scrollable data?
- How do I use dates from a LinkedHashMap for the x-axis on a Highcharts line graph (using Thymeleaf)?
- Highcharts how to align two charts yAxis on the same line
- How do I set the margin to bottom of a chart in HighCharts to zero?
- How to change the line color of a bubble in highcharts dynamically
- how to continue the graph line when missing series of data in middle of highcharts
- Highcharts : how to set first category on Y-axis in a line chart?
- Highcharts - How do I keep both line points in from splitting between the two bar charts
- How do I plot the x axis line using Highcharts when pegged at 0?
- How to stop plotting the graph if data is blank and continue if data is there on the y-axis in base line highcharts
- How to tell Highcharts to set date on the x axis, and use a range of time (like 1 day)
- How to set Highcharts xAxis position on the yAxis zero value (negative/positive chart)?
- How to visible tool tip in highcharts while page load
More Query from same tag
- How to fade other yAxises in highchart when hover on marker?
- highcharts: bar/column chart with drilldown
- Disable highcharts tooltip on certain lines, leave it enabled on others?
- highstock x-axis is always time
- How to center the yAxis title in Highcharts
- How to create combo chart with Highcharts
- How to remove the halo/glow around a marker upon hovering a series in Highcharts
- highchats in r shiny: the x values on click are not the real values of my date axis
- Save Highchart directly to specific path
- highcharts series update in javascript
- Highcharts v6.0.0 Annotations Not Working
- stop redrawing chart on highcharts
- Highcharts polar : series appear over others when toggle to visible
- How to combine highcharts data?
- Highcharts chart not showing in IE9
- Highcharts Tooltip does not display utf-8 correctly
- How to add Modal pop up on nodes of org chart Highcharts
- Highcharts tooltips with all items in category listed
- Highcharts DataGrouping with Null values
- highcharts. set full height of column/bar background color
- Integrating Highcharts with REST API
- Columns HighChart remove spacing for empty data series
- Can we show legends in a popup instead in the chart container with Highcharts.?
- Highcharts Multi-Depth 3d pie chart
- Highcharts: moving yAxes from left to right
- How to add Series dynamically in Scatter type chart using highchart?
- showing ranks on yaxis in highchart in a manner that 1 is best and 50 is worst
- Highcharts Beta 3: Best Practice loading JSON data
- Changing chart type give: Uncaught TypeError: Cannot read property 'length' of undefined Highcharts
- Highcharts - tooltip headerformat for 2 decimal places not working