React (TypeScript) に react-chartjs-2 を導入し、グラフを作る方法

2021/06/15

はじめに

どーも、入田 / ぐるたか @guru_taka です！React (TypeScript) にreact-chartjs-2 を導入し、グラフを作成する方法を紹介します。

▼ 成果物

react-chartjs-2 とは？

react-chartjs-2 とは、グラフ化で有名なライブラリ Chart.js を React 用のラッピングしたパッケージです。react-chartjs-2 は 2021/6/14 時点で、スター数は約 4,100 となっており、React でグラフを表現したい時に役立ちます。

バージョン情報

react：17.0.2
react-dom：17.0.1
typescript：4.3.2
chart.js：3.3.2
react-chartjs-2：3.0.3

react-chartjs-2 の導入方法

react-chartjs-2 を使用するには、chart.js と react-chartjs-2 をインストールする必要があります。コマンドは以下の通りです。

# npm の場合
npm install -D chart.js react-chartjs-2

# yarn の場合
yarn add -D chart.js react-chartjs-2

react-chartjs-2 の基本的な使い方

実際にコードをみながら、react-chartjs-2 について紹介します。

まず、棒グラフを表示するコードは以下の通りです。棒グラフのデータに関しては、Chart.js の公式ドキュメントを参考にしています。
参考：Bar Chart | Chart.js

// 棒グラフ用のコンポーネントをインポート
import { Bar } from 'react-chartjs-2';

const data = {
  // x 軸のラベル
  labels: ['1 月', '2 月', '3 月', '4 月', '5 月', '6 月', '7 月'],
  datasets: [
    {
      label: 'Dataset',
      // データの値
      data: [65, 59, 80, 81, 56, 55, 40],
      // グラフの背景色
      backgroundColor: [
        'rgba(255, 99, 132, 0.2)',
        'rgba(255, 159, 64, 0.2)',
        'rgba(255, 205, 86, 0.2)',
        'rgba(75, 192, 192, 0.2)',
        'rgba(54, 162, 235, 0.2)',
        'rgba(153, 102, 255, 0.2)',
        'rgba(201, 203, 207, 0.2)',
      ],
      // グラフの枠線の色
      borderColor: [
        'rgb(255, 99, 132)',
        'rgb(255, 159, 64)',
        'rgb(255, 205, 86)',
        'rgb(75, 192, 192)',
        'rgb(54, 162, 235)',
        'rgb(153, 102, 255)',
        'rgb(201, 203, 207)',
      ],
      // グラフの枠線の太さ
      borderWidth: 1,
    },
  ],
};

// レンダリング
export default function Index(): JSX.Element {
  return <Bar data={data} />;
}

下図のようなグラフが表示されるはずです。

今回は棒グラフでしたが、他にも以下のようなグラフが表現できます。他にも線グラフ (Line) や円グラフ (Pie) など、様々なグラフが用意されています。

// 円グラフ用のコンポーネントをインポート
import { Pie } from 'react-chartjs-2';

...

// レンダリング
export default function Index(): JSX.Element {
  return <Pie data={data} />;
}

▼ 円グラフの描画

// src/pages/index.ts
// 線グラフ用のコンポーネントをインポート
import { Line } from 'react-chartjs-2';

...

// レンダリング
export default function Index(): JSX.Element {
  return <Line data={data} />;
}

▼ 線グラフの描画

react-chartjs-2 のグラフ例が公式ドキュメントでソースコードとセットで公開されていますので、ぜひチェックしてみてください！
参考：React Chart.js Component Examples

また、Chart.js の data における各プロパティ（ex：backgroundColor）の詳細は、Chart.js の公式ドキュメントをご覧ください。参考：Bar Chart | Chart.js

Props の type におけるエラー

バージョンによっては、Props で type にデータを渡すよう、以下のエラーが出力されるかもしれません。
参考：Bad type definitions · Issue #687 · reactchartjs/react-chartjs-2

プロパティ 'type' は型 '{ data: { labels: string[]; datasets: { label: string; data: number[]; backgroundColor: string[]; borderColor: string[]; borderWidth: number; }[]; }; }' にありませんが、型 'Props' では必須です。

Props で type にデータを渡さなくても問題なく動きますが、エラーを消したい場合は、type に bar を渡しましょう。

公式の README.md では、type が必要なのは ChartComponent と記述されています。そのため、バグの可能性が高いです。 reactchartjs/react-chartjs-2: React wrapper for Chart.js 2.0 and 3.0, the most popular charting library 📊

グラフのサイズを変更する方法

現在、グラフが画面いっぱいに表示され、少々見にくいグラフとなっています。サイズを変更する場合は以下のようにコードを追記しましょう。

// src/pages/index.ts
// 棒グラフ用のコンポーネントをインポート
import { Bar } from 'react-chartjs-2';

...

const options = {
  // アスペクト比
  maintainAspectRatio: false,
};


// レンダリング
export default function Index(): JSX.Element {
  return <Bar data={data} width={1000} height={300} options={options} />;
}

Props の width と height に、それぞれデータを渡しましょう。また、オプションとして、maintainAspectRatio を flase に設定します。Chart.js におけるオプションの詳細は、公式ドキュメントを参考にしてみてください。
参考：Options | Chart.js

公式ドキュメントでは、上記のコードで縦横の長さを指定できると述べられていますが、下 GIF のように高さしか固定できていません。

オプションで responsive を false にすることで横幅も固定できますが、レスポンシブ対応がなくなります。そのため max-width: min-content のスタイルが効いた親要素でグラフをラッピングして対応します。

コードは以下の通りです。

// mx-auto -> margin: 0 auto;
// bg-black -> background-color: black;検証をわかりやすくするため、背景色を黒に変更
// max-w-min -> max-width: min-content;
<div className="mx-auto bg-black max-w-min">
  <Bar type="bar" data={data} height={400} width={500} options={options} />
</div>