Graphique multiligne dans React

Question

J'essaie essentiellement de créer un graphique simple en utilisant Recharts dans React.

Le problème que j'ai est que je ne peux pas créer plusieurs lignes car l'axe X est différent pour les deux ensembles de données.

Par exemple : set1:[{x:1.1,y:2.1},{x:1.2,y:2.2}] et set2:[{x:1.3,y:3.2},{x:1.4,y: 3.4} ] . Je ne sais pas pourquoi chaque fois que j'essaie de créer un graphique multiligne avec Recharts, l'axe X est toujours le même et j'ai des lignes avec des axes Y différents, mais uniquement l'axe X.

J'ai essayé de créer différentes étiquettes X et Y, mais cela n'a pas aidé.

Answer 1

Vous pouvez utiliser plusieurs composants XAxis dans un composant LineChart et attribuer un xAxisId différent à chaque composant.

<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 },
];