이번에는 차트에 click event를 넣어, 클릭하는 index 총합의 데이터를 하단 영역에 보이도록 만들어 볼 것이다.이전 포스팅에 이어 믹스형 차트에서 진행할 것이기에, 처음부터 보고싶은 사람들은 이전 포스팅을 참고하시길 바란다 🙂먼저, ChartJS 에서 안내하는 이벤트 사용법은 다음과 같다. event 참고 문서 - ChartJS Interactions | Chart.jsInteractions Namespace: options.interaction, the global interaction configuration is at Chart.defaults.interaction. To configure which events trigger chart interactions, see events. N..

다른 차트 형태들은 예시가 많이 올라와있어서 비교적 예시가 적은 믹스형 차트에 대해 알아보고, 클릭 이벤트 등등을 적용해보고자 한다.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) 기본적인 차트들에 대한 코드 참고사실 가장 기본적인 형태의 차트는 아래 링크를 통해서도 간단하고 명확하게 확인 할 ..