score:1
Pretty old thread, but info still usefull.
As @Alvara pointed out, with hundreds of series, using .hide()
or .show()
is quite slow (browser freeze few seconds).
Using setVisible(false, false)
and setVisible(true, false)
is way faster :
legendItemClick: function (event) {
if (!this.visible) return true;
const series = this.chart.series;
const serieLen = series.length;
if (series.filter(s => s.visible).length === 1) {
for (let i = 0; i < serieLen; i += 1) {
series[i].setVisible(true, false);
}
} else {
for (let i = 0; i < serieLen; i += 1) {
series[i].setVisible(false, false);
}
series[this.index].setVisible(true, false);
}
return false;
};
Even with big series, it works instantaneously.
Using .show().hide()
on +50 series already take more than 2 sec to toggle visible series (https://jsfiddle.net/rockshappy/nL5j2rLa/5/)
Here using setVisible
is instantaneous (https://jsfiddle.net/rockshappy/nL5j2rLa/2/)
score:9
I don't believe that highcharts has a hideAll()
or similar function, but you could try something like this:
//assuming chart is your chart
series = chart.series;
for(var i = 0; i < series.length; i++) {
if(!series[i].selected) {
series[i].hide(); //Hide the series
}
}
Then you would just need to call that code whenever you select a series. You could probably do this by performing some sort of check using chart events
Source: stackoverflow.com
Related Query
- Hide all but selected data series, HighCharts
- Highcharts data from google spreadsheet hide all series except one at start
- Highcharts displays series names but missing data points from json source
- Proper way to remove all series data from a highcharts chart?
- Highcharts Series - want to show/hide all EXCEPT selected series (reversal of default logic)
- How can i hide all the Series in highcharts at a time
- How to hide one series data info in tooltip using highcharts
- How do I hide a Highcharts series from the chart, but always show it in the tooltip?
- How to hide data in a series in highcharts boxplot?
- highcharts group series click event to get all data in catagory
- Highcharts series visibility with csv data source
- highcharts series remove function deletes all original series data (even after stored in new variable)
- How to have multiple highcharts with different series data in vuejs without repeating code
- Multiple series of data in Highcharts but second line graph is displayed squashed?
- Hide all other series except selected series. Also display the list of items in dropdown
- How to hide line but keep data labels in highcharts
- Hide the First Value Data in Series HighCharts
- Highcharts - Sankey chart not displaying all the data when series font increased
- Show x-Axis line but hide all data points
- In Highcharts How to keep rectangle such SVG elements attached with series data but not with pixel when resize,reflow,redraw,zooming in out?
- Highcharts Pie chart: how to hide the legend for all but the three highest values
- All series data are equal highcharts
- Set Additional Data to highcharts series
- HighCharts Hide Series Name from the Legend
- Changing data dynamically for a series in Highcharts
- How can I hide series from a HighCharts legend?
- Add additional data to a Highcharts series for use in formatters
- How can I hide a series from initially being displayed in Highcharts
- Get Highcharts Series Data after Load
- Highcharts doesn't display series with lots of data points
More Query from same tag
- Highstock: On Series Flags that are inverted
- Javascript, using Highcharts to display a chart of rankings with JSON Data
- Focus function on highcharts not working in mozilla
- how to render angular directive in Highcharts tool tip in Angular8
- Highcharts stacked bar data
- Highcharts / Highstock step line with gaps?
- highcharts: individual serie shift
- Highcharts addPoint does not draw line in sequence of provided data
- fixing label overlapping in second level of grouped categories plugin used in highchart
- Dynamically added Highcharts series with min and max
- In Highcharts, are we able to make the border of a pyramid in 'dashed' style?
- HighStock navigator from a stacked area chart shows wrong series
- highcharts-ng is not displaying pie chart
- Highcharts change look of tooltip
- how to disable the color change on mousehover in sankeycharts Highchart . { hover: {color: '#a4edba',opacity: 1,filter: {type: 'none',}}} didnt work
- Calculating percentage value for each serie in highcharts
- Highcharts data labels overlapping columns
- How to get Number of new users per day to DotNet.HighChart
- Highcharts Y-axis per serie
- Highcharts word cloud - Make a link to each word
- Trying to design with highChart but colors are not showing up
- Highchart update BBox location on zoom
- How can I do responsive pie chart
- rangeSelector: change date beyond zoomed time range
- Semi-circle donut pie chart with labels (data names) and %-ages on the pie ... and data numbers on mousehover
- Access min/max values for a Highcharts series: afterSetExtremes does not fire
- Joing multiple courtries in highmaps
- Highcharts: markers not displayed
- Why do only 2 of my 3 Highcharts Pie Charts/Graphs are showing
- Width for labels on x Axis with grouped Categories in Highcharts