CODEWITHSUNDEEP
reactjsrecharts
Serge Najimov
Serge Najimov

Reputation: 491

Recharts composed chart with different data

I need a help with recharts library. I need to build the chart below: enter image description here

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: enter image description here

Upvotes: 2

Views: 3694

Answers (1)

Serge Najimov
Serge Najimov

Reputation: 491

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: enter image description here

Upvotes: 6

Related Questions