Create a vertical navigator to zoom in Highchart

Question

I've chart with horizontal navigator that works well, i want to add a vertical navigator but i don't know if it's possible

In official doc, there is no information about this https://api.highcharts.com/highcharts/yAxis

Is there anyway to implement this ?

Chart code:

public build(): any {
    return {
      time: {
        useUTC: false,
      },
      chart: {
        type: 'area',
      },
      title: {
        text: this.title,
      },
      subtitle: {
        text: this.subtitle,
      },
      navigator: {
        enabled: true,
        maskFill: 'rgba(224, 203, 219, 0.3)',
        scrollY: 
      },
      rangeSelector: {
        enabled: false,
      },
      xAxis: {
        type: 'datetime',
        tickInterval: 3600 * 1000,
        title: {
          text: this.xAxisLabel,
        },
        formatter() {
          return this.value;
        },
      },
      yAxis: {
        title: {
          text: this.yAxisLabel,
        },
        labels: {
          enabled: false,
        },
      },
      tooltip: {
        pointFormat: this.tooltipFormat,
      },
      plotOptions: {
        area: {
          marker: {
            enabled: true,
            symbol: 'circle',
            radius: 2,
            states: {
              hover: {
                enabled: true,
              },
            },
          },
        },
      },
      series: this.series,
      exporting: {enabled: false},
      credits: {enabled: false},
    };
  }
}

Answer 1

That feature is not available in Highstock by default, but as a workaround you can create a separate chart, only with navigator, position it and connect with the main chart. Example:

Highcharts.stockChart('container', {
    chart: {
        events: {
            load: createNavigatorChart
        }
    },
    yAxis: {
        startOnTick: false,
        endOnTick: false
    },
    ...
});

function createNavigatorChart(e) {
    var baseChart = e.target,
        baseYAxis = baseChart.yAxis[0];

    Highcharts.stockChart('customNavigator', {
        chart: {
            inverted: true,
            marginTop: baseChart.plotTop,
            marginBottom: baseChart.chartHeight - (baseChart.plotTop + baseChart.plotHeight)
        },
        rangeSelector: {
            enabled: false
        },
        credits: {
            enabled: false
        },

        xAxis: {
            min: baseYAxis.min,
            max: baseYAxis.max,
            reversed: false,
            visible: false,
            events: {
                setExtremes: function(e) {
                    baseYAxis.setExtremes(e.min, e.max, true, false);
                }
            }
        },
        title: {
            text: ''
        },
        yAxis: {
            visible: false
        },
        navigator: {
            enabled: true,
            xAxis: {
                reversed: false
            },
            series: [{
                type: 'scatter',
                color: 'transparent',
                data: [
                    [baseYAxis.min, 1],
                    [baseYAxis.max, 2]
                ]
            }]
        }
    });
}

---

Live demo: http://jsfiddle.net/BlackLabel/8ac9qbt6/

API Reference: https://api.highcharts.com/highstock/chart.events.load