다른 차트 형태들은 예시가 많이 올라와있어서 비교적 예시가 적은 믹스형 차트에 대해 알아보고, 클릭 이벤트 등등을 적용해보고자 한다.options와 그 외 기본적인 세팅들은 앞선 포스팅들을 참고해 주면 좋다! 먼저 예시 데이터를 어떤걸로 할지 고민하다가 npm trends 사이트의 차트를 응용해 보기로 하였다!react vs vue - npm trends 링크 참고  npm trends 를 참고하여, react / vue에 대한 line 차트와 두 가지의 합계를 나타내는 총합계에 대한 bar 차트를 혼합하여 표현하고자 한다. 🍄 Mix 형 더미 데이터 넣기기본적인 데이터 구조는 다음과 같이 잡았다.import { Chart } from "react-chartjs-2";import { ArcElemen..

이번에는 ChartJS의 options를 활용하여 차트를 이쁘게 꾸며보겠다.먼저 options 에 대한 설명을 주석으로 달아보겠다.👩🏼‍🏫 기본 옵션const options = { // 기본 설정 spanGaps: true, // 데이터가 중간중간 없을 때 이어 그릴지의 여부 grouped: true, // x축 값이 같은 것끼리 묶일지의 여부 (주로 Line Chart에서) responsive: true, // canvas의 반응형 여부 maintainAspectRatio: false, // 캔버스의 가로세로 비율 유지 여부 // 차트 크기 설정 aspectRatio: 2, // maintainAspectRatio가 true일 때 사용되는 비율 // 애니..

기본적인 세팅이 궁금하다면, 앞선 포스팅을 확인하시기 바란다.🌟 1) 들어가기 일단 현재 잡혀있는 options의 내용은 다음과 같으며, 주석으로 각각 옵션에 대한 설명을 작성해 보겠다. const options = { responsive: true, // canvas 반응형 여부 plugins: { legend: { position: "top" as const, // legend 의 위치 }, title: { display: true, // title 보일건지 말건지 text: "Chart.js / react-chartjs-2 시작하기", }, },}; options안에 responsive를 true 하면, canvas 가 동적으로 반응한다. 반..

리액트 타입스크립트 환경에서 ChartJS, react-chartjs-2 를 활용하여, 다양한 차트 형태와 차트 안에서의 클릭이벤트 등등에 대하여 소개해보겠다.검색하면 여러가지 방법이 나오겠지만, 개인적으로 자주 사용하는 방식의 차트 형태를 소개해보고자 한다.우선 참고했던 공식 문서 사이트들을 공유해주겠다!react-chartjs-2 공식문서 바로가기ChartJS 공식문서 바로가기📌  1) 설치하기먼저 기본적인 설치 명령어는 다음과 같다.yarn add chart.js react-chartjs-2혹은npm install --save chart.js react-chartjs-2 📌  2) 기본적인 차트들에 대한 코드 참고사실 가장 기본적인 형태의 차트는 아래 링크를 통해서도 간단하고 명확하게 확인 할 ..