Use React Hooks and Chart.js without react-chartjs-2

gaji-staff

2021.8.31

実践と知見

はじめに

こんにちは。kimizuy です。

今回は Chart.js を　React Hooks（とついでに TypeScript）を使ってレンダリングする方法をご紹介します。

これまでの経験上、JavaScript でチャートライブラリを使う際、 Chart.js はかなり最初のほうで検討候補に上がることが多いです。

それと React を組み合わせる場合は、検索上位であることやサンプル数の多さから基本的に react-chartjs-2 というラッパーライブラリを使うことを考えます。

ただ、react-chartjs-2 は最近（2021/8/31 時点で）レポジトリ上の動きがあまりないようで、イシューへの対応も鈍い印象があります。

そこで本記事では react-chartjs-2 に依存せず、シンプルに React Hooks のみで Chart.js を利用していきます。

tldr

早速、コード例をご紹介します。

CodeSandbox も用意しました。実際に触って挙動を確かめてみてください。

import {
  Chart,
  ChartConfiguration,
  BarElement,
  LinearScale,
  BarController,
  CategoryScale,
  Tooltip
} from "chart.js";
import { useEffect, useRef } from "react";
import "./styles.css";

const config: ChartConfiguration = {
  type: "bar",
  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
      }
    ]
  },
  options: {
    scales: {
      y: {
        beginAtZero: true
      }
    }
  }
};

const Bar = () => {
  const canvasRef = useRef<HTMLCanvasElement>(null);
  useEffect(() => {
    const element = canvasRef.current;
    if (!element) return;
    // https://www.chartjs.org/docs/next/getting-started/integration.html#bundlers-webpack-rollup-etc
    Chart.register(
      BarElement,
      BarController,
      LinearScale,
      CategoryScale,
      Tooltip
    );
    const chart = new Chart(element, config);
    return () => chart.destroy();
  });

  return <canvas ref={canvasRef} />;
};

export default function App() {
  return (
    <div className="App">
      <Bar />
    </div>
  );
}