'Recharts composed chart with different data

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:

reactjs recharts

Solution 1:^[1]

Found the solution: Apparently, you can use have multiple x-axis. I have provided the bar chart data for ComposedChart component, made 2 XAxis components and gave them xAxisId. One of the XAxis (the one for line chart) is hidden with property hide={true}.

Line component has data property, where I passed the line chart data. Please find the code below:

<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>

Here is the result:

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Serge Najimov

'Recharts composed chart with different data

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]