Search code examples
reactjsrecharts

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


Solution

  • 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