[React.js] Recharts 라이브러리

Recharts 라이브러리

들어가며

• 리액트(React) 기반의 데이터 시각화 라이브러리인 Recharts에 대해 정리해본다.

 

Recharts

개념

• 리액트(React) 기반의 데이터 시각화 라이브러리
• 다양한 차트를 쉽게 생성하고 데이터를 시각적으로 표현할 수 있도록 도와준다.
• 선언형 방식으로 리액트와 잘 맞으며, 그래프를 구성하는 데 필요한 여러 컴포넌트를 제공해 직관적으로 차트를 구성할 수 있도록 도와준다.

ⓒably

 

특징

• 리액트 컴포넌트를 사용하여 차트를 구성하므로, 리액트의 상태(State)와 속성을 활용해 동적으로 차트를 업데이트할 수 있다.
• Recharts는 내부적으로 D3.js 라이브러리를 활용하여 차트를 렌더링한다.
  • D3.js의 강력하고 다양한 기능을 리액트 컴포넌트 형태로 간편하게 사용할 수 있다.
• 차트를 구성하는 요소들이 모두 독립적인 컴포넌트로 제공되어 있어 필요한 컴포넌트를 조합하여 차트를 만들 수 있다.
• 차트의 스타일, 레이아웃, 색상, 애니메이션 등을 쉽게 커스터마이징할 수 있다.
• 다양한 화면 크기와 기기에 맞춰 자동으로 크기를 조정할 수 있다. (반응형 디자인)

 

D3.js는 주로 SVG, HTML, CSS를 조작하여 데이터를 시각화하며, 데이터 변환, 시각화, 애니메이션을 모두 지원하는 라이브러리이다.

 

주요 차트 유형

• Recharts는 다양한 차트 유형을 제공한다.

유형	설명
선형 차트(Line Chart)	시간 또는 연속적인 데이터 변화를 시각화할 때 사용하면 적합하다.
막대 차트(Bar Chart)	카테고리별 비교를 할 때 사용하면 적합하다.
영역 차트(Area Chart)	시간에 따른 데이터 변화의 크기를 표현할 때 사용하면 적합하다.
원형 차트(Pie Chart)	카테고리 내 비율을 시각화할 때 사용하면 적합하다.
레이더 차트(Rader Chart)	여러 카테고리의 강도를 표시할 때나, 비교할 때 사용하면 적합하다.
산포도(Scatter Chart)	두 변수 간의 관계를 시각화 할 때 사용하면 적합하다.

 

설치

$ npm install recharts   # yarn add recharts

 

사용 예제

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

const data = [
  { name: 'Page A', uv: 4000, pv: 2400, amt: 2400 },
  { name: 'Page B', uv: 3000, pv: 1398, amt: 2210 },
  { name: 'Page C', uv: 2000, pv: 9800, amt: 2290 },
  { name: 'Page D', uv: 2780, pv: 3908, amt: 2000 },
  { name: 'Page E', uv: 1890, pv: 4800, amt: 2181 },
  { name: 'Page F', uv: 2390, pv: 3800, amt: 2500 },
  { name: 'Page G', uv: 3490, pv: 4300, amt: 2100 },
];

const SimpleLineChart = () => (
  <ResponsiveContainer width="100%" height={400}>
    <LineChart data={data}>
      <CartesianGrid strokeDasharray="3 3" />
      <XAxis dataKey="name" />
      <YAxis />
      <Tooltip />
      <Legend />
      <Line type="monotone" dataKey="pv" stroke="#8884d8" activeDot={{ r: 8 }} />
      <Line type="monotone" dataKey="uv" stroke="#82ca9d" />
    </LineChart>
  </ResponsiveContainer>
);

export default SimpleLineChart;

 

⇒ @<ResponsiveContainer>@ : 반응형 디자인을 적용하기 윟나 컨테이너. 화면 크기에 맞춰 차트 크기를 조절해준다.

⇒ @<LineChart>@ : 선형 차트를 생성하는 컴포넌트

⇒ @<CartesianGrid>@ : 차트 배경에 격자선 추가

⇒ @<XAxis>@, @<YAxis>@ : X축과 Y축 정의

⇒ @<Tooltip>@ : 데이터를 툴팁으로 표시

⇒ @<Legend>@ : 범례 추가

⇒ @<Line>@ : 데이터를 선형 차트로 그리기

 

고급 기능 활용하기

• @<Tooltip>@ 컴포넌트를 커스터마이징하여 툴팁을 더욱 더 정교하게 설정할 수 있다.
• @onClick@, @onMouseEnter@, @onMouseLeave@ 등의 이벤트 핸들러를 등록하여 상호작용 기능을 추가할 수 있다.
• X축과 Y축을 여러 개 설정하여 더 복잡한 데이터 관계를 표현할 수 있다.

 

API Guides

• 더 자세한 내용은 아래의 API Guides를 참고한다.

https://recharts.org/en-US/api

 

참고 사이트

How to use Next.js and Recharts to build an information dashboard

Create charts using Recharts | Refine