Multiline chart in React

Question

I'm basically trying to make a simple chart using Recharts in React.

The problem I'm having is that I can't make multiple rows because the X-axis is different for both datasets.

For example: set1:[{x:1.1,y:2.1},{x:1.2,y:2.2}] and set2:[{x:1.3,y:3.2},{x:1.4,y: 3.4 }]. I don't know why every time I try to make a multiline chart with Recharts, the X axis is always the same, and I have lines with different Y axes, but only the X axis.

I tried creating different X and Y labels but it didn't help.

Answer 1

You can use multiple XAxis components in a LineChart component and assign a different xAxisId to each component.

<LineChart data="{data}">
  <XAxis xAxisId="0" dataKey="x1" />
  <XAxis xAxisId="1" dataKey="x2" />
  <YAxis />
  <Line dataKey="y1" xAxisId="0" />
  <Line dataKey="y2" xAxisId="1" />
</LineChart>


// Data
const data = [
  { x1: 1.1, y1: 2.1, x2: 1.3, y2: 3.2 },
  { x1: 1.2, y1: 2.2, x2: 1.4, y2: 3.4 },
];