Chart.js + Reactでグラフを作成してみる

ずお（エンジニア）

2024.08.06

IT技術

React

はじめに

皆さんこんにちは。フロントエンドエンジニアのずおです！
本日は、現在所属しているプロジェクトで、グラフを用いたページを実装する必要が出てきそうなので、実験的にライブラリを使って、グラフを作成してみたいと思います。

トレンドを把握する

とりあえずnpm trendsで、グラフ作成ライブラリのトレンドを探ってみます。

↑を見ると、Chart.jsというライブラリが人気のようなので、こちらを使っていきたいと思います。

Chart.jsのドキュメントはこちら

インストール

今回はReactを使ってグラフを作成したいと考えています。
いろいろ調べていると、react-chartjs-2というWrapper Libraryを一緒にインストールしてあげると、より簡単にグラフを作成できそうです。

react-chartjs-2のドキュメントはこちら

では実際に、インストールします。

1npm i react-chartjs-2 chart.js

インストールが終わったら実際に使っていきます。

グラフを作成

Chart.jsでは、円グラフや棒グラフ、折れ線グラフなどの定番のものから、極座標グラフや散布図などのチャートタイプも提供しているようです。

今回は、棒グラフと、レーダーチャートを作成してみたいと思います。

作成する流れは下記の通りです。

React Componentで必要となるモジュールをインポートする
ライブラリが提供しているチャートのオプションを定義する
グラフに描画するデータを取得する（今回はモックデータを使用したので、APIからデータを取得するロジックなどは組んでおりません）
チャートコンポーネントを作成する
ページに反映する

棒グラフ

作成するにあたり、以下の3点を要件として定めました。

棒グラフの上に数値を表示させる
縦、横表示を可変にできるようにする
縦（横）表示の時は、y軸(x軸)を非表示にする

実際のコードは下記です。

1import { Bar } from 'react-chartjs-2'
2import ChartDataLabels from 'chartjs-plugin-datalabels'
3import 'chart.js/auto' // 今回はバンドルサイズ気にしないので、autoを使う
4
5export const BarChart = ({ data, isHorizontal }) => {
6  const options = {
7    indexAxis: isHorizontal ? 'y' : 'x', // 棒グラフの向きを設定
8    plugins: {
9      datalabels: {
10        align: 'end',
11        anchor: 'end',
12        color: 'orange',
13        font: {
14          size: 16,
15          weight: 'bold',
16        },
17      },
18    },
19    scales: {
20      y: {
21        display: isHorizontal,
22        ticks: {
23          font: {
24            size: 16,
25            weight: 'bold',
26          },
27        },
28      },
29      x: {
30        display: !isHorizontal,
31        ticks: {
32          font: {
33            size: 16,
34            weight: 'bold',
35          },
36        },
37      },
38    },
39  }
40
41  return (
42      <Bar data={data} options={options} plugins={[ChartDataLabels]} />
43  )
44}

optionsの説明を簡単にしておくと、
1. indexAxis：グラフの方向（縦棒か横棒か）を設定
2. plugins: Chart.jsプラグインの設定
グラフの上に数値を表示させる要件を満たすためには、別途chartjs-plugin-datalabelsというライブラリを入れる必要がありましたので、こちらの設定を追加しました。
ドキュメントはこちらです。
3. scales:グラフ軸の設定(x,y軸の表示、非表示の設定や、フォントサイズなどを設定)

という感じです。結構簡単で、直感で理解しやすいものばかりだと思います。

実際にできたグラフがこちらです。　私の出身地である愛媛県と、生まれ故郷の愛媛県大洲市の人口密度をグラフ化してみました（とても田舎ですが、、とても良いところです）

レーダーチャート

次にレーダーチャートです。こちらはシンプルに実装しました。

1import { Radar } from 'react-chartjs-2'
2import 'chart.js/auto' // 今回はバンドルサイズ気にしないので、autoを使う
3
4export const RadarChart = ({ data }) => {
5  const options = {
6    plugins: {
7      legend: {
8        position: 'bottom',
9      },
10    },
11    scales: {
12      r: {
13        suggestedMin: 0,
14        suggestedMax: 5,
15      },
16    },
17  }
18
19  return <Radar data={data} options={options} />
20}