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
- Highcharts live graph setExtremes issue
- Highchart dynamically draw Legend marker and trigger mouseover event
- Load JSON to Highchart Series
- highcharts x-axis irregular date intervals issue
- Highcharts.js - Switch label axis and hiding legend
- convert list<int> to object
- Using highcharts & highstock together on same page
- need help to optimize php iteration
- using JSON dates with Highstock chart (asp.net MVC)
- Highstock dual x-axis with scrollbar
- ng-highcharts not available
- Angular Module Is not a function - Highcharts-ng appearing on .aspx web form
- How to change HighChart xAxis timeline to match local time and not UTC?
- Highcharts: cannot amend the histogram tooltip
- Highcharts - Multiple Charts On Mobile Page
- HighCharts on hover change dataLabel's font size
- Can we stack a 2 columns in a single column in basic column Highchart and let the other columns let it be?
- How to use Jquery knob like text label with highchart Jquery plugin
- Highcharts - Redundant Y Axis Point Markers (Any insight welcome!)
- Error displaying Gantt chart in laravel
- Drilldown in grouped column chart with categories
- How to add variable-pie chart to react project?
- Highstock Chart with URL in flag text won't open in new window
- Collapse Highcharts Organization Chart
- Pie chart with laravel and js
- How to implement similar line chart using the Highcharts library?
- How can I get Highstock tooltip to animate like Highcharts?
- highcharts hide the chart except the legend
- designing web app using nodeJS and HighStocks (or Google Annotation Time Line)
- Enable Annotation Buttons using R's Highcharter Library