[javascript] Recharts에서 차트의 범위를 동적으로 변경하는 방법은 무엇인가요?

01 Dec 2023

javascript

Recharts에서는 다양한 유형의 차트를 생성할 수 있지만, 여기서는 간단한 선 그래프를 예로 들겠습니다. 우선, 필요한 모듈들을 import 해줍니다.

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

다음으로, 데이터를 정의합니다. 이 데이터는 동적으로 변경될 범위를 가지는 배열 형태로 되어 있어야 합니다.

const data = [
  { name: 'Jan', value: 400 },
  { name: 'Feb', value: 300 },
  { name: 'Mar', value: 600 },
  { name: 'Apr', value: 800 },
  { name: 'May', value: 400 },
  // ...
];

이제 범위를 변경할 수 있는 상태값을 useState를 이용하여 정의합니다.

const [range, setRange] = useState(600);

여기서는 600이 기본 범위 값입니다. 이 값을 동적으로 변경하여 차트의 범위를 조절할 수 있습니다.

마지막으로, LineChart 컴포넌트를 사용하여 차트를 생성하고, XAxis와 YAxis의 domain 속성을 이용해 범위를 지정합니다.

<LineChart width={500} height={300} data={data}>
  <CartesianGrid strokeDasharray="3 3" />
  <XAxis dataKey="name" />
  <YAxis domain={[0, range]} />
  <Tooltip />
  <Legend />
  <Line type="monotone" dataKey="value" stroke="#8884d8" activeDot={{ r: 8 }} />
</LineChart>

여기서 YAxis의 domain 속성을 [0, range]으로 설정하여 범위를 동적으로 변경할 수 있습니다. 이렇게 설정하면, range 값에 따라 차트의 Y 축 범위가 동적으로 조절됩니다.

이제 컴포넌트를 렌더링하고, range 값을 변경하는 기능을 추가하면 됩니다.

function App() {
  const [range, setRange] = useState(600);

  const handleRangeChange = (event) => {
    setRange(parseInt(event.target.value));
  };

  return (
    <div>
      <input type="range" min="100" max="1000" value={range} onChange={handleRangeChange} />
      <LineChart width={500} height={300} data={data}>
        {/* 차트 설정 생략 */}
      </LineChart>
    </div>
  );
}

위 코드를 참고하여 Recharts에서 차트 범위를 동적으로 변경하는 방법을 확인해보세요.