score:1

Accepted answer

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.


Related Query

More Query from same tag