Echarts hover vertical line on multiple graphs

This is my config with echarts, it draw actually 2 graphs with the same instance of echarts :

data = [
    [1,82.60277,"VO",1441.74],
    [2,82.60302,"VI",1441.87],
    [3,82.60327,"VA",1441.97],
    [4,82.60352,"VO",1442.07],
    [5,82.60377,"VO",1442.19],
    [6,82.60402,"VO",1442.24],
    [7,82.60427,"VI",1442.25],
    [8,82.60452,"VO",1442.22],
    [9,82.60477,"VO",1442.13],
    [10,82.60502,"VO",1442.09],
    [11,82.60527,"VO",1442.17],
    [12,82.60552,"VO",1442.19],
    [13,82.60577,"VO",1442.16],
    [14,82.60602,"VO",1442.19],
    [15,82.60627,"VO",1442.19],
    [16,82.60652,"VO",1442.17],
    [17,82.60677,"VO",1442.06],
    [18,82.60702,"VO",1441.98],
    [19,82.60727,"VO",1442],
    [20,82.60752,"VR",1442.15]
]

option = {
  width: '100%',
  grid: [
    {
      left: 22,
      right: 0,
      top: 60,
      bottom: '52%',
    },
    {
      left: 22,
      right: 0,
      top: '52%',
      bottom: 60,
    },
  ],
  dataset: [
    {
      dimensions: ['sscount', 'pk', 'severity', 'value'],
      source: data,
    },
    {
      transform: {
        type: 'sort',
        config: { dimension: 'pk', order: 'asc' },
      },
    },
    {
      transform: {
        type: 'sort',
        config: { dimension: 'pk', order: 'asc' },
      },
    },
  ],
  xAxis: [
    {
      type: 'value',
      min: 'dataMin',
      max: 'dataMax',
      /*axisLabel: {
        formatter: (value) => Number(value).toFixed(3),
      },*/
      axisLabel: {
        show: false,
        color: 'red',
        showMaxLabel: false,
        margin: 5
      },
      axisTick: { show: true },
      axisLine: { show: false },
      alignTicks: true
    },
    {
      type: 'value',
      min: 'dataMin',
      max: 'dataMax',
      /*axisLabel: {
        formatter: (value) => Number(value).toFixed(3),
      },*/
      gridIndex: 1,
      axisLabel: {
        show: true,
        formatter: (value) => Number(value).toFixed(3),
        color: 'gray',
        showMaxLabel: false,
        showMinLabel: false,
        margin: 8
      },
      axisTick: { show: false },
      axisLine: { show: true },
      alignTicks: true
    },
  ],
  yAxis: [
    {
      type: 'value',
      min: 'dataMin',
      max: 'dataMax',
    },
    {
      type: 'value',
      min: 'dataMin',
      max: 'dataMax',
      gridIndex: 1,
    },
  ],
  dataZoom: [
    {
      type: 'inside',
      xAxisIndex: [0, 1],
      maxSpan: 100,
      minSpan: 0.05,
    },
    {
      type: 'slider',
      xAxisIndex: [0, 1],
      show: true,
      height: 40,
      left: 0,
      top: 4,
      filterMode: 'none',
    },
  ],
  series: [
    {
      type: 'line',
      datasetIndex: 1,
      xAxisIndex: 0,
      yAxisIndex: 0,
      showSymbol: true,
      symbolSize: 1,
      hoverAnimation: false,
      animation: false,
      encode: {
        tooltip: [0, 1, 2, 3],
        x: 'pk',
        y: 'value',
      },
      lineStyle: {
        width: 1,
      },
    },
    {
      type: 'line',
      datasetIndex: 2,
      xAxisIndex: 1,
      yAxisIndex: 1,
      showSymbol: true,
      symbolSize: 1,
      hoverAnimation: false,
      animation: false,
      encode: {
        tooltip: [0, 1, 2, 3],
        x: 'pk',
        y: 'value',
      },
      lineStyle: {
        width: 1,
      },
    },
    
  ],
  tooltip: {
    trigger: 'axis',
  },
}

I would like the line draw in every graphs in vertical based on xAxis like this:

how I could done that ? my actual code do that:

I am expecting that the hover marker line draw in vertical overall the graphs. Is anyone know how to do that ?
thanks

Solution

Add this to your chart options:

axisPointer: {
  link: [
    {
      xAxisIndex: 'all'
    }
  ]
},

This will link the pointer events to all charts in your series.