[javascript] Recharts에서 수평선이나 수직선을 통해 차트의 특정 값을 표시하는 방법은 무엇인가요?

01 Dec 2023

javascript

Recharts에서 수평선을 표시하기 위해서는 ReferenceLine 컴포넌트를 사용합니다. 이 컴포넌트를 차트의 ReferenceLines 속성에 추가하면 됩니다.

아래의 코드 예제를 통해 수평선을 표시하는 방법을 보여드리겠습니다:

import { LineChart, Line, XAxis, YAxis, ReferenceLine, CartesianGrid, Tooltip, Legend } from 'recharts';

// 차트 데이터
const data = [
  { name: 'A', value: 10 },
  { name: 'B', value: 20 },
  { name: 'C', value: 5 },
  // ...
];

// 수평선을 표시할 값을 설정합니다.
const targetValue = 15;

// Recharts LineChart 컴포넌트를 사용하여 차트를 생성합니다.
const ChartExample = () => (
  <LineChart width={500} height={300} data={data}>
    <CartesianGrid strokeDasharray="3 3" />
    <XAxis dataKey="name" />
    <YAxis />
    <Tooltip />
    <Legend />
    <Line type="monotone" dataKey="value" stroke="#8884d8" />
    <ReferenceLine y={targetValue} stroke="red" label={`Target: ${targetValue}`} />
  </LineChart>
);

export default ChartExample;

위의 예제에서는 ReferenceLine 컴포넌트를 사용하여 value가 15인 수평선을 그렸습니다. ReferenceLine 컴포넌트의 y 속성은 수평선의 위치를 설정하고, stroke 속성은 선의 색상을 지정합니다. 또한 label 속성을 사용하여 수평선에 레이블을 추가할 수 있습니다.

위의 예제 코드를 사용하여 Recharts에서 수평선을 표시하는 방법을 익혔습니다. Recharts는 매우 다양한 차트 유형과 특징을 제공하기 때문에 필요한 경우 공식 문서를 참조하면 더 많은 정보를 얻을 수 있습니다.