[javascript] Recharts에서 차트의 격자 라인 스타일을 변경하는 방법은 무엇인가요?

01 Dec 2023

javascript

Recharts에서 차트의 격자 라인 스타일을 변경하려면 CartesianGrid 컴포넌트를 사용해야 합니다. CartesianGrid는 x와 y 축에 대한 격자 라인을 제어합니다.

다음은 x축의 격자 라인 스타일을 변경하는 예시 코드입니다.

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

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

const ExampleChart = () => {
  return (
    <LineChart width={400} height={300} data={data}>
      <CartesianGrid strokeDasharray="3 3" stroke="#ccc" /> // 격자 라인 스타일 설정
      <XAxis dataKey="name" />
      <YAxis />
      <Line type="monotone" dataKey="value" stroke="#8884d8" />
    </LineChart>
  );
}

위의 코드에서 CartesianGrid에 strokeDasharray 속성을 사용하여 라인의 스타일을 설정합니다. strokeDasharray는 점선을 만들 때 사용되며, 3 3과 같이 숫자를 조절하여 스타일을 변경할 수 있습니다. 또한 stroke 속성을 이용하여 선의 색상을 설정할 수도 있습니다.

이와 같이 CartesianGrid를 사용하여 차트의 격자 라인 스타일을 변경할 수 있습니다. Recharts에는 다양한 컴포넌트와 속성이 있으므로 문서를 참조하여 상세한 사용법을 확인할 수 있습니다.

참고 문서

Recharts 공식 문서