[TIL] 2022/01/13 Thu - react 차트 라이브러리 recharts 사용해보기

 

 

 

 

Today I Learned

 

 

📌 차트 라이브러리 사용해보기

 

지난 주에 있었던 프로젝트 중간발표 후 기능을 추가하게 되었는데,

기존에 있었던 밈 사전 페이지를 강화하는 쪽으로 결정이 돼서 내가 수치 관련 탭 화면을 담당하게 되었다.

 

사실 차트 라이브러리 사용해보고 싶어서 내가 하고 싶다고 먼저 얘기했다. ㅎㅎ

 

리액트에서 사용할 수 있는 차트 라이브러리를 알아보던 중 nivo를 알게 되었는데

처음에는 nivo가 커스텀의 끝판왕이라는 후기가 많이 보여서 사용해보려 했다.

 

 

https://nivo.rocks/

Home | nivo

 

라이브러리를 설치하고 적용해보는데,

오히려 커스텀할 수 있는 범위가 너무 방대하다보니 초심자의 입장에서는 이 장점을 잘 활용하기 어려웠다.

 

하나부터 열까지 모두 커스텀하려면 그 하나부터 열까지의 속성들을 잘 알고 있어야 하는데

나에게는 아직 익숙하지 않은 속성들이 많아서 무엇을, 얼마나 커스텀하면 좋을지 쉽사리 정하기 어려웠다.

 

그래서 UI가 깔끔하면서도 사용법이 간단하고, 적당히 커스텀할 수 있는 다른 차트 라이브러리를 찾던 중

recharts를 발견하고 이 라이브러리로 변경하기로 했다.

 

 

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

 

자바스크립트에서는 chart.js가 유명하긴 하지만 리액트에서는 react-chartjs가 따로 있어서

npm 트렌드에서 react-chartjs와 recharts를 비교해보았다.

 

 

recharts 를 사용하기로 결정한 이유는,

 

1) 우선 Stars 수가 가장 많아서 레퍼런스를 찾기 쉬울 것 같았고,

2) 업데이트 일자가 가장 최근이며,

3) 라이브러리가 생긴 시기는 비슷하지만 이슈 수가 많은 점이 마음에 들었다!

 

그리고 무엇보다 공식 문서에 Examples나 API 정리가 굉장히 잘 되어 있어서

초심자가 커스텀하기에도 큰 어려움이 없을 것 같았고 실제로도 그랬다. 

 

 

 

나는 최대한 심플하게 만들고 싶어서 속성들을 많이 덜어내고 사용했다.

 

라인 차트 컴포넌트

/* DictChart.js */

/* 사용할 속성들을 import 한다. */
import { ResponsiveContainer, LineChart, Line, XAxis, CartesianGrid, Tooltip } from 'recharts'

const DictChart = ({ chartData }) => {
  return (
    <>
      <ResponsiveContainer maxWidth={400} maxHeight={240}>
        <LineChart
          /* 차트로 그릴 데이터 주입 */
          data={data}
          margin={{
            top: 10,
            right: 0,
            left: 0,
            bottom: 0,
          }}
        >
          <CartesianGrid stroke="#e5e5e5" strokeDasharray="3 3" />
          <XAxis dataKey="name" fontSize="12px" fontWeight="500" padding={{ left: 10, right: 10 }} />
          <Tooltip content={<CustomTooltip />} />
          <Line type="linear" isAnimationActive={true} animationDuration={1500} dataKey="cnt" stroke="#6698FC" strokeWidth={2} activeDot={{ r: 8 }} />
        </LineChart>
      </ResponsiveContainer>
    </>
  )
}

export default DictChart

 

차트에 사용한 데이터

/* 라인 차트에 사용한 데이터 */
/* 추후 서버에서 받아오는 데이터로 수정할 예정! */

const data = [
  {
    name: '토',
    cnt: 10,
  },
  {
    name: '일',
    cnt: 19,
  },
  {
    name: '월',
    cnt: 10,
  },
  {
    name: '화',
    cnt: 34,
  },
  {
    name: '수',
    cnt: 10,
  },
  {
    name: '목',
    cnt: 8,
  },
  {
    name: '오늘',
    cnt: 22,
  },
]

 

툴팁 커스텀하기

/* customedTooltip */

const CustomTooltip = ({ active, payload, label }) => {
  if (active && payload && payload.length) {
    return (
      <Container>
        <p className="label">{`${label} : ${payload[0].value}`}</p>
      </Container>
    )
  }

  return null
}

/* styled-components */

const Container = styled.div`
  width: fit-content;
  height: 36px;
  padding: 8px;
  background-color: #fff;
  opacity: 0.85;
  border: 1px solid ${({ theme }) => theme.colors.line};
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  .label {
    font-size: ${({ theme }) => theme.fontSizes.base};
  }
`

 

Line에 적용한 속성

type : 라인 디자인, String / 직선은 "linear", 곡선은 "monotones"
isAnimationAcitve : 애니메이션 활성화, Boolean / default false
animationDuration : 애니메이션 진행 시간, Number / 단위는 밀리세컨드
stroke : 라인 컬러, String
strokeWidth : 라인 굵기, Number
activeDot : 마우스 오버 시 확대할 Dot 크기

 

 

LineChart에는 maxWidth, maxHeight 속성을 사용할 수 없고 width, height 도 % 단위로 사용할 수 없다.

무조건 고정된 pixel 단위이다.

 

처음에는 ResponsiveContainer를 제공하는 줄 모르고 반응형으로 어떻게 만들지 고민했는데

구글링 해보니 반응형 컨테이너를 따로 지원하고 있어서 import 후

ResponsiveContainer 태그에 maxWidth와 maxHeight를 설정했더니 화면이 줄어들었을 때 같이 잘 줄어든다!

 

기본으로 제공되는 툴팁도 마음에 안 들었는데 

공식 문서를 찾아보니 커스텀하는 방법에 대해서 잘 나와 있어서 찾아보고 적용했다.

 

역시 뭔가 잘 안 될 때는 공식 문서를 찾아보는 게 답인 것 같다!