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.
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
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 }, ];