score:7
Accepted answer
To make a "Show All" option at the end of the legend you could add an empty series with that name, like this:
series: [{
// ...
}, {
name: 'Show All'
}]
And then to reverse the legend functionality you can use the legendItemClick
event, along with checking for clicks on your dummy series, for example like this:
plotOptions: {
series: {
events: {
legendItemClick: function(event) {
var s = this.chart.series;
for(i = 0; i < s.length; i++) {
if(this.name == 'Show All' || this == s[i])
s[i].setVisible(true);
else
s[i].setVisible(false);
}
return false;
}
}
}
}
See this JSFiddle demonstration using your initial demo.
Source: stackoverflow.com
Related Query
- reverse functionality of highcharts legend
- reverse highcharts heatmap legend
- Highcharts Sunburst custom legend and click functionality
- HighCharts Hide Series Name from the Legend
- How to modify highcharts legend item click event?
- Hiding a Highcharts series without using the legend
- Disable-Click on Legend in HighCharts Column Graph
- Highcharts - Change legend index order
- Highcharts legend font sizes
- Highcharts - How to programmatically toggle legend items and determine which items are selected
- Add series total to legend in Highcharts
- Highcharts - How to display legend symbol inside the tooltip
- Filtering legend of a Highcharts by only visible series
- Add tooltip to legend in highcharts when hovering
- Highcharts - Legend Positioning outside the chart
- Display legend items in two columns highcharts
- Highcharts add legend on export
- Why does HighCharts reverse the order of my series?
- Highcharts set legend height
- Is it possible to hide the line & symbol next to Highcharts legend items?
- Highcharts Legend Title Horizontal Align
- Turn long list of items in Highcharts legend into dropdown
- Highcharts legend item hover event?
- How to Check and Uncheck all the Legend elements in HighCharts Linechart?
- Grand Totals in HighCharts Pie Chart Legend
- HighCharts Pie Chart Legend value alignment
- Highcharts Legend Custom HTML
- Highcharts Symbol in Legend
- Highcharts Legend Overlaps with X-Axis
- Highcharts - Color coded legend for solid gauge
More Query from same tag
- Change yAxis values in Compare multiple series highstock for showing point value instead of percentage change value
- How to make Highstock work with two xAxis?
- Chart data of object gets overwritten, but only the first object that is interacted with is affected
- Updating Points
- Highcharts is rounding off the decimal values to 0. How to avoid it?
- Highcharts: saving canvas image as local file in IE
- Basic jquery fiddle to Angular Directive
- How to show the container in a nested treemap?
- Uncaught TypeError: Cannot read property '0' of undefined - highcharts
- Highstock chart not zooming to specific date range
- Highcharts: Format series names in tooltip
- Highcharts Plot background
- Highmaps in Typescript: Maps not being dipslayed
- Customize Highchart Map's legend type and color
- Problem doing math with point values in highcharts tooltip.pointFormat
- Highcharts, mixed stacked & non-stacked columns
- Export Highcharts data in excel with values as a string
- how to create proper json data format from mysql for highcharts
- Always position Highcharts tooltip on top with respect to the marker point
- How to use react-highcharts to plot bell curve
- Highcharts with PHP var
- Highcharts: Maintain series visibility after chart reload
- how to customize the tooltip in solid gauge in highchart
- Highcharts Data Not Showing on Ajax Call
- How to change the X and Y axis names of Pie chart High Chart?
- High Charts - Split color of bar chart
- How to add new symbols in Highstock chart?
- Highcharts - stacked column - order series index dynamically for each category
- Why do only 2 of my 3 Highcharts Pie Charts/Graphs are showing
- Highcharts legends data overlapping issue on set and update data