[javascript] Recharts에서 축 범위를 설정하는 방법은 무엇인가요?

01 Dec 2023

javascript

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

const data = [
  { name: '1월', value: 400 },
  { name: '2월', value: 300 },
  { name: '3월', value: 600 },
  { name: '4월', value: 800 },
  { name: '5월', value: 500 },
  { name: '6월', value: 900 },
];

const App = () => {
  return (
    <LineChart width={500} height={300} data={data}>
      <XAxis dataKey="name" />
      <YAxis domain={[200, 1000]} />
      <CartesianGrid stroke="#eee" strokeDasharray="5 5" />
      <Line type="monotone" dataKey="value" stroke="#8884d8" />
      <Tooltip />
      <Legend />
    </LineChart>
  );
};

export default App;

위의 예제는 YAxis 컴포넌트의 domain prop을 사용하여 y 축의 최소값을 200, 최대값을 1000으로 설정하는 방법을 보여줍니다. 이렇게 설정하면 그래프가 특정 범위 내에서만 표시됩니다.

축의 범위를 업데이트하거나 동적으로 변경해야하는 경우에는 Recharts의 state를 활용하여 범위를 쉽게 조작할 수 있습니다. setState 함수를 사용하여 상태를 업데이트하고, 그에 따라 그래프의 축 범위도 업데이트할 수 있습니다.

더 자세한 정보는 Recharts 공식 문서를 참조하세요.