【Next.js】Chart.jsを導入してグラフを描画する

Chart.jsとは
環境
導入手順

Chart.jsとは

Chart.js | Chart.js

Open source HTML5 Charts for your website

Chart.jsとは、上記の公式ページに載っているようなグラフを簡単に描画することができるライブラリ。

環境

Next.js 13.2.1
Node.js 18.0.0

導入手順

①ライブラリのインストール

react-chartjs-2 | react-chartjs-2

React components for Chart.js

ReactでChart.jsを利用するためには、react-chartjs-2が必要になる。

これを利用することで、Reactコンポーネントのようにチャートを利用できるようになる。

npm install chat.js react-chartjs-2

②コンポーネント作成

以下に記載されている使い方と全く同じようにコンポーネントを作成すれば良い。

Pie Chart | react-chartjs-2

Example of pie chart in react-chartjs-2.

"use client";
import { Chart as ChartJS, ArcElement, Tooltip, Legend } from "chart.js";
import { Pie } from "react-chartjs-2";
import styles from "./chart.module.css";

ChartJS.register(ArcElement, Tooltip, Legend);

export default function ChartPage() {
  const data = {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [
      {
        label: "# of Votes",
        data: [12, 19, 3, 5, 2, 3],
        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: [
          "rgba(255, 99, 132, 1)",
          "rgba(54, 162, 235, 1)",
          "rgba(255, 206, 86, 1)",
          "rgba(75, 192, 192, 1)",
          "rgba(153, 102, 255, 1)",
          "rgba(255, 159, 64, 1)",
        ],
        borderWidth: 1,
      },
    ],
  };

  return (
    <>
      <div className={styles.piechart}>
        <Pie
          data={data}
          options={{ responsive: true, maintainAspectRatio: true }}
        />
      </div>
    </>
  );
}

Next.js13から導入されたappディレクトリを使う場合は"use client"の記述が必要な点に注意。

オプションは以下の通り。

Responsive Charts | Chart.js

Open source HTML5 Charts for your website

responsive：コンテナのサイズに合わせてチャートをリサイズする
maintainAspectRaito：リサイズ時、元のアスペクト比を維持する

③サイズ調整

divタグでPieコンポーネントをラップして、CSSを当ててサイズを調整する。

chart.module.css

.piechart {
  position: relative;
  box-sizing: border-box;
  height: 80vh;
  width: 80vw;
}