Victoryjs

[TIL] 22.05.23 프리온보딩 Day 15 - Victory.js 사용하기

Victory.js 사용하기 victory js를 사용해보았다. 워낙 문서가 잘 되어있어서 기본적인 차트 그리기에는 어려움이 없었지만 과제의 요구사항에 따라서 추가적으로 구현하려니 어려움을 겪었다. 여러 번의 삽질을 통해 일단 기본적인 레이아웃까지는 완성했다. 과제의 요구사항에서 첫 번째 그래프의 y축은 왼쪽에, 두 번째 그래프의 y축은 오른쪽에 표시하라고 되어 있었다. 둘의 단위가 비슷하다면 쉽게 구현했겠지만 하나는 백 단위고, 하나는 십 단위라서 한 그래프에 비슷하게 보여주는 것이 어려웠다. 😥 바로 코드 고고 일단 샘플로 사용할 데이터는 아래와 같다. Chart.tsx const data = [ { click: 559, conv: 37, date: '2022-02-01', }, { click: 69..