// playground.tsx

export class Playground extends React.Component {
  state = {
    cursor: undefined,
  }
  ref1 = React.createRef<Chart>();
  ref2 = React.createRef<Chart>();
  ref3 = React.createRef<Chart>();
  ref4 = React.createRef<Chart>();
  componentDidMount() {

  }
  onCursorUpdate = (cursor: Cursor) => {
    this.ref1.current.dispatchExternalCursorEvent(cursor);
    this.ref2.current.dispatchExternalCursorEvent(cursor);
    this.ref3.current.dispatchExternalCursorEvent(cursor);
    this.ref4.current.dispatchExternalCursorEvent(cursor);
  }
  render() {
    return (<React.Fragment>
      {renderChart('1', this.ref1, KIBANA_METRICS.metrics.kibana_os_load[0].data.slice(0, 15), this.onCursorUpdate)
      }
      {renderChart('2', this.ref2, KIBANA_METRICS.metrics.kibana_os_load[1].data.slice(0, 15), this.onCursorUpdate)
      }
      {renderChart('3', this.ref3, KIBANA_METRICS.metrics.kibana_os_load[2].data.slice(15, 45), this.onCursorUpdate)
      }
      {renderChart('4', this.ref4, KIBANA_METRICS.metrics.kibana_os_load[1].data.slice(0, 100), this.onCursorUpdate)
      }
    </React.Fragment>)
  }
}


function renderChart(key: string, ref: React.RefObject<Chart>, data: any, onCursorUpdate?: CursorUpdateListener) {
  return (
    <div key={key} className="chart">
      <Chart ref={ref}>
        <Settings debug={false} showLegend={true} onCursorUpdate={onCursorUpdate} />
        <Axis
          id={getAxisId('timestamp')}
          title="timestamp"
          position={Position.Bottom}
          tickFormat={niceTimeFormatter([1555819200000, 1555905600000])}
        />
        <Axis id={getAxisId('count')} title="count" position={Position.Left} tickFormat={(d) => d.toFixed(2)} />
        <LineSeries
          id={getSpecId('dataset A with long title')}
          xScaleType={ScaleType.Time}
          yScaleType={ScaleType.Linear}
          data={data}
          xAccessor={0}
          lineSeriesStyle={{
            line: {
              stroke: 'red',
              opacity: 1,
            },
          }}
          yAccessors={[1]}
        />
        <LineSeries
          id={getSpecId('dataset B')}
          xScaleType={ScaleType.Time}
          yScaleType={ScaleType.Linear}
          data={KIBANA_METRICS.metrics.kibana_os_load[1].data.slice(0, 15)}
          xAccessor={0}
          yAccessors={[1]}
          stackAccessors={[0]}
        />
      </Chart>
    </div>);
}

// chart.tsx
...
export class Chart extends React.Component<ChartProps> {
  ...
  dispatchExternalCursorEvent(event: Cursor) {
    if (event && event.chartId !== this.chartSpecStore.activeChartId) {
      this.chartSpecStore.setCursorValue(event.value);
    }
  }
  render() {
    const { renderer, size, className } = this.props;
    let containerStyle: CSSProperties;
    if (size) {
....