Recharts

chart를 그려주는 라이브러리

• 기존에 차트 그릴일이 있으면 chart.js를 이용해왔다.
• 리액트에서 사용하기 위해 react-chartjs-2를 사용했으나 뭔가 사용성도 문서도 마음에 들지않아 새로운 라이브러리를 찾다가 recharts를 발견했다.
  • 나름 예시도 있고, 재사용하기위해 커스텀으로 컴포넌트 만들어 사용하기 쉬웠던 것 같아 앞으로 자주 사용해보려고 한다.

설치

yarn add recharts

사용

• 라인차트

// 반응형 차트 (부모의 넓이와 높이가 지정되어 있어야한다.)
<ResponsiveContainer className={className} width={width} height={height}>
      <LineChart
        data={newData}
        margin={{
          top: 0,
          right: 30,
          left: 0,
          bottom: 20,
        }}
      >
        <CartesianGrid strokeDasharray="3 3" />
        <XAxis dataKey="time" tickFormatter={formatXAxis} fontSize={12} /> // x축은 시간

        {itemList.map((item) => {
          const { dataKey, yAxisId, color, label, name, position } = item

          return (
            <React.Fragment key={dataKey}>
              <YAxis
                yAxisId={yAxisId} // 키값
                fontSize={12} // 폰트 사이즈
                orientation={position} // 축의 방향 (left, right)
                label={
                  <Label 
                    value={label} // 축의 text
                    angle={-90} // text를 돌리는 것 (세로)
                    fontSize={12} 
                    position="insideRight" // 오른쪽 배치
                    dx={position === 'right' ? -9 : -46} // 오른쪽일 때는 왼쪽으로 이동, 왼쪽일 때는 오른쪽으로 이동
                  />
                }
              />
              <Line
                yAxisId={yAxisId}
                type="monotone"
                dataKey={dataKey}
                name={name}
                stroke={color}
                dot={(props) => { // 점은 특정 값이 true일 때만 찍고 아니면 선으로
                  const { cx, cy, stroke } = props
                  return props.payload.event ? (
                    <svg key={props.payload.time}>
                      <circle cx={cx} cy={cy} r={4} fill={stroke} />
                    </svg>
                  ) : (
                    false
                  )
                }}
                isAnimationActive={false}
              />
            </React.Fragment>
          )
        })}

        <Tooltip />
        <Legend
          align="center"
          verticalAlign="top"
          layout="horizontal"
          wrapperStyle={{ marginBottom: '10px' }}
        />
      </LineChart>
    </ResponsiveContainer>

공식문서