Kendo React - X 轴共享 Y 轴的图表

Question

我正在尝试在 Kendo React 中创建如下图表，但经过多次尝试，我无法实现。

我尝试按照 here 的说明使用图表窗格，但它只能以另一种方式使用（Y 轴共享 X 轴）和类别（这对我来说不是问题，因为我有类别） .这是文档中的示例。

import * as React from 'react'
import * as ReactDOM from 'react-dom'

import {
    Chart,
    ChartPanes,
    ChartPane,
    ChartValueAxis,
    ChartValueAxisItem,
    ChartSeries,
    ChartSeriesItem
} from '@progress/kendo-react-charts';

import 'hammerjs';

const seriesData = [[1, 2, 3, 5], [0, 1, 0, 1]];

const ChartContainer = () => (
  <Chart>
    <ChartPanes>
      <ChartPane name="top" />
      <ChartPane name="bottom" height={100} />
    </ChartPanes>
    <ChartValueAxis>
      <ChartValueAxisItem name="top" />
      <ChartValueAxisItem name="bottom" pane="bottom" />
    </ChartValueAxis>
    <ChartSeries>
      <ChartSeriesItem data={seriesData[0]} />
      <ChartSeriesItem type="line" data={seriesData[1]} axis="bottom" />
    </ChartSeries>
  </Chart>
);

ReactDOM.render(
  <ChartContainer />,
    document.querySelector('my-app')
);

我也尝试添加倍数图表（我认为这不是最好的选择）并将它们放在一起，但结果不是我期望的。

你知道有什么其他方法可以让图像与图像相似吗？