[javascript] Recharts에서 차트 내의 특정 위치에 데이터를 표시하는 방법은 무엇인가요?
-
Label
컴포넌트를 사용하여 데이터 레이블 표시하기: Recharts의Label
컴포넌트를 사용하면 차트 내의 특정 위치에 데이터 값을 표시할 수 있습니다. 예를 들어, X축의 데이터 값 위에 데이터 레이블을 표시하려면 다음과 같이 코드를 작성할 수 있습니다.import { LineChart, Line, XAxis, YAxis, Label } from "recharts"; const data = [ { name: "A", value: 10 }, { name: "B", value: 20 }, { name: "C", value: 30 }, ]; const CustomLabel = ({ x, y, value }) => ( <text x={x} y={y} dy={-4} fill="#888" textAnchor="middle">{value}</text> ); const App = () => ( <LineChart width={400} height={300} data={data}> <XAxis dataKey="name"> <Label content={<CustomLabel />} position="insideBottom" /> </XAxis> <YAxis /> <Line type="monotone" dataKey="value" stroke="#8884d8" /> </LineChart> ); export default App;
CustomLabel
컴포넌트를 정의하여Label
컴포넌트에 전달하고,position
prop을 사용하여 데이터 레이블이 X축 위에 표시되도록 설정합니다. -
ReferenceDot
컴포넌트를 사용하여 데이터 포인트 강조하기: Recharts의ReferenceDot
컴포넌트를 사용하면 차트 내의 특정 데이터 포인트를 강조하여 표시할 수 있습니다. 예를 들어, 특정 값이 임계치를 초과하는 경우 해당 데이터 포인트를 강조하려면 다음과 같이 코드를 작성할 수 있습니다.import { LineChart, Line, XAxis, YAxis, ReferenceDot } from "recharts"; const data = [ { name: "A", value: 10 }, { name: "B", value: 20 }, { name: "C", value: 30 }, ]; const App = () => ( <LineChart width={400} height={300} data={data}> <XAxis dataKey="name" /> <YAxis /> <Line type="monotone" dataKey="value" stroke="#8884d8" /> <ReferenceDot x="B" y={20} stroke="red" fill="red" r={5} /> </LineChart> ); export default App;
위의 코드에서
ReferenceDot
컴포넌트를 사용하여x
와y
prop을 이용하여 표시하려는 데이터 포인트의 위치를 설정합니다.stroke
,fill
,r
등의 prop을 사용하여 원하는 스타일을 지정할 수 있습니다.
Recharts는 다양한 커스터마이즈 가능한 컴포넌트를 제공하여 차트에 데이터를 표시하는 방법을 확장할 수 있습니다. Recharts 공식 문서를 참조하여 필요한 컴포넌트를 선택하고 사용법을 자세히 알아보시기 바랍니다.
참고문헌: