리액트 차트 라이브러리 Recharts 사용법

✔️ Recharts 사용하기

최근 업무를 진행하면서 데이터 시각화용 차트 라이브러리를 고민해보았는데, 디자인도 괜찮고 사용 방법도 간단한 Recharts 라는 라이브러리를 찾게 되어 최종적으로 해당 라이브러리를 사용하기로 결정하였습니다.

▼ 10 Best React Chart Libraries
https://openbase.com/categories/js/best-react-chart-libraries

위 페이지에서도 알 수 있듯이 Recharts는 실제로 리액트 차트 라이브러브 Best10에 들 정도로 많이들 사용하고 있는 라이브러리입니다. 개인적으로 커스텀 하기도 무난한 듯 하고 애니메이션도 들어가 있어서 마음에 들더라고요.

✔️ Recharts 설치

npm install recharts

Recharts는 npm으로 간편하게 설치할 수 있습니다.

package.json을 확인하여 잘 설치되었는지 확인해줍니다.

✔️ Recharts 사용법

차트 예제 : https://recharts.org/en-US/examples

우선 Recharts를 사용하기 위해서는 위 링크에서 원하는 차트예제를 고릅니다.

import {BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend} from 'recharts';

그리고 차트를 사용할 파일 상단에 필요한 것들을 import 해준 다음 원하는대로 차트를 커스텀해주면 됩니다 😊

문서에 커스텀 관련 설명이 그리 친절하지는 않은 것 같지만 생각보다 커스텀하는것이 그렇게 어렵지는 않은 듯 했습니다. 저는 우선 기본 BarChart를 불러와서 최대인 경우만 다른 색이 나오게 바꿔봤습니다!

✔️ 소스코드

import React from "react";
import { BarChart, Bar, Cell, XAxis, YAxis, CartesianGrid, Tooltip, Legend, Label } from 'recharts';

const Recharts = () => {
   const data = [
      {
        time: '07:00',
        consumption: 0,
      },
      {
        time: '08:00',
        consumption: 20,
      },
      {
        time: '09:00',
        consumption: 58,
      },
      {
        time: '10:00',
        consumption: 74,
      },
      {
        time: '11:00',
        consumption: 78,
      },
      {
        time: '12:00',
        consumption: 54,
      },
      {
        time: '13:00',
        consumption: 90,
      },
      {
        time: '14:00',
        consumption: 60,
      },
      {
        time: '15:00',
        consumption: 45,
      },
      {
        time: '16:00',
        consumption: 36,
      },
      {
        time: '17:00',
        consumption: 60,
      },
      {
        time: '18:00',
        consumption: 50,
      },
      {
        time: '19:00',
        consumption: 60,
      },
    ];

const arr = data.map(e => e.consumption);

const renderCustomBarLabel = ({ payload, x, y, width, height, value }) => {
   return <text x={x + width / 2} y={y} fill="#666" textAnchor="middle" dy={-6}>{`${value}`}</text>;
};

return (
    <>
    <BarChart
      width={630}
      height={430}
      data={data}
      margin=
    >
      <CartesianGrid strokeDasharray="5" />
      <XAxis dataKey="time" />
      <YAxis />
      <Tooltip />
      <Legend />
      <Bar dataKey="consumption" radius={10} label={renderCustomBarLabel}>
      {
         data.map((entry, index) => (
            <Cell fill={entry.consumption === Math.max(...arr) ? '#3EE092' : '#3A495E'} />
         ))
      }
      </Bar>
    </BarChart>
    </>
 );

}

export default Recharts;

✔️ 결과

꽤나 만족스러운 라이브러리인 듯 하여 앞으로 열심히 사용해봐야겠다는 생각이 드네요 :)

✔️ 참고 사이트

https://recharts.org/en-US

🔔포스팅 공지
개인 공부 기록용 블로그 입니다.
잘못된 부분이 있을 시 메일이나 댓글로 지적해주시면 감사드리겠습니다 :)