Recharts 라이브러리 사용하기

지혜·2023년 9월 13일

Recharts 라이브러리

🎈 Intro

간단한 시각화 차트를 만들 수 있는 라이브러리를 찾다가 리액트에서 개발된 라이브러리인 Recharts를 사용해보기로 했다.

📎 Recharts 사이트

https://recharts.org/
공식문서의 가이드와 예제 코드를 보면서 작업하면 된다!

💡 라이브러리 사용법

1. Install

$ npm install recharts

2. Choose the type of chart

area chart와 bar chart를 동시에 보여주는 composed chart가 필요했다.
차트 종류는 API 메뉴에서 확인할 수 있다.

내리다 보면 차트에 있는 속성이 뭐가 있는지에 대한 자세한 설명이 있다.
부모/자식 컴포넌트에 올 수 있는 것들과 관련 속성들은 어떤 게 있는지 default 값을 확인하면서 필요한 것들을 커스터마이징 할 수 있다.

Property

data : 그래프에 출력될 데이터 및 name 포함
margin : 컨테이너 주변의 공백 크기 (기본값: { top: 5, right: 5, bottom: 5, left: 5 })
stroke : 선 색상
domain : Y축 값의 범위
barSize : 막대의 너비 또는 높이
dataKey : 영역형 차트에서 고유해야 하는 데이터 그룹의 키
orientation : 축의 방향
type : 축의 유형
tickCount : 축 tick의 개수(유형이 카테고리인 경우 사용X)

General Components

ResponsiveContainer : 차트가 상위 컨테이너의 크기에 맞게 조정되도록 하는 컨테이너 컴포넌트

<ResponsiveContainer width={700} height="80%">
    <AreaChart data={data}
      margin={{ top: 20, right: 30, left: 0, bottom: 0 }}>
      <XAxis dataKey="name" />
      <YAxis />
      <CartesianGrid strokeDasharray="3 3" />
      <Tooltip />
      <ReferenceLine x="Page C" stroke="green" label="Min PAGE" />
      <ReferenceLine y={4000} label="Max" stroke="red" strokeDasharray="3 3" />
      <Area type="monotone" dataKey="uv" stroke="#8884d8" fill="#8884d8" />
    </AreaChart>
  </ResponsiveContainer>

label : 직교 좌표의 보기 상자에 있는 위치(말이 너무 어렵다..)

value : Label의 자식으로 지정할 수 있는 레이블의 값

offset : 지정된 위치에 대한 오프셋

position : view box를 기준으로 한 레이블의 위치

angle : 축의 value 값의 각도

<BarChart 
  width={730} 
  height={250} 
  data={data} 
  margin={{ top: 15, right: 30, left: 20, bottom: 5 }}
>
  <CartesianGrid strokeDasharray="3 3" />
  <XAxis dataKey="name">
    <Label value="Pages of my website" offset={0} position="insideBottom" />
  </XAxis>
  <YAxis label={{ value: 'pv of page', angle: -90, position: 'insideLeft' }} />
  <Bar dataKey="pv" fill="#8884d8">
    <LabelList dataKey="name" position="top" />
  </Bar>
</BarChart>

Cell : 파이, 막대 또는 방사형 막대로 감싸서 각 자식의 속성을 지정할 때 사용

<BarChart width={730} height={250} data={data}>
  <Bar dataKey="value">
    {
      data.map((entry, index) => (
        <Cell key={`cell-${index}`} stroke={colors[index]}  strokeWidth={index === 2 ? 4 : 1}/>
      ))
    }
  </Bar>
</BarChart>

3. 응용 코드

import {
  Area,
  Bar,
  XAxis,
  YAxis,
  Tooltip,
  CartesianGrid,
  ComposedChart,
  Legend,
  ResponsiveContainer,
  Cell,
} from "recharts";

const Chart = ({ district, handleClickFiltering }) => {
  const { data } = useChartData();

  return (
    <>
      <ResponsiveContainer width="100%" height={500}>
        <ComposedChart
          data={data}
          margin={{ top: 40, right: 40, bottom: 40, left: 40 }}
        >
          <CartesianGrid stroke="#efefef" />
          <XAxis dataKey="time" />
          <YAxis
            label={{
              value: 'area',
              angle: -90,
              position: 'insideLeft',
              offset: -10
            }}
            yAxisId="left"
            domain={[0, 300]}
          />
          <YAxis
            label={{
              value: 'bar',
              angle: 90,
              position: 'insideRight',
              offset: -10
            }}
            yAxisId="right"
            orientation="right"
          />
          <Tooltip />
          <Legend />
          <Bar
            dataKey="value_bar"
            barSize={20}
            fill="#7ac4c0"
            yAxisId="right"
          >
            {data.map((item, idx) => (
              <Cell
                key={`cell-${idx}`}
                fill={`${item.id === district ? `#3ea09b` : `#3e91a07b`}`}
              />
            ))}
          </Bar>
          <Area
            dataKey="value_area"
            type="monotone"
            fillOpacity={0.4}
            fill="#ff7300"
            stroke="#ff7300"
            yAxisId="left"
          />
        </ComposedChart>
      </ResponsiveContainer >
    </>
  )
};

export default Chart;

먼저 차트에서 사용하는 것들은 전부 import 시켜주어야 한다.
x축은 time이라는 data로 시계열 차트를 만들고자 하였다.
y축에 양옆으로 area차트와 bar 차트를 보여주기 위해 2개를 작성하여 yAxisId에 left, right로 지정해주었다.
chart 종류를 Bar와 Area로 한 다음 yAxisId에 right, left를 지정한다.

4. 응용 차트 이미지 📈

area y축의 domain을 0~300으로 범위를 변경해주었기 때문에, 상대적으로 bar 보다 밑에 위치해있는 것을 확인할 수 있다.
옵션에 tickCount 를 추가해주면 지금은 기본값인 5개이지만, y축의 갯수를 변경할 수도 있다.

문제: 차트가 겹치는데 뒤에 클릭하고 싶을 때 ⁉

area 차트가 bar차트 앞에 위치해 있는데, bar를 클릭했을 때 필터링을 구현해야 하는 요구 사항이 있었다.
근데 bar를 클릭하면 되는데, area와 겹쳐진 bar 부분은 클릭이 안되서 한참을 찾다가 겨우 발견했다.
area차트에 pointerEvent 속성을 없애주어야 한다.