Recharts에서 커스텀 레이블을 추가하는 방법은 크게 세 가지로 나눌 수 있습니다:
-
Label
컴포넌트 사용하기: Recharts에서 제공하는Label
컴포넌트를 사용하면 각각의 데이터 포인트에 커스텀 레이블을 추가할 수 있습니다. 데이터 포인트마다 다른 텍스트를 표시할 수도 있습니다. 예를 들어, 아래의 코드에서는 bar 차트의 각 막대에 해당하는 데이터의name
속성을 레이블로 표시합니다.import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Label } from 'recharts'; const data = [ { name: 'A', value: 10 }, { name: 'B', value: 20 }, { name: 'C', value: 30 }, ]; const CustomBarLabel = ({ x, y, width, value }) => ( <text x={x + width / 2} y={y - 10} textAnchor="middle" dominantBaseline="middle"> {value} </text> ); const CustomBarChart = () => ( <BarChart width={400} height={300} data={data}> <CartesianGrid strokeDasharray="3 3" /> <XAxis dataKey="name" /> <YAxis /> <Bar dataKey="value" fill="#8884d8" label={<CustomBarLabel />} /> </BarChart> );
위의 예시에서
CustomBarLabel
컴포넌트는Bar
컴포넌트의label
prop으로 전달됩니다.CustomBarLabel
컴포넌트는 막대의 중앙에 레이블을 표시하도록 설정되어 있습니다. -
LabelList
컴포넌트 사용하기:Label
컴포넌트는 특정 데이터 포인트에 대한 레이블을 추가하는데 사용됩니다. 하지만 모든 데이터 포인트에 대해 동일한 레이블을 추가하거나, 특정 조건에 맞는 데이터 포인트에만 레이블을 추가하려면LabelList
컴포넌트를 사용할 수 있습니다. 예를 들어, 아래의 코드에서는 line 차트의 데이터 포인트에 수평선 위에 레이블을 표시합니다.import { LineChart, Line, XAxis, YAxis, CartesianGrid, LabelList } from 'recharts'; const data = [ { name: 'A', value: 10 }, { name: 'B', value: 20 }, { name: 'C', value: 30 }, ]; const CustomLineLabel = ({ x, y, value }) => ( <text x={x} y={y - 10} textAnchor="middle" dominantBaseline="middle"> {value} </text> ); const CustomLineChart = () => ( <LineChart width={400} height={300} data={data}> <CartesianGrid strokeDasharray="3 3" /> <XAxis dataKey="name" /> <YAxis /> <Line dataKey="value" stroke="#8884d8"> <LabelList dataKey="value" position="top" content={<CustomLineLabel />} /> </Line> </LineChart> );
위의 예시에서
CustomLineLabel
컴포넌트는LabelList
컴포넌트의content
prop으로 전달됩니다.LabelList
컴포넌트는 데이터 포인트의value
값을 레이블로 표시하도록 설정되어 있습니다. -
CSS로 레이블 스타일링하기: Recharts의 많은 컴포넌트들은 레이블을 내장하고 있습니다. 이러한 컴포넌트들의 레이블은 CSS를 사용하여 스타일링할 수 있습니다. 예를 들어, 아래의 코드는 pie 차트의 섹션 레이블을 CSS로 스타일링하는 방법을 보여줍니다.
import { PieChart, Pie, Label } from 'recharts'; const data = [ { name: 'A', value: 10 }, { name: 'B', value: 20 }, { name: 'C', value: 30 }, ]; const CustomPieChart = () => ( <PieChart width={400} height={300}> <Pie dataKey="value" data={data} label> {data.map((entry, index) => ( <Label key={index} position="center"> {entry.name} </Label> ))} </Pie> </PieChart> );
위의 예시에서
Label
컴포넌트는 pie 차트의 섹션 레이블을 표시합니다. 각 섹션의name
속성 값이 레이블로 표시되도록 설정되어 있습니다.
위의 세 가지 방법을 사용하여 Recharts에서 커스텀 레이블을 추가할 수 있습니다. 각각의 방법은 다양한 차트 유형에 적용될 수 있으며, 원하는 결과물에 맞게 선택하여 사용하면 됩니다.