Chart.jsを使おうとして ReferenceError: Chart is not defined が出たときの対処法

起きた問題

グラフを作成するのに便利なchart.jsを使おうとしたが上手くブラウザに表示されずに、Developer Modeを開くと “ReferenceError: Chart is not defined” というエラーが出たときの対処法を記します。

結論としては、htmlファイル内でmain.jsより上にchart.jsを読み込めば解決しました。

<script type="module" src="./node_modules/chart.js/dist/chart.js"></script>

※srcはchart.jsが保存されているディレクトリを指定

工程

前提として、WSL (Windows Subsystem for Linax）を入れてコマンドラインを使用します。

まずはviteをインストールし、ローカル開発サーバーを立ち上げ

npm create vite@latest

cd vite-project

npm install

npm run dev

※ cd vite-project は、npm create vite@latest の実行後にProject nameを変更せずデフォルトのままにした場合に入力

ここまで実行すると、ローカル開発サーバーが立ち上がります。

次に、WSL内に Chart-js-test/vite-project というディレクトリを作成し、ここでWEB開発を行う場合、まずはこのディレクトリへ移動

cd Chart-js-test/vite-project

chart.jsをインストール

npm install chart.js

最後に、htmlとmain.jsを記述します

htmlファイルでは、canvas エレメントを書きます。

今回は、

<canvas id="chart"></canvas>

としました。

main.jsでは、

import "chart.js";

を行ったうえで、サンプルのグラフとして下記のコードを書きました。

const context = document.querySelector("#chart").getContext("2d");

let chartInstance = new Chart(context, {
  type: "bar",
  data: {
    labels: ["Label 1", "Label 2"],
    datasets: [
      {
        data: [10, 15],
      },
    ],
  },
});

ここで、ReferenceError: Chart is not defined が出ます。

解決策

この状態ではhtmlファイルでchart.jsが読み込まれていないので、htmlファイル内でmain.jsの読み込みを行っている部分の前に、chart.jsの読み込みを行います。

<script type="module" src="./node_modules/chart.js/dist/chart.js"></script>

※srcはchart.jsが保存されているディレクトリを指定

これでグラフがきちんと表示されるようになりました。