top

Next.js (React) と Chart.js でグラフを表示する方法

技術

はじめに

Next.js (React) で Chart.js を使ってグラフを表示するとき、React 用にラップしたパッケージを使用する方法が一般的だと思います。

ただ、このようなラップ用のパッケージはメンテナンスが持続しない可能性がああるため、元の Chart.js をそのまま利用する方法を、備忘録として記しておこうと思います。

本題

まずは Chart.js をインストールします。

> npm install chart.js

Chart.js は CDN 経由でインポートすることもできますが、本記事はパッケージを事前にインストールする方式を前提に解説しています。

実装

以下のコードが具体的な実装例です。

CSS フレームワークとして Tailwind CSS を使用しています。

useEffect を 2 回使用しているところがポイントです。

'use client';

import { Chart, registerables } from 'chart.js';
import { useEffect, useState } from 'react';

Chart.register(...registerables);

export default function Page() {
    const [mounted, setMounted] = useState(false);

    useEffect(() => {
        setMounted(true);
    }, []);

    useEffect(() => {
        const canvas = document.getElementById('chart') as HTMLCanvasElement;
        if (canvas) {
            const chart = new Chart(canvas, {
                type: 'bar',
                data: {
                    labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
                    datasets: [
                        {
                            label: 'Title',
                            data: [12, 19, 3, 5, 2, 3],
                            borderWidth: 1
                        }
                    ]
                },
                options: {
                    scales: {
                        y: {
                            beginAtZero: true
                        }
                    }
                }
            });

            return () => chart.destroy();
        }
    }, [mounted]);

    if (!mounted) {
        return <></>;
    }

    return (
        <main className="flex w-full justify-center">
            <canvas id="chart" />
        </main>
    );
}

Image

無事にフロートチャート図がレンダリングされれば成功です。

お疲れ様でした😊

参考

Chart.js
Simple yet flexible JavaScript charting library for the modern web
Favicon
https://www.chartjs.org/
OgImage