score:23
Accepted answer
Instead of .hide
use .setVisible(false, false)
. This will not trigger a redraw after every hide operation.
$(chart.series).each(function(){
//this.hide();
this.setVisible(false, false);
});
chart.redraw();
Working snippet:
$(function () {
$('#container').highcharts({
series: [{
data: [Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100]
}, {
data: [Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100]
}, {
data: [Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100]
}, {
data: [Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100]
}, {
data: [Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100]
}, {
data: [Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100]
}, {
data: [Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100]
}, {
data: [Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100]
}, {
data: [Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100]
}, {
data: [Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100]
}, {
data: [Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100]
}, {
data: [Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100]
}, {
data: [Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100]
}, {
data: [Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100]
}, {
data: [Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100]
}, {
data: [Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100]
}, {
data: [Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100]
}, {
data: [Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100]
}, {
data: [Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100]
}, {
data: [Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100]
}, {
data: [Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100]
}, {
data: [Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100]
}]
});
// the button action
var chart = $('#container').highcharts(),
$button = $('#button');
$button.click(function() {
var series = chart.series[0];
if (series.visible) {
$(chart.series).each(function(){
//this.hide();
this.setVisible(false, false);
});
chart.redraw();
$button.html('Show series');
} else {
$(chart.series).each(function(){
//this.show();
this.setVisible(true, false);
});
chart.redraw();
$button.html('Hide series');
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>
<button id="button">Hide series</button>
Source: stackoverflow.com
Related Query
- How can i hide all the Series in highcharts at a time
- How can I delete all of the points from a highcharts series
- How can I hide ALL series with the same ID with a button on highcharts? (line graph)
- How can I hide series from a HighCharts legend?
- How can I hide a series from initially being displayed in Highcharts
- How do I hide a Highcharts series from the chart, but always show it in the tooltip?
- How Can I Hide a Pie Chart's Slice in HighCharts Without Removing It From the Legend?
- How can I capture all points belonging to the same series with the same xAxis value without a loop?
- How can I reverse the series order of a pyramid chart in Highcharts
- How can I put xAxis in highcharts starting in the horizontal line when all values are in 0?
- How can I add a link to a Highcharts series name in the legend?
- How can I fix the error #17 "The requested series type does not exist" error when trying to display a highcharts graph in Vue.js?
- how can I use rangeselector and navigation in highcharts in the given code
- Highcharts Pie chart: how to hide the legend for all but the three highest values
- How can I fix the navigator issue in highstock when I have more than 1 series in different time intervals?
- HighCharts Hide Series Name from the Legend
- HighCharts - How can I turn off the points?
- How can I change the colors of my highcharts piechart?
- How to hide labels in the highcharts in the pie
- How can I remove the white border from HighCharts pie chart?
- How To Use Epoch Time With Highcharts Series Data?
- Highcharts - How to set custom colors for the series
- How can I reset the styles given to series in Highcharts?
- Highcharts - How to hide series name and Y value in tooltip
- How to Check and Uncheck all the Legend elements in HighCharts Linechart?
- How can I extend the lines of this Highchart series to the edges of my chart area?
- How do I style the series labels on a Highcharts pie chart?
- How can i keep the color the same in highcharts
- How to remove the halo/glow around a marker upon hovering a series in Highcharts
- How to hide series via the legend in highstock ?
More Query from same tag
- Highcharts formats differently in Safari vs Chrome
- Highcharts bar format datalabels to percent and add text
- How to show values in Highcharts tooltip other than x and y when data points are too high?
- Adding Highcharts to Chartkick Gem
- highcharts scrollbar labels not appearing
- How to export CSV and XLS with external button in Highcharts
- how to display the title in the middle of a donut chart with legend?(react-highcharts)
- Set tooltip dynamically in HIGHCHARTS
- HighChart Stacked Column label issue
- Combining Column charts and line charts with the same same data in the same container(Highcharts)
- Highcharts Dynamic Column color based on data comparison
- IE 6 Export Menu size issue
- Highstock - Set extremes beyond the data range
- Highcharts not displaying series data for graph with multiple Y-axes
- Highcharts with Icon Markers Plugin isn't rendering FontAwesome points
- How to color places with single dots in area chart - highcharts?
- Highcharts: Format all numbers with comma?
- Highchart plugin creating different Y-axis scale on different browsers
- Displaying multiple series in the navigator of an HighStock chart
- Highchart Stacked Column w/ Datetime X-axis Columns Too Thin
- Highcharts - Adding a suffix to a tooltip in a multi-series chart
- Grand Totals in HighCharts Pie Chart Legend
- Encode to JavaScript object, function get replaced
- Highcharts Interactivity between plots - looking for code improvements
- Set different color for each bubble in Bubble-Map
- Highcharts: using Google Analytics to capture event actions for exporting the chart
- Overlapping columns in highchart
- HighCharts :(Solid Gauge) How to generate gauge dial with an arrow end.
- Highcharts: setting stroke-width on a line series when styledMode is on has no effect
- How to focus highchart navigator and graph to a part of the resultset