score:1
At this moment, you don't need to define separate series in navigator.series
for every series you define in your chart configuration object, because Highcharts will do it by itself, basing on Series.showInNavigator
flag. The best and fastest way to do that correctly is by defining simple logic implementation, using update
appropriate series on legendItemClick
event. Then your export should work correctly. Please take a look at code and example below:
plotOptions: {
series: {
events: {
legendItemClick(e) {
e.target.chart.series.forEach(s => {
if (s === e.target) {
s.update({
showInNavigator: true,
visible: !s.visible
})
} else if (s.name.split(" ")[0] !== "Navigator") {
s.hide()
s.update({
showInNavigator: false
})
}
e.preventDefault()
})
}
}
}
}
Live example: https://jsfiddle.net/yf4stjmw/
API Reference:
https://api.highcharts.com/highstock/series.line.showInNavigator https://api.highcharts.com/highstock/series.line.visible
[EDIT]
All of your chart's series are hidden in exported files, in the reason of this lines of code:
events: {
load: function() {
this.series.forEach(function(el) {
if (el.index !== 0) {
el.hide();
}
});
this.get("highcharts-navigator-series").show();
}
}
Don't forget that load
event handler is also triggered when exporting, that's why you need to delete those lines of code. Then it should work as you wish.
Source: stackoverflow.com
Related Query
- Exporting Chart Not Keeping Navigator Series
- Displaying multiple series in the navigator of an HighStock chart
- Chart series point added not sync with X axis
- HighCharts chart export (screenshot download) does not display Navigator graph
- highstock -- navigator time range does not update after adding/removing series
- Chart not exporting to XLS File - Highcharts
- Highcharts.js: Group some series but not others in bar chart
- Hight Chart Dynamic Json Value is not loading in Series Data Section but Static Value is Loading Finely
- Why does my addSeries (in highcharts) only display names of the series but not the actual pie chart itself
- HighCharts line series not displaying properly with stacked bar combo chart
- Highcharts logarithmic chart not displaying series on webpage
- Bullet Chart in Series not displaying after y value
- Added series does not remains in highcharts on show/hide of chart container
- highchart's line chart with constant series not plotting when using linear gradient colour
- HighStock navigator from a stacked area chart shows wrong series
- Highchart Pie Chart not working properly with series
- x-axis, y-axis lines does not appear, when I include 3D chart library of HighChart in my code
- Highchart tooltip does not match series colour - Solid Gauge Chart
- Highcharts: Polar chart does not display series correctly in dinamically loaded data
- Highcharts opacity of series color in line chart not active
- Highstock Stock Tools Creating Indicator GUI Does Not See Chart Series
- what is wrong in this data series that high chart does not plot it?
- Highcharts not responsive for all series in chart
- How to make legend labels to bring out the series of a pie chart and not make them disappear when label is clicked in HighCharts?
- HighCharts: Keeping Tooltip on Chart Click (Chart, Not Series)
- Some series are not visible in a time serie chart with columns
- Line chart with multiple series and irregular intervals not displaying correctly
- Highcharts - Sankey chart not displaying all the data when series font increased
- Not able to click (Sometimes) categories(Y-axis) of gantt chart after updating series data results
- The opposite X aXis series is not showed in the navigator
More Query from same tag
- Highchart, polar chart multiple values in one line
- Highstock flag position not correct for yAxis with top set
- How can I capture all points belonging to the same series with the same xAxis value without a loop?
- Pass PHP result-set to JavaScript array in Highchart?
- Set the with of xAxis label to 50% on a Highcharts BarChart
- How do I set more than one y-axis coordinate on one chart in HighCharts?
- Angular highcharts modules conflict after import heatmap
- Why my label are not at the same height
- How to align multiple charts with different data
- Highcharts xrange styling
- How to use Highcharts React to create chart with multiple lines for same XAxis?
- Laravel and Charting - Determine The Difference Between Datatimes
- Highcharts with angularjs: smooth transition of bars when updating values
- Highchar display wrong month in date chart
- How to add two different mouse over for two different type of series in same chart?
- Series name with series color at the end of line series
- HighCharts getJson - Unable to display
- Highcharts stacked column is cut off
- highcharts displaying data on timechange
- Disable click on datalabel in pie
- How can I give data from my webworker to highchart
- Angular-Highcharts using Angular-CLI; where do I add a Webpack alias?
- Drilldown event in Highcharts column chart
- Highcharts small columns inside area
- Don't interpolate between missing values in Highcharts line chart?
- Incorrect Highcharts colorAxis range
- Spider Chart (High Chart) in rails with Prawn PDF How to generate?
- How do I create a draggable plot line in Highcharts?
- How do I have text display within the inside of a stacked bar graph in highcharts
- HighCharts - problems with tickInterval and tickAmount