[javascript] Recharts에서 전체 차트 사이즈를 조정하는 방법은 무엇인가요?

01 Dec 2023

javascript

예를 들어, 다음과 같은 코드를 사용하여 차트의 크기를 조정할 수 있습니다:

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

const MyChart = () => {
  // 차트 데이터
  const data = [
    { name: 'A', value: 10 },
    { name: 'B', value: 20 },
    { name: 'C', value: 30 },
    // ...
  ];

  return (
    <LineChart width={500} height={300} data={data}>
      <Line type="monotone" dataKey="value" stroke="#8884d8" />
      <CartesianGrid stroke="#ccc" />
      <XAxis dataKey="name" />
      <YAxis />
    </LineChart>
  );
};

export default MyChart;

위의 코드에서 <LineChart> 컴포넌트의 width와 height 속성을 원하는 크기로 설정하면 됩니다. 이렇게 하면 전체 차트가 해당 크기로 조정됩니다.

추가적인 설정으로 margin 속성을 사용하여 차트와 경계 사이에 여백을 추가할 수도 있습니다. 예를 들어, <LineChart> 컴포넌트에 margin={{ top: 20, right: 30, bottom: 20, left: 30 }}과 같은 속성을 추가하면 여백이 적용됩니다.

위의 예시 코드는 LineChart를 사용한 예시입니다. Recharts에는 여러 다른 유형의 차트 컴포넌트가 있으므로 필요에 따라 해당 컴포넌트를 사용하고 속성을 설정하여 전체 차트의 크기를 조정할 수 있습니다.

Recharts 공식 문서에서 더 자세한 내용을 확인할 수도 있습니다. (https://recharts.org/)