[ChartJS / react-chartjs-2] 차트 라이브러리 설치, 기본 세팅하기 #1

리액트 타입스크립트 환경에서 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) 기본적인 차트들에 대한 코드 참고

사실 가장 기본적인 형태의 차트는 아래 링크를 통해서도 간단하고 명확하게 확인 할 수 있다.

포스팅을 작성하면서 한번 더 보니, 단순히 특정 차트들을 그릴 때에는 참고하기에 정말 좋을 것 같단 생각이 들었다 😂

react-chartjs-2 example 확인하기

위 링크에서 아무 차트 example을 클릭한 뒤, editor창 옆에 "open editor"를 클릭해보면, 전반적인 코드들을 참고해볼 수 있다.

3) Bar 차트 그려보기

라이브러리를 설치하였으면, 이제 코드를 작성할 차례다!
코드는 다음과 같다.

import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  BarElement,
  Title,
  Tooltip,
  Legend,
} from "chart.js";
import { Bar } from "react-chartjs-2";

ChartJS.register(
  CategoryScale,
  LinearScale,
  BarElement,
  Title,
  Tooltip,
  Legend
);

const options = {
  responsive: true,
  plugins: {
    legend: {
      position: "top" as const,
    },
    title: {
      display: true,
      text: "Chart.js / react-chartjs-2 시작하기",
    },
  },
};

const labels = ["January", "February", "March", "April", "May", "June", "July"];

const data = {
  labels,
  datasets: [
    {
      label: "Dataset 1",
      data: [100, 200, 30, 20, 100, 33, 57],
      backgroundColor: "rgba(255, 99, 132, 0.5)",
    },
    {
      label: "Dataset 2",
      data: [80, 100, 130, 250, 90, 133, 157],
      backgroundColor: "rgba(53, 162, 235, 0.5)",
    },
  ],
};

const ChartJs = () => {
  return <Bar options={options} data={data} />;
};
export default ChartJs;

위와 같이 작성하였으면,
아래 이미지처럼 차트가 그려지는것을 확인할 수 있다.

4) ChartJS / react-chartjs-2 를 사용할 때 가장 중요한 3가지를 잊지말자 🍄

아래 3가지 항목에 대해서만 이해를 해도 ChartJS 나 react-chartjs-2 를 활용하기에 어렵지 않을 것이다!!

⭐️ options : 차트 안에 그려지는 형태나, 범례, 그리드 등등의 전반적인 옵션

⭐️ data : 라벨과 수치 등의 데이터

⭐️ ChartJS 플러그인 활용 : 
  options.plugins에 필요한 ChartJS 의 컴포넌트나 
  그 외 다양한 컴포넌트들을 react-chartjs-2와 함께 쓰기 위한 것들을 꼭! 등록해줘야 함.

   ChartJS.register(
      CategoryScale,
      LinearScale,
      BarElement,
      Title,
      Tooltip,
      Legend
    );

앞으로 주로 다뤄질 내용들도 위 3가지와 연관이 있다.

다음 포스팅 부터는 Bar 차트를 기반으로
다양한 options 에 대해서 소개해보고자 한다!