Chart.js + Reactでグラフを作成してみる
IT技術
はじめに
皆さんこんにちは。フロントエンドエンジニアのずおです!
本日は、現在所属しているプロジェクトで、グラフを用いたページを実装する必要が出てきそうなので、実験的にライブラリを使って、グラフを作成してみたいと思います。
トレンドを把握する
とりあえず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}
optionsの説明は下記です。
1. plugins.legend.position:凡例の位置を設定(今回は下部に設定)
2. scales: スケールの設定(今回は最小値と最大値を設定)
実際にできたグラフがこちらです。
終わりに
いかがだったでしょうか。
とても簡単にグラフを作成することができました。
ただ、シンプルなグラフ実装なら問題なく活用できそうですが、実際に開発で使用する際には、いろいろと要件に合致するかを調べるのに時間がかかりそうな印象でした。
皆さんもぜひ試してみてください!
ライトコードでは、エンジニアを積極採用中!
ライトコードでは、エンジニアを積極採用しています!社長と一杯しながらお話しする機会もご用意しております。そのほかカジュアル面談等もございますので、くわしくは採用情報をご確認ください。
採用情報へ
愛媛県の田舎町で生まれ育ちましたずおと申します。 趣味はサウナと居酒屋巡りです。 未経験で入社させていただいたので、いち早く戦力になれるように日々頑張ります! 座右の銘は「悩んでるひまに、一つでもやりなよ」 ドラえもんの名言です。よろしくお願いします。