[javascript] Recharts에서 차트의 마진과 패딩을 조정하는 방법은 무엇인가요?

01 Dec 2023

javascript

차트의 마진은 차트 요소와 차트 영역 사이의 간격을 조절합니다. 패딩은 차트 요소 내부의 공간을 조절하는데 사용됩니다. Recharts에서는 margin과 padding 속성을 사용하여 이러한 조정을 수행할 수 있습니다.

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

const data = [
  { name: 'Page A', uv: 4000, pv: 2400, amt: 2400 },
  { name: 'Page B', uv: 3000, pv: 1398, amt: 2210 },
  { name: 'Page C', uv: 2000, pv: 9800, amt: 2290 },
  { name: 'Page D', uv: 2780, pv: 3908, amt: 2000 },
  { name: 'Page E', uv: 1890, pv: 4800, amt: 2181 },
  { name: 'Page F', uv: 2390, pv: 3800, amt: 2500 },
  { name: 'Page G', uv: 3490, pv: 4300, amt: 2100 },
];

const CustomChart = () => (
  <LineChart width={500} height={300} data={data} margin={{ top: 20, right: 30, left: 20, bottom: 10 }}>
    <XAxis dataKey="name" />
    <YAxis />
    <CartesianGrid stroke="#eee" strokeDasharray="5 5" />
    <Line type="monotone" dataKey="uv" stroke="#8884d8" />
    <Line type="monotone" dataKey="pv" stroke="#82ca9d" />
    <Tooltip />
    <Legend />
  </LineChart>
);

export default CustomChart;

위의 예제에서 margin 속성을 사용하여 상단(top), 오른쪽(right), 왼쪽(left), 및 하단(bottom) 마진 값을 설정할 수 있습니다. padding 속성은 해당 요소 내부의 마진 값을 설정합니다.

차트를 생성하는 컴포넌트에서 margin 속성을 설정하고, 그 값을 원하는 값으로 조정하여 마진과 패딩을 조정할 수 있습니다. 이를 통해 차트의 레이아웃을 조정하여 보다 깔끔하고 가독성이 높은 차트를 만들 수 있습니다.

Recharts 공식 문서: https://recharts.org/en-US/
Recharts 마진 및 패딩 설정: https://recharts.org/en-US/guide/margins-and-padding