[스터디기록05/티코드(React)] Chart.js 라이브러리의 리액트 ver. - react-chartjs-2 라이브러리

💬 오늘은 언젠가 한 번쯤은 사용할 차트 라이브러리에 대해 실습했다. 사용법만 제대로 익혀두면 사용하기 좋은 라이브러리라는 생각이 들었다. 실습하면서 차트의 항목 이름을 보여주고 싶어 삽질을 좀 했는데, 이 과정에 대한 기록을 남겨본다.

 

📑 Chart.js 라이브러리란?

데이터를 시각화할 때 차트를 사용할 일이 많은데, 차트 라이브러리를 사용하여 이를 쉽게 구현할 수 있다. 오늘 우리는 많은 차트 라이브러리 중에서도 유명한 Chart.js의 리액트 버전인 react-chartjs-2 라이브러리를 사용해보고자 하였다.

 

https://react-chartjs-2.js.org/

react-chartjs-2 | react-chartjs-2

 

📑 라이브러리 사용 방법

1) 라이브러리 설치

npm install --save chart.js react-chartjs-2

 

2) 기본 사용 방법

import { Chart as ChartJS, ArcElement, Tooltip, Legend } from "chart.js";
import { Doughnut } from "react-chartjs-2";

ChartJS.register(ArcElement, Tooltip, Legend);

<Doughnut data={...} />

• Chart.js 라이브러리에서 기본 Chart 객체를 가져온다. (ChartJS라고 이름을 바꿔주었다.)
  • 그 외에도 활용하고자 하는 모듈을 함께 가져올 수 있다.
• 차트의 종류도 여러 가지가 있는데, 원하는 차트 종류의 컴포넌트를 react-chartjs-2 라이브러리에서 가져와 사용할 수 있다. 사용에 대한 예제는 공식문서에 코드 샌드 박스를 통해 친절히 예제까지 내장되어 있으니 확인하면 쉽게 적용이 가능하다. (링크)

📑 적용 예제

사용법은 생각보다 간단하다.

옵션으로 사용할 모듈과 원하는 형태의 컴포넌트를 받아와서 각 속성에 데이터를 할당해 주면 된다.

차트에 사용될 각 항목의 라벨명을 배열로 만들어 labels 변수에 할당해 주고, Doughnut 컴포넌트에 prop으로 전달해 줄 data 객체를 지정해 주자. (해당 예제에서는 chart 라이브러리를 적용한 컴포넌트 부분 코드만 첨부합니다.)

import { Chart as ChartJS, ArcElement, Tooltip } from "chart.js";
import { Doughnut } from "react-chartjs-2";

ChartJS.register(ArcElement, Tooltip);

// 차트에 사용될 각 항목 라벨명
const labels = ["짜장면", "치킨", "곱창", "피자", "족발", "한강라면"];

export const data = {
  labels,
  datasets: [
    {
      // 툴팁에 표시 될 라벨
      label: "지금 가장 먹고 싶은 음식",
      // 각 항목에 대한 데이터
      data: [10, 80, 30, 20, 70, 60],
      // 각 항목별 컬러
      backgroundColor: [
        "rgba(255, 99, 132, 0.2)",
        "rgba(54, 162, 235, 0.2)",
        "rgba(255, 206, 86, 0.2)",
        "rgba(75, 192, 192, 0.2)",
        "rgba(153, 102, 255, 0.2)",
        "rgba(255, 159, 64, 0.2)",
      ],
      // 테두리 컬러
      borderColor: ["gray", "darkgray"],
      borderWidth: 0.5,
    },
  ],
};

// 컴포넌트를 정의하고, react-chartjs-2 차트에서 가져온 Doughnut 컴포넌트에 data 전달
export const DoughnutChart = () => {
  return <Doughnut data={data} />;
};

 

이렇게 지정을 해주면 아래와 같은 형태의 차트가 그려진다.

 

👀 각 데이터 항목의 라벨 보여주기

여기서 나는 원형 차트의 각 항목에 대한 이름을 보여주고 싶었다. 열심히 공식 문서와 구글링, 챗 gpt를 사용하여 찾아본 결과 react-chartjs-2 자체에서는 해당 기능을 제공하지 않고, 플러그인으로 따로 라벨 기능을 제공해 준다는 사실을 확인했다. chartjs-plugin-datalabels라는 플러그인인데 공식문서가 잘 되어 있어서 필요한 경우 예제를 참고해 보며 적용해 보는 것을 추천한다.

https://chartjs-plugin-datalabels.netlify.app/

chartjs-plugin-datalabels

 

1) chartjs-plugin-datalabels 라이브러리 설치

npm install chartjs-plugin-datalabels --save

 

2) 초기 세팅 및 options 추가해주기

import ChartDataLabels from "chartjs-plugin-datalabels";

ChartJS.register(ArcElement, Tooltip, ChartDataLabels);

export const options = {
  plugins: [ChartDataLabels],
};

// ...
export const DoughnutChart = () => {
  return <Doughnut options={options} data={data} />;
};

• 패키지를 설정하면 차트를 사용하고 있는 모든 페이지에 기본값으로 value값을 보여주는 것 같았다. 설정하지 않은 다른 차트에도 모두 라벨이 적용되었기 때문인데, 이 설정은 추후 display의 값을 false로 설정해 주면 원하는 대로 조정이 가능하다.

3) 항목명 + 비율 표시하기

2번을 완료했다면, 이제 기존 data 객체에 datalabels 속성을 추가해 준다. 각 항목에 대한 데이터는 formatter 함수를 통해 현재 data에 할당된 value값과 해당 data와 연결된 labels의 값을 받아올 수 있는 context 정보를 매개변수로 받아올 수 있다. 차트에 표시해주고자 하는 항목명은 labels에 담겨 있으므로 context의 dataIndex로 data의 배열 인덱스를 받아와서 해당 인덱스를 labels 배열의 인덱스로 넣어주면 원하는 데이터를 텍스트로 받아올 수 있다.

• e.g. index 0 : "짜장면", index 1 : "치킨"...

// 상단 코드 생략
export const data = {
  labels,
  datasets: [
    {
      // ...
      // 각 항목에 대한 데이터
      data: [10, 80, 30, 20, 70, 60],
      datalabels: {
        display: true, // datalabels 표시 유무
        align: "center", // labels 위치
        font: { size: 14 },
        // value는 default(%값)
        formatter: function (value, context) {
          let idx = context.dataIndex;
          return `${context.chart.data.labels[idx]}\n ${value}%`;
        },
      },
    },
  ],
};

🙌 최종 완성 화면

 

 

📚 배운 점

새로운 걸 처음 접할 때는 뭐든 익숙하지 않아서 힘든 것 같다. 그래도 계속 보다 보면 조금은 눈에 익는 게 신기하다.

오늘은 얻고자 하는 결과가 있다 보니 공식문서와 구글링을 계속하면서 실습 코드 외의 코드들을 확인하면서 사용해 봤다는 점에 즐거움을 느낀 하루였다. 그리고 공식문서에 진짜 답이 있다. 영어를 두려워하지 말자.

---

참고

[공식문서] chartjs-plugin-datalabels - Custom Labels(링크)

 

💬 본 포스팅은 공부 기록용으로 정확하지 않은 정보가 존재할 수 있습니다. 발견하신다면 알려주세요!