[Solved]-Recharts composed chart with different data-Reactjs

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: