Recharts composed chart with different data

Question

I need a help with recharts library. I need to build the chart below:

As you can see, there is only 15 bars but the line chart is made out of thousands points. Is there a way to use composed chart, were one Bar component is not connected with Line component?

This is the closest i could make:

Answer 1

找到解决方案：显然，您可以使用多个x轴。我已经为 CompositedChart 组件提供了条形图数据，制作了 2 个 XAxis 组件并给了它们 xAxisId。X 轴之一（折线图的轴）通过属性 hide={true} 隐藏。

Line 组件具有 data 属性，我在其中传递了折线图数据。请找到下面的代码：

<ComposedChart data={barData}>
  <XAxis xAxisId={1} />
  <XAsis xAxisId={2} hide={true} />
  <Tooltip />
  <Legend />
  <Bar xAxisId={1} dataKey="pv" barSize={20} />
  <Line xAxisId={2} data={lineData} dataKey="uv" dot={false} stroke="#000000" />
</ComposedChart>

结果如下：