차트 라이브러리 리뷰 (visx, victory, chart.js)

eaasurmind·2022년 8월 8일

Chart.js TIL Victory chart visx 데이터시각화 차트

TIL

목록 보기

27/27

최근에 어쩌다보니 다양한 곳에서 차트를 그릴 일들이 빈번하게 발생해 다양한 차트 라이브러리를 사용하게 되었습니다.

본 글은 이 라이브러리는 내부적으로 구조가 이래서~~ 이게 좋아!

가 아닌 한 명의 평범한 유저 입장에서(소비자에 가까운 느낌으로) 이런 경험들을 했고 어떤 장단점이 있었는지 주관적으로 기록해보고자 합니다.

Victory

가장 먼저 빅토리입니다.

Victory is an opinionated, but fully overridable, ecosystem of composable React components for building interactive data visualizations. The following tutorial explains how to set up a basic chart. For next steps, please see our FAQs and Gallery sections. For more advanced examples, check out our guides.

이용해본 3가지 라이브러리 중에서 가장 리액트 친화적이었습니다. 다른 리액트용 라이브러리를 사용하는 것처럼 "위화감"이 없었습니다.

장점

container 부터 tooltip, legend, axis, line, bar 모든 것들이 컴포넌트의 형태로 제공되었고 이를 자유롭게 조합해서 사용하는 것이 가장 큰 장점이었습니다.
tooltip 박스 커스텀이 가장 간편하고 쉬웠습니다.
문서도 나름 친절한 편이었습니다. (간격 조절이랑 tooltip 커스텀 관련해서 찾을 때 다소 애먹었지만..) 다만 컴포넌트 별로 설명이 되어있다보니 원하는 정보를 얻기 위해서는 여기저기 살펴보는 수고를 겪어야합니다.

단점

아무래도 chart.js보다는 체감이 될 정도로 무거웠습니다.
차트의 종류가 적었습니다.
완벽한 커스텀의 한계.

사용했던 당시 코드:

  <VictoryChart
          theme={VictoryTheme.material}
          domainPadding={{ x: [45, 55] }}
          domain={{ y: [0, 1] }}
          containerComponent={
            <VictoryVoronoiContainer
              voronoiDimension="x"
              labels={({ datum }) => (datum ? `${datum.name}: ${datum.labelq}` : '')}
              labelComponent={
                <VictoryTooltip
                  cornerRadius={5}
                  flyoutWidth={120}
                  flyoutHeight={40}
                  flyoutStyle={{ fill: 'white' }}
                  labelComponent={<VictoryLabel lineHeight={1.4} />}
                />
              }
            />
          }
          {...options}
        >
          <VictoryAxis
            style={axisStyle}
            tickValues={dateList}
            tickFormat={(t) => (diff <= 20 ? `${dayjs(t).format('M월D일')}` : '')}
            offsetY={50}
          />
          <VictoryAxis
            dependentAxis
            tickLabelComponent={<VictoryLabel dx={-30} dy={-10} />}
            orientation="left"
            tickValues={[0, 1 / 6, 2 / 6, 3 / 6, 4 / 6, 5 / 6, 1]}
            tickFormat={(t) => (t === 0 ? '' : getTick(t, mainData, mainIdx))}
            style={dependentAxisStyle}
          />
          {categories[subIdx] && (
            <VictoryAxis
              dependentAxis
              orientation="right"
              tickLabelComponent={<VictoryLabel dy={-10} />}
              tickValues={[0, 1 / 6, 2 / 6, 3 / 6, 4 / 6, 5 / 6, 1]}
              tickFormat={(t) => (t === 0 ? '' : getTick(t, subData, subIdx))}
              style={dependentAxisStyle}
              offsetX={100}
            />
          )}
          <VictoryLine
            name={categories[mainIdx]}
            style={{
              labels: { fontSize: '12px', fill: `${getColor(mainIdx)}` },
              data: { stroke: `${getColor(mainIdx)}` },
              parent: { border: '3px solid #ccc' },
            }}
            data={mainDataRatio}
          />
          {subIdx !== -1 && (
            <VictoryLine
              name={categories[subIdx]}
              style={{
                labels: { fontSize: '12px', fill: `${getColor(subIdx)}` },
                data: { stroke: `${getColor(subIdx)}` },
                parent: { border: '2px solid #ccc' },
              }}
              data={subDataRatio}
            />
          )}
        </VictoryChart>

chart.js

예전에 사용했을 때 굉장히 불친절하고 싫어하는 라이브러리였는데 새롭게 리뉴얼 되면서 귀염뽀짝한 디자인으로 되돌아왔습니다!

장점

기본 디자인이 가장 깔끔하고 대중적이었습니다. 간단한 차트 구현에 적합했고 전문성을 요구하는 서비스보다는 일반 유저들에게 좀 더 보기 쉽게 구성되어있다는 느낌을 받았습니다.
제가 사용해본 라이브러리 중에서는 가장 가벼웠습니다. 그리는 속도도 빠르고 애니메이션도 부드럽게 그려지는 느낌을 받았습니다.
러닝커브가 가장 짧아서 누구나 손 쉽게 사용이 가능합니다.

단점

간단한 차트 외에는 되는게 없는 라이브러리 (복잡한 기능 구현일수록 무쓸모이다.)
타입스크립트를 사용중이시라면 option 부분에서 버벅일 수가 있습니다. 내가 예상한대로 돌아가지 않습니다. 예를들어 chartjs 라이브러리에서 raw가 unknown으로 지정되어있음 (실제 사용은 number type)
3가지 차트 라이브러리 중에서 가장 날 것의 느낌이 강했습니다. (바닐라 냄새가 진한)

visx

마지막으로 visx입니다.
airbnb에서 만든 차트 라이브러리로 명성만 들었지만 필요성을 못 느껴 이용하지 않았으나 특이한 차트 구현을 요구받아 이번 기회에 사용하게 되었습니다.

제가 장점들을 얘기하기 전에 그들이 얘기하는 장점 한 번 듣고 가도록 하겠습니다.

Keep bundle sizes down. visx is split into multiple packages. Start small and use only what you need.

Un-opinionated on purpose. Bring your own state management, animation library, or CSS-in-JS solution. Odds are good your React app already has an opinion on how animation, theming, or styling is done. visx is careful not to add another one and integrates with all of them.

Not a charting library. As you start using visualization primitives, you’ll end up building your own charting library that’s optimized for your use case. You’re in control.

And most importantly — it’s just React. If you know React, you can make visualizations. It’s all the same standard APIs and familiar patterns. visx should feel at home in any React codebase.

거를 타선이 없는 장점들이고 굉장히 공감이 갔던 장점들이었습니다. d3는 여러모로 코드가 길어지고 배워야할 것들도 많고 불편하지만 visx는 d3를 리액트 기반으로 wrapping 함으로서 d3를 리액트에서 쓰는 듯한 편안함을 선사해주었습니다.

하나씩 살펴보면

장점

여러 항목들로 패키지가 나누어져있고 사용자는 필요해 의해서 필요한 부분만 다운받아서 사용하면 됩니다.
3개의 라이브러리들 중 더 이상 차트가 아닌 것 들을 그릴 수 있게 해주는 라이브러리입니다. 그림판 수준으로 커스텀이 가능하기 때문에 꼭 차트가 아니어도 d3로 가능했던 것들이 대부분 가능했습니다.