rechart (bar chart/ area chart/ pie chart 커스텀)

프로젝트에서 숫자들을 차트로 표현해야 할 일이 생겼다.
chart를 작성하기 좋은 라이브러리를 찾아봤는데 react에서 유명한 라이브러리로는 rechart와 chart js 이렇게 두 개가 있었다.

rechart와 chart js 중 rechart가 내가 원하는 디자인으로 커스텀하기 좋을 것 같다는 판단이 들었다.
참고할 자료도 많았고, 코드도 비교적 간단하게 구성할 수 있었기 때문이다.

 rechart

rechart 라이브러리를 사용 하는 것은 간단했다.

rechart 라이브러리를 설치한 뒤

 $ npm install recharts

공식 홈페이지에 나와있는 예시들 중 원하는 그래프의 코드를 가져와서 이용하면 된다.

https://recharts.org/en-US

위에 rechart 공식페이지에 다양한 차트와 코드가 있어서 만들 때 참고할 수 있다
그래서 코드에 적용하는 것은 금방했지만 커스텀하는데만 하루가 꼬박 걸렸다 ..

rechart는 다양한 종류의 그래프를 참고할 수 있었다. 이 중에서 필요했던 차트는 bar, area, pie 차트였다

const data =
[
{ name: 'a', '1주': 40, '2주': 20, '3주': 50, '4주': 60, '5주': 15, },
{ name: 'b', '1주': 10, '2주': 20, '3주': 30, '4주': 50, '5주': 15, },
{ name: 'c', '1주': 25, '2주': 30, '3주': 10, '4주': 20, '5주': 15, },
{ name: 'd', '1주': 46, '2주': 60, '3주': 70, '4주': 75, '5주': 50, },
];

해당 배열에 원하는 데이터를 넣고 아래와 같이 다양한 차트로 표현할 수 있다.

Bar chart

 

<div style={{ width: '1100px', height: '480px' }}>
              <ResponsiveContainer width="100%" height="100%">
                <BarChart
                  width={30}
                  height={100}
                  data={data}
                  margin={{
                    top: 5,
                    right: 30,
                    left: 20,
                    bottom: 5,
                  }}
                >
                  <CartesianGrid strokeDasharray="4 4" />
                  <XAxis dataKey="name" />
                  <Legend />
                  <YAxis />
                  <Tooltip />
                  <Bar
                    dataKey="1주"
                    barSize={25}
                    radius={[7, 7, 0, 0]}
                    fill="#3A3A3A"
                  
                  />
                  //이렇게 바 크기나 모양을 커스텀할 수도 있어요
                  
                  <Bar dataKey="2주" fill="#DEFF59" />
                  <Bar dataKey="3주" fill="#EEE" />
                  <Bar dataKey="4주" fill="#B5B5B5" />
                  <Bar dataKey="5주" fill="#FF7A00" />
                </BarChart>
              </ResponsiveContainer>
            </div>

Pie Chart

 <div style={{ width: '1100px', height: '200px' }}>
              <ResponsiveContainer width="100%" height="100%">
                <BarChart
                  width={30}
                  height={100}
                  data={data}
                  margin={{
                    top: 5,
                    right: 30,
                    left: 20,
                    bottom: 5,
                  }}
                >
                  <CartesianGrid strokeDasharray="3 3" />
                  <XAxis dataKey="name" />
                  <Legend />
                  <YAxis />
                  <Tooltip />
                  <Bar dataKey="1주" fill="#DEFF59" />
                  <Bar dataKey="2주" fill="#FF7A00" />
                  <Bar dataKey="3주" fill="#EEE" />
                </BarChart>
              </ResponsiveContainer>
            </div>

Area Chart

<div style={{ width: '1100px', height: '400px' }}>
              <ResponsiveContainer width="100%" height="100%">
                <AreaChart
                  // layout="vertical"
                  width={500}
                  height={300}
                  data={data}
                  margin={{
                    top: 20,
                    right: 30,
                    left: 20,
                    bottom: 5,
                  }}
                >
                  <CartesianGrid strokeDasharray="3 3" />
                  <XAxis dataKey="name" type="category" />
                  <YAxis type="number" />
                  <Tooltip />
                  <Area dataKey="sale" stroke="#B5B5B5" fill="#EEE" />
                </AreaChart>
              </ResponsiveContainer>
            </div>

area chart는 특이하게 tooltip이 위아래로 왔다갔다 한다는 특징이 있다.

rechart 커스텀

rechart는 원하는 차트의 모양대로 커스텀해서 사용할 수 있다.
x축, y축 뿐만 아니라 데이터를 표시하는 tooltip등도 커스텀할 수 있다.
커스텀을 하기 위해서는 해당하는 곳에 옵션을 주면 된다.

<Xaxis/>은 x축 , <YAxis/>는 y축

<YAxis
  strokeWidth={0}
  tickCount={6}
  dx={-30}
  tick={{ fill: '#B5B5B5', fontSize: '14px', textAnchor: 'start' }}
  label={{
  	value: '(건)',
  	offset: -5,
  	fontSize: 14,
  	dx: 10,
  	position: 'insideBottom',
  	fill: '#B5B5B5',
  }}
/>

<Tooltip/>은 마우스 호버시 보여지는 데이터 값

const CustomTooltip = (data) => {
    const { active, payload, label } = data;

    if (active && payload && payload.length) {
      return (
        <div className="bg-center bg-[url('/images/bubble.png')] w-[60px] h-[30px] bg-[length:60px_30px] bg-no-repeat flex justify-center pt-[2px]">
          <span className="text-white text-sm text-center">
            {payload[0].value}
          </span>
        </div>
      );
    }
    return null;
  };

...

<Tooltip
    shared={false}
    position={{ x: posData1.x - 17, y: posData1.y - 35 }}
    content={<CustomTooltip />}
  />

hover 시 보여지는 데이터의 위치를 지정해주고 컨텐츠의 내용을 아래와 같이 띄울 수 있다

<CartesianGrid\>는 그래프 안에 눈금
<Legend\>는 무슨색이 어떤 데이터를 나타내는지 알려주는 지표

<Legend
  iconType="circle"
  verticalAlign="top"
  align="right"
  height={50}
  position="top-right"
  wrapperStyle={{ fontSize: '12px', marginRight: '50px' }}
  formatter={(value, entry, index) => (
     <span style={{ color: 'var(--sub, #1F1F1F)', marginRight: '10px' }}>
        {value}
     </span>
   )}
/>

이렇게 간단하게(?) 차트를 원하는 모양으로 커스텀해서 사용할 수 있다.

---

역시 커스텀 작업이 가장 라이브러리 안의 코드를 확인하기 좋은 기회인 것 같다.
이번에도 커스텀을 진행하면서 해당 라이브러리에 대해서 많이 이해하려고 노력했지만 아직은 쉽지 않았다..
열심히 공부해서 라이브러리 없이 그래프를 만들 수 있을 정도로 성장하고 싶다 !