SOURCE

let data1 = [
{index: 1, value: 2},
{index: 2, value: 3},
{index: 3, value: 4},
];

let data2 = [
{index: 2, value: 4},
{index: 3, value: 3},
{index: 4, value: 2},
];

const chart = new G2.Chart({
  container: 'id2',
  forceFit: true,
  height: 300,
  padding: 'auto'
})

const chart1 = new G2.Chart({
  container: 'id1',
  forceFit: true,
  height: 300,
  padding: 'auto'
})

chart.guide().regionFilter({
  start: ['min', 2],
  end: ['max', 'max'],
  color: 'red'
});

chart.source(data1);
chart1.source(data2);

chart.line().position('index*value');
chart1.line().position('index*value');

chart.render();
chart1.render();


chart.on('plotmove', function(ev) {
      var position = {
        x: ev.x,
        y: ev.y
      };
      console.log(chart.getSnapRecords(position));
      
      chart1.showTooltip(chart1.getXY(_.find(data2, {'index': chart.getSnapRecords(position)[0]._origin.index})));
        // chart.getSnapRecords(position)
        // chart.getXY({
        //     index: chart.getSnapRecords(position)[0].index
        // });
        //console.log(chart.getXY(_.find(data, {'index': chart.getSnapRecords(position)[0]._origin.index})));
      
    });
    chart.on('plotleave', function() {
      chart1.hideTooltip();
    });

<div id="app">
  <div id="id1">

  </div>
  <div id="id2">

  </div>
</div>