[React] Chart.js 사용하기

2025-01-09 5 분 소요

Chart.js는 HTML5 캔버스를 기반으로 다양한 차트를 생성할 수 있는 오픈 소스 자바스크립트 라이브러리이다
직관적이고 사용하기 쉬운 API를 제공하여 데이터 시각화를 빠르고 간단하게 구현할 수 있다.
Chart.js 공식문서 ↗️

1. Chart.js 라이브러리 설치

React에서 Chart.js를 사용하려면 react-chartjs-2 패키지도 함께 설치해야 한다.

react-chartjs-2는 Chart.js를 React 컴포넌트 형태로 사용할 수 있도록 도와주는 라이브러리이다.

yarn add react-chartjs-2 chart.js

2. Line Chart 컴포넌트 구현

원하는 차트를 Chart.js 공식 문서의 Chart Types에서 선정하면 된다.

먼저 Chart.js를 사용하여 가장 기본적인 차트인 라인 차트(Line Chart) 를 만들어 보자.

2.1 필요한 요소 불러오기

먼저 Chart.js에서 필요한 요소들을 불러와야한다.

react-chartjs-2에서 차트 컴포넌트를 사용하기 위해서는, chart.js에서 필요한 모듈들을 별도로 import한 뒤, 이를 register로 등록해야 차트를 정상적으로 렌더링할 수 있다.

// Line 차트 가져오기
import { Line } from "react-chartjs-2";

// 필요한 요소 불러오기
import {
  Chart as ChartJS,
  Title,
  Tooltip,
  Legend,
  LineElement,
  CategoryScale,
  LinearScale,
  PointElement,
} from "chart.js";

// Chart.js 설정
ChartJS.register(
  Title,
  Tooltip,
  Legend,
  LineElement,
  CategoryScale,
  LinearScale,
  PointElement
);

2.2 차트 데이터 설정

차트를 그리기 위한 데이터와 옵션을 설정한다.

데이터는 labels (x축에 표시될 값)과 datasets (차트의 데이터를 담고 있는 배열)로 나누어진다.

// 예시 데이터
const labels = ["Red", "Blue", "Yellow"]; // 라벨
const dataValues = [12, 19, 3]; // 데이터 값

// 차트 데이터 객체
export const data = {
  labels: labels,
  datasets: [
    {
      data: dataValues,
      borderColor: "#F1B0BC",
      backgroundColor: ["#F1B0BC", "#97CDBD", "#F5D35D"],
    },
  ],
};

2.3 차트 옵션 설정

options 객체는 차트의 설정을 담고 있다.

툴팁, 레전드, 반응형 디자인 등을 설정할 수 있다.

const options = {
  responsive: true,
  plugins: {
    legend: {
      position: "top" as const,
    },
    tooltip: {
      enabled: true,
    },
  },
};

2.4 차트 컴포넌트 렌더링

리액트에서는 컴포넌트로 차트를 그릴 수 있다.

이제 Line 컴포넌트를 사용하여 위에서 설정한 데이터와 옵션을 기반으로 차트를 렌더링해보자.
Line 외에 Bar, Bubble 등 차트 종류 별로 컴포넌트를 react-chartjs-2에서 import 하여 사용할 수 있다.

const LineChart = () => {
  return <Line data={data} options={options} />;
};

export default LineChart;

2.5 전체 코드

// (1) 필요한 요소 불러오기
// Line 차트 가져오기
import { Line } from "react-chartjs-2";

// 필요한 요소 불러오기
import {
  Chart as ChartJS,
  Title,
  Tooltip,
  Legend,
  LineElement,
  CategoryScale,
  LinearScale,
  PointElement,
} from "chart.js";

// Chart.js 설정
ChartJS.register(
  Title,
  Tooltip,
  Legend,
  LineElement,
  CategoryScale,
  LinearScale,
  PointElement
);

// (2) 차트 데이터 설정
// 예시 데이터
const labels = ["Red", "Blue", "Yellow"]; // 라벨
const dataValues = [12, 19, 3]; // 데이터 값

// 차트 데이터 객체
export const data = {
  labels: labels,
  datasets: [
    {
      label: "Sample Dataset", // 데이터셋 레이블
      data: dataValues,
      borderColor: "#F1B0BC",
      backgroundColor: ["#F1B0BC", "#97CDBD", "#F5D35D"],
      tension: 0.1, // 선의 곡선 정도
    },
  ],
};

// (3) 차트 옵션 설정
const options = {
  responsive: true,
  plugins: {
    legend: {
      position: "top" as const,
    },
    tooltip: {
      enabled: true,
    },
  },
};

// (4) 차트 컴포넌트 렌더링
const LineChart: React.FC = () => {
  return <Line data={data} options={options} />;
};

export default LineChart;

3. Chart.js Options

차트 컴포넌트의 options 속성을 활용하면, dataset 객체에서 설정하는 것 외에도 다양한 방법으로 차트를 커스터마이징할 수 있다.

여기↗️서 다양한 옵션을 확인할 수 있다.

3.1 interaction

interaction 설정은 차트와 사용자의 상호작용 방식을 정의한다. 사용자가 마우스나 터치로 차트에 접근했을 때, 데이터를 어떻게 강조할지 제어할 수 있다.

mode: 상호작용의 모드를 설정 (“index”, “dataset”, “point” 등)
intersect: 데이터 포인트에 정확히 교차해야만 상호작용이 활성화되는지 여부를 설정

interaction: {
  mode: "index" as const, // 마우스 위치와 관련된 모든 데이터셋을 강조
  intersect: false,      // 데이터 포인트를 직접 클릭하지 않아도 동작
},

3.2 scales

scales 옵션은 차트의 축을 커스터마이징하는 데 사용된다. 이를 통해 축의 범위, 스타일, 제목 등을 제어할 수 있다.

type: 축의 유형을 설정 (“linear”, “logarithmic”, “category”, 등)
title: 축 제목을 설정
ticks: 축 눈금을 설정

scales: {
  x: {
    type: "category",  // X축의 유형을 카테고리로 설정
    title: {
      display: true,
      text: "Categories", // X축 제목
    },
  },
  y: {
    type: "linear",     // Y축의 유형을 선형으로 설정
    min: 0,             // 최소값
    max: 100,           // 최대값
    ticks: {
      stepSize: 20,     // 눈금 간격
    },
  },
},

3.3 animation

animation 옵션은 차트가 렌더링될 때의 애니메이션 효과를 정의한다. 이를 통해 차트가 그려질 때의 전환 효과를 제어할 수 있다.

duration: 애니메이션의 지속 시간(밀리초)
easing: 애니메이션의 진행 방식 (“easeOutBounce”, “linear”, 등)

animation: {
  duration: 1000,       // 1초 동안 애니메이션
  easing: "easeOutBounce", // 느리게 시작하고 끝에서 튀는 효과
},

3.4 반응형 디자인

Chart.js는 기본적으로 반응형 디자인을 지원하며, 화면 크기에 따라 자동으로 크기를 조정한다. responsive 옵션을 통해 이를 제어할 수 있다.

responsive: 차트를 반응형으로 설정 (기본값: true)
maintainAspectRatio: 반응형일 때, 원래 비율을 유지할지 설정 (true/false)

responsive: true,
maintainAspectRatio: false, // 원래 비율을 무시하고 부모 컨테이너에 맞춤

4. Chart.js 예시

4.1 BarChart

// components/BarChart.tsx
import React from "react";
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
);

export const options = {
  responsive: true,
  plugins: {
    legend: {
      position: "top" as const,
    },
    title: {
      display: true,
      text: "Sample Bar Chart",
    },
  },
};

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

export const data = {
  labels,
  datasets: [
    {
      label: "Dataset 1",
      data: labels.map(() => Math.floor(Math.random() * 1000)),
      backgroundColor: "rgba(75, 192, 192, 0.2)",
      borderColor: "rgba(75, 192, 192, 1)",
      borderWidth: 1,
    },
  ],
};

const BarChart: React.FC = () => {
  return <Bar options={options} data={data} />;
};

export default BarChart;

4.2 DoughnutChart

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

// Chart.js 모듈 등록
ChartJS.register(ArcElement, Tooltip, Legend);

// 데이터와 설정
export const data = {
  labels: ["Red", "Yellow", "Blue"],
  datasets: [
    {
      data: [10, 20, 30],
      backgroundColor: ["#FF6384", "#FFCE56", "#36A2EB"],
      hoverBackgroundColor: ["#FF6384", "#FFCE56", "#36A2EB"],
    },
  ],
};

export const options = {
  responsive: true,
  plugins: {
    legend: {
      position: "top" as const,
    },
    tooltip: {
      enabled: true,
    },
  },
};

// DoughnutChart 컴포넌트
const DoughnutChart: React.FC = () => {
  return <Doughnut data={data} options={options} />;
};

export default DoughnutChart;

5. Next.js 페이지에서 컴포넌트 사용

Next.js는 기본적으로 서버 사이드 렌더링(SSR)을 지원하지만, Chart.js는 DOM 요소에 의존하므로 SSR 환경에서는 오류가 발생할 수 있다.

이를 해결하려면 Next.js의 dynamic import를 사용하여 SSR을 비활성화해야한다.

import dynamic from "next/dynamic";

// Dynamic import로 SSR 비활성화
const BarChart = dynamic(() => import("../components/BarChart"), {
  ssr: false,
});

const Home: React.FC = () => {
  return (
    <div>
      <h1>Chart.js with Next.js</h1>
      <BarChart />
    </div>
  );
};

export default Home;

6. 데이터 동적 로딩

API에서 데이터를 가져와 차트에 렌더링하려면 React의 useState와 useEffect를 사용하면 된다.

import React, { useState, useEffect } from "react";
import { Bar } from "react-chartjs-2";
import { options } from "./chartConfig";

const BarChart: React.FC = () => {
  const [data, setData] = useState<any>(null);

  useEffect(() => {
    // API 호출 예시
    fetch("/api/chart-data")
      .then((response) => response.json())
      .then((data) => {
        setData({
          labels: data.labels,
          datasets: data.datasets,
        });
      });
  }, []);

  if (!data) return <p>Loading...</p>;

  return <Bar options={options} data={data} />;
};

export default BarChart;

박시은