Recharts는 React 기반의 데이터 시각화 라이브러리로, 다양한 그래프와 차트를 만들 수 있습니다. 로그 스케일을 적용하는 경우에는 Recharts의 CartesianGrid 컴포넌트와 YAxis 또는 XAxis 컴포넌트를 사용하여 조정할 수 있습니다.

먼저, YAxis (또는 XAxis) 컴포넌트를 사용하여 Y축 (또는 X축)을 생성합니다. 이 때 scale 속성을 log로 설정하여 로그 스케일을 적용합니다. 아래의 예제 코드를 참고해보세요.

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

const data = [
  { name: 'A', value: 1 },
  { name: 'B', value: 10 },
  { name: 'C', value: 100 },
  { name: 'D', value: 1000 },
];

const App = () => (
  <LineChart width={500} height={300} data={data}>
    <CartesianGrid strokeDasharray="3 3" />
    <XAxis dataKey="name" />
    <YAxis scale="log" />
    <Line type="monotone" dataKey="value" stroke="#8884d8" />
  </LineChart>
);

export default App;

위의 예제 코드에서 YAxis 컴포넌트에 scale 속성을 log로 설정하여 Y축에 로그 스케일을 적용하였습니다.

이제, 데이터의 값들이 로그 스케일로 표시되는 것을 확인할 수 있습니다. 즉, Y축 값들은 지수로 표현되며, 데이터 간의 차이가 더 잘 드러납니다.

참고로, XAxis에도 동일한 방식으로 로그 스케일을 적용할 수 있습니다. YAxis와 마찬가지로 scale 속성을 log로 설정하면 됩니다.

이렇게 Recharts에서 X축 또는 Y축에 로그 스케일을 적용하여 데이터를 로그 형식으로 표시할 수 있습니다. Recharts의 다양한 컴포넌트와 속성을 활용하면 데이터 시각화에 유용한 그래프와 차트를 만들 수 있습니다.

참고 자료:

• Recharts 공식 문서