[javascript] Recharts에서 레이블 간격을 조정하는 방법은 무엇인가요?

01 Dec 2023

javascript

Recharts에서 레이블 간격을 조정하는 방법은 xAxis 또는 yAxis 컴포넌트의 interval 속성을 사용하여 설정할 수 있습니다. interval 속성은 레이블 간격을 나타내는 정수 값을 받습니다. 이 값을 조정하여 레이블 간격을 조정할 수 있습니다.

다음은 xAxis의 interval 속성을 사용하여 레이블 간격을 조정하는 예시 코드입니다:

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

const data = [
  { name: 'Jan', value: 100 },
  { name: 'Feb', value: 200 },
  { name: 'Mar', value: 150 },
  { name: 'Apr', value: 300 },
  { name: 'May', value: 250 },
  { name: 'Jun', value: 400 },
];

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

export default App;

위 예시 코드에서 XAxis 컴포넌트의 interval 속성을 1로 설정하였습니다. 이렇게 하면 x축 레이블이 하나 건너 하나씩 표시되어 레이블 간격이 조정됩니다.

추가적으로, interval 값으로 음수를 사용하면 일부 레이블을 자동으로 숨길 수 있습니다. 예를 들어 interval={-1}로 설정하면 모든 레이블이 표시되지 않습니다.

이와 같이 Recharts에서 레이블 간격을 조정하는 방법을 간단히 소개했습니다. 더 자세한 설정 방법은 Recharts 문서를 참고해주세요.