Highcharts redraw series in chart - button

Question

I am building following chart
https://jsfiddle.net/marialaustsen/x1s9ndm3/11/
I am trying to create a click function for the All button, but instead of hide the other series and show only one serie, I would like to show all series in the chart when clicking the all button. The most scaleable way of doing this is simply to redraw the chart but I cannot figure out how..
This should be super simple...
I have tried to use the redraw method in a click event
$('#all').click(function () {
chart.redraw();
});
All the code here:
`````
<div id="container1"></div>
<button id="All">All</button>
<button id="2017">2017</button>
<button id="2018">2018</button>
<button id="2019">2019</button>
$(function() {
// Apply the grey theme
Highcharts.setOptions( {
colors: ['#2b908f', '#90ee7e', '#f45b5b', '#7798BF', '#aaeeee', '#ff0066', '#eeaaee', '
#55BF3B', '#DF5353', '#7798BF', '#aaeeee'], chart: {
backgroundColor: {
linearGradient: {
x1: 0, y1: 0, x2: 1, y2: 1
}
, stops: [ [0, '#f5f5f5'], [1, '#F0F0F0']]
}
, style: {
fontFamily: 'Montserrat'
}
, plotBorderColor: '#000066'
}
, title: {
style: {
color: '#00BFB3', textTransform: 'uppercase', fontSize: '20px'
}
}
, subtitle: {
style: {
color: '#007396', textTransform: 'uppercase'
}
}
, xAxis: {
gridLineColor: '#B5B5B9', labels: {
style: {
color: '#007396'
}
}
, lineColor: '#B5B5B9', minorGridLineColor: '#505053', tickColor: '#B5B5B9', title: {
style: {
color: '#007396'
}
}
}
, yAxis: {
gridLineColor: '#B5B5B9', labels: {
style: {
color: '#00BFB3'
}
}
, lineColor: '#B5B5B9', minorGridLineColor: '#505053', tickColor: '#B5B5B9', tickWidth: 1, title: {
style: {
color: '#007396'
}
}
}
, tooltip: {
backgroundColor: 'rgba(0, 0, 0, 0.85)', style: {
color: '#F0F0F0'
}
}
, plotOptions: {
series: {
dataLabels: {
color: '#007396', style: {
fontSize: '13px'
}
}
, marker: {
lineColor: '#333'
}
}
, boxplot: {
fillColor: '#505053'
}
, candlestick: {
lineColor: 'white'
}
, errorbar: {
color: 'white'
}
}
, legend: {
backgroundColor: 'rgba(62,62,62,1)', itemStyle: {
color: '#E0E0E3'
}
, itemHoverStyle: {
color: '#FFF'
}
, itemHiddenStyle: {
color: '#606063'
}
, title: {
style: {
color: '#C0C0C0'
}
}
}
, credits: {
style: {
color: '#666'
}
}
, labels: {
style: {
color: '#707073'
}
}
, drilldown: {
activeAxisLabelStyle: {
color: '#007396'
}
, activeDataLabelStyle: {
color: '#007396'
}
}
, navigation: {
buttonOptions: {
symbolStroke: '#DDDDDD', theme: {
fill: '#505053'
}
}
}
, // scroll charts
rangeSelector: {
buttonTheme: {
fill: '#505053', stroke: '#000000', style: {
color: '#CCC'
}
, states: {
hover: {
fill: '#707073', stroke: '#000000', style: {
color: 'white'
}
}
, select: {
fill: '#000003', stroke: '#000000', style: {
color: 'white'
}
}
}
}
, inputBoxBorderColor: '#505053', inputStyle: {
backgroundColor: '#333', color: 'silver'
}
, labelStyle: {
color: 'silver'
}
}
, navigator: {
handles: {
backgroundColor: '#666', borderColor: '#AAA'
}
, outlineColor: '#CCC', maskFill: 'rgba(255,255,255,0.1)', series: {
color: '#7798BF', lineColor: '#A6C7ED'
}
, xAxis: {
gridLineColor: '#505053'
}
}
, scrollbar: {
barBackgroundColor: '#808083', barBorderColor: '#808083', buttonArrowColor: '#CCC',
buttonBackgroundColor: '#606063', buttonBorderColor: '#606063', rifleColor: '#FFF',
trackBackgroundColor: '#404043', trackBorderColor: '#404043'
}
});
// Create the chart
Highcharts.chart('container1', {
chart: {
type: 'column'
},
title: {
text: 'Feedback per quarter grouped by year'
},
subtitle: {
text: 'Source: '
},
xAxis: {
categories: [
'Q1',
'Q2',
'Q3',
'Q4'
],
crosshair: true
},
yAxis: {
min: 0,
title: {
text: 'Total'
}
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y} feedback</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: '2017',
data: [55, 72, 108, 130]
}, {
name: '2018',
data: [80, 65, 100, 40]
}, {
name: '2019',
data: [45, 34, 67, 24]
}]
}, function(chart) {
// the button action
$('#all').click(function () {
chart.redraw()
})
$('#2017').click(function() {
Highcharts.each(chart.series, function(p, i) {
p.name.includes('2017') ? p.show() : p.hide()
})
})
$('#2018').click(function() {
Highcharts.each(chart.series, function(p, i) {
p.name.includes('2018') ? p.show() : p.hide()
})
})
$('#2019').click(function() {
Highcharts.each(chart.series, function(p, i) {
p.name.includes('2019') ? p.show() : p.hide()
})
})
});
});
How do I redraw or reload the chart onclick the All button?

Answer 1

You need to show series and redraw a chart. The most efficient way is to use the setVisible method on each series with redraw argument set to false and call chart.redraw() outside the loop.
$('#All').click(function() {
Highcharts.each(chart.series, function(s, i) {
s.setVisible(true, false);
});
chart.redraw();
});
Live demo: https://jsfiddle.net/BlackLabel/eztvoqa4/
API Reference:
https://api.highcharts.com/class-reference/Highcharts.Chart#redraw
https://api.highcharts.com/class-reference/Highcharts.Series#setVisible