[javascript] Recharts에서 마우스 드래그를 통해 차트를 확대하는 방법은 무엇인가요?

01 Dec 2023

javascript

Recharts를 프로젝트에 설치하고 import합니다.:

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

데이터를 준비하고 차트 컴포넌트를 생성합니다.:

const data = [
  { name: '1월', value: 100 },
  { name: '2월', value: 200 },
  { name: '3월', value: 150 },
  { name: '4월', value: 300 },
  // ...
];

const App = () => {
  return (
    <ResponsiveContainer width="100%" height={400}>
      <LineChart data={data}>
        <XAxis dataKey="name" />
        <YAxis />
        <Tooltip />
        <Line type="monotone" dataKey="value" stroke="#8884d8" />
      </LineChart>
    </ResponsiveContainer>
  );
};

확대 기능을 추가합니다. 확대를 위해 Zoom 컴포넌트를 사용합니다.:

import { LineChart, Line, XAxis, YAxis, Tooltip, ResponsiveContainer, Zoom } from 'recharts';

const App = () => {
  return (
    <ResponsiveContainer width="100%" height={400}>
      <Zoom>
        <LineChart data={data}>
          <XAxis dataKey="name" />
          <YAxis />
          <Tooltip />
          <Line type="monotone" dataKey="value" stroke="#8884d8" />
        </LineChart>
      </Zoom>
    </ResponsiveContainer>
  );
};

이제 마우스 드래그로 차트를 확대할 수 있습니다.