[javascript] Recharts에서 차트의 배경색과 테두리 색상을 변경하는 방법은 무엇인가요?

01 Dec 2023

javascript

먼저, 차트의 배경색을 변경하려면 Chart 컴포넌트의 style 속성을 이용하면 됩니다. 이 속성에 CSS 스타일 객체를 전달하여 배경색을 설정할 수 있습니다. 아래 코드는 Chart 컴포넌트의 배경색을 파란색으로 설정하는 예시입니다.

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

function MyChart() {
  const chartStyle = {
    background: 'blue',
  };

  return (
    <LineChart width={500} height={300}>
      <Chart style={chartStyle} />
      {/* ... */}
    </LineChart>
  );
}

테두리 색상을 변경하려면 CartesianGrid 컴포넌트의 stroke 속성을 이용하면 됩니다. stroke 속성에 원하는 색상을 전달하여 테두리 색상을 설정할 수 있습니다. 아래 코드는 CartesianGrid 컴포넌트의 테두리 색상을 빨간색으로 설정하는 예시입니다.

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

function MyChart() {
  return (
    <LineChart width={500} height={300}>
      <CartesianGrid stroke="red" />
      {/* ... */}
    </LineChart>
  );
}

Recharts에서는 다양한 차트 종류와 속성을 제공하므로 필요에 따라 다양한 컴포넌트와 속성을 활용하여 차트를 사용자 정의할 수 있습니다. 자세한 내용은 Recharts 공식 문서를 참고하세요.