[javascript] Recharts에서 차트의 축을 옆에 붙이고, 차트를 겹쳐서 표시하는 방법은 무엇인가요?

01 Dec 2023

javascript

Recharts에서 차트의 축을 옆에 붙이는 것은 간단합니다. XAxis 및 YAxis 컴포넌트를 사용하여 X축과 Y축을 정의하고, position 속성을 사용하여 축의 위치를 지정할 수 있습니다. 예를 들어, 왼쪽에 Y축을 표시하려면 다음과 같이 코드를 작성할 수 있습니다:

import { LineChart, XAxis, YAxis, Line } from 'recharts';

const data = [
  { name: 'A', value: 10 },
  { name: 'B', value: 20 },
  { name: 'C', value: 30 },
];

<LineChart width={400} height={300} data={data}>
  <XAxis dataKey="name" />
  <YAxis />
  <Line type="monotone" dataKey="value" />
</LineChart>

그러나 차트를 겹쳐서 표시하려면 추가적인 작업이 필요합니다. 다양한 차트를 겹치기 위해 ComposedChart 컴포넌트를 사용하고, Area, Bar, Line 등 여러 차트를 함께 사용할 수 있습니다. 예를 들어, Line 차트 위에 Area 차트와 Bar 차트를 겹쳐서 표시하려면 다음과 같이 코드를 작성할 수 있습니다:

import { ComposedChart, XAxis, YAxis, Area, Bar, Line } from 'recharts';

const data = [
  { name: 'A', value: 10, areaValue: 5, barValue: 7 },
  { name: 'B', value: 20, areaValue: 12, barValue: 15 },
  { name: 'C', value: 30, areaValue: 10, barValue: 20 },
];

<ComposedChart width={400} height={300} data={data}>
  <XAxis dataKey="name" />
  <YAxis />
  <Area type="monotone" dataKey="areaValue" fill="#8884d8" />
  <Bar dataKey="barValue" barSize={20} fill="#413ea0" />
  <Line type="monotone" dataKey="value" stroke="#ff7300" />
</ComposedChart>

위 예제에서는 Area 차트와 Bar 차트는 각각 Area와 Bar 컴포넌트로 정의되어 있고, 이들을 ComposedChart 안에 함께 배치하였습니다.

Recharts에서는 다양한 차트 옵션을 제공하므로, 원하는 스타일과 기능을 차트에 적용할 수 있습니다. 자세한 내용은 Recharts 문서를 참조하세요.