Highcharts zooming for vector plot in Angular

Question

Hi I have a about 20 vector plots that I am loading to my UI and each has the same yaxis and xaxis range. I am able to zoom into each individual plot with no problem. I want to create a 'synced zoom' feature where we the user zooms into one of the vector plots it also zooms into the other vector plots by the same amount. I am really struggling to capture the zoom event. Any idea on how to do this? In plotly you can do the (relayout) event handler to capture such an event...

HTML:

<highcharts-chart 
  id="vector"
  [Highcharts]="vectorCharts"
  [options]="chartObj"
</highcharts-chart>

TS:

import * as Highcharts from 'highcharts'
import vector from 'highcharts/modules/vector'
vector(Highcharts);
public vectorCharts = Highcharts;
public chartObj: any = {
  series: [{
    type: 'vector',
    data: dataVals, // calculated in other part of code
  }],
  chart: { 
    zoomType: 'xy',
    height: 100,
    width: 200
  }
}

Answer 1

There are several threads on the library's official GitHub repository, the most helpful might be this one: https://github.com/highcharts/highcharts-angular/issues/93

Just add to it, for example, zoomType: 'x' to enable zooming: https://codesandbox.io/s/angular-forked-cnywc5