[React] Toast UI Chart 라이브러리 Interval 설정방법

[React] Toast UI 라이브러리 Chart Interval 설정 방법

 

https://ui.toast.com/

TOAST UI :: Make Your Web Delicious!

Toast UI Chart는 차트를 그려주는 라이브러리로, 그리드 및 차트, 에디터, 캘린더 등의 기능을 제공하며, 자바스크립트 기반의 React, Vue 등의 프론트 프레임워크에서도 사용이 가능한 라이브러리이다.

 

https://www.npmjs.com/package/@toast-ui/react-chart

@toast-ui/react-chart

 

위와 같이 React npm 모듈로도 설치가 가능하다 

npm i @toast-ui/react-chart

 

---

문제 식별

 

해당 라이브러리 버전 : toast-ui/react-chart : 1.0.2v

 

문제 상황은 Toast Ui Chart에서 x축의 라벨이 소수점이 나오는 현상을 해결하기 위해서 Interval 설정이 어디에 어떻게 설정해야 하는지 계속 찾아보았다.

 

하지만 공식문서는 자바스크립트 기반이고, 리액트 라이브러리 버전과 상이하여 사용방법이 제각기 달라 적용하기가 난해하였다.

 

 

---

문제 해결 방법을 찾은 링크

 

https://github.com/nhn/tui.chart/blob/main/docs/v4.0-migration-guide-ko.md#5-%EC%B6%95-%EC%98%B5%EC%85%98

GitHub - nhn/tui.chart: 🍞📊 Beautiful chart for data visualization.

 

계속해서 서치를 진행하던 도중 마이그레이션 버전에 대한 문서를 발견하게 되었고, 이 문서에는 Toast ui 3.x 버전과 4.0대 버전의 변경사항을 자세하게 알려주는 설명이 있었다.

 

---

해결한 방법

Toast ui Chart의 option을 넣어주는 부분 중 xAxis부분에 다음과 같은 내용을 추가한다.

 

xAxis: {
          title: '타이틀',
          //이 옵션을 사용하면 x축 라벨이 회전하지 않음
          rotateLabel : false,
          maxWidth : 200,
          labelInterval : 100,
        
          min : 0,
          max : maxVal,
        
          tickInterval : 'auto',
          labelInterval : 1
       },

 

적용된 화면 이미지

 

 

헤맸던 부분

 

라이브러리 내부 모듈을 찾아보니 tickinterval 에는 타입 스크립트로  string 값을 넣으라고 되어있었지만, 정확히 어떤 string 값이 들어가야 하는지 계속 찾지 못하고, 난해하였다. 

설명도 버전마다 달라서 헷갈렸다.

 

하지만 위 링크에서 3.x 버전은 tickInterval, labelInterval 옵션을 제공하고, tickInterval 에는 ‘auto’만 입력할 수 있다고 쓰여있다.

그리고 labelInterval 옵션은 라벨 간격을 조정할 수 있다고 명시되어있다.

 

깨달은 점

공식 문서 및 github에 명시되어 있는 내용을 잘 봐야 한다. 그곳에 해답이 존재한다.