Improved tooltip sync mechanism

[nickofthyme]

Is your feature request related to a problem? Please describe.
In order for a user to sync the cursor position from one chart to another they must ref each chart to sync and then manually handle logic to exclude the source chart, then dispatch the event to all other ref'd charts.

const TooltipSync = () => {
  const ref1 = React.createRef<Chart>();
  const ref2 = React.createRef<Chart>();
  const pointerUpdate = (event: PointerEvent) => {
    action('onPointerUpdate')(event);
    if (ref1.current) {
      ref1.current.dispatchExternalPointerEvent(event);
    }
    if (ref2.current) {
      ref2.current.dispatchExternalPointerEvent(event);
    }
  };
  return (
    <>
      <Chart ref={ref1} id="chart1">
        <Settings onPointerUpdate={pointerUpdate} />
        {/* other stuff... */}
      </Chart>
      <Chart ref={ref2} id="chart2">
        <Settings onPointerUpdate={pointerUpdate} />
        {/* other stuff... */}
      </Chart>
    </>
  );
};

This is overly complex and not scalable.

Describe the solution you'd like
Improving on the solution from #695 while still allowing for extenally dispatched events.

const TooltipSync = () => {
  const pointerUpdate = (e) => console.log(e);
  return (
    <>
      <Chart id="chart1" groups={['A', 'B']}>
        <Settings onPointerUpdate={pointerUpdate} />
        {/* other stuff... */}
      </Chart>
      <Chart id="chart2" groups={['B']}>
        <Settings onPointerUpdate={pointerUpdate} />
        {/* other stuff... */}
      </Chart>
      <Chart id="chart3" groups={['C']}>
        <Settings onPointerUpdate={pointerUpdate} />
        {/* other stuff... */}
      </Chart>
    </>
  );
};

This api will allow for setting groups which will serve as the dispatch targets. For example:

• An event from chart1 will dispatch to any chart in groups A or B, in this case only chart2.
• An event from chart2 will dispatch to any chart in group B, in this case only chart1.
• An event from chart3 will dispatch to any chart in groups C, in this case no other charts are in this group.

These events will be linked for time and units. Time may need a timezone to match the correct time between charts of different timezones.

This will sync all applicable charts in a given group. It might be useful to add a targets prop to allow the user to set the dispatch targets different from the groups a chart is included in.

Additional context
I think the best approach for this is to create a redux store registry for every chart that is active on a given page.

It would be difficult to know when the chart is out of view so this could be a future enhancement.

Kibana Cross Issues
elastic/kibana#113719