この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
Reactでグラフライブラリ使って、グラフを表示してみました。
react-chartjs-2とは
「react-chartjs-2」は「chart.js」というjavaScriptのグラフ描画ライブラリを、Reactでも利用できるようにしたラッパーライブラリです。「react-chartjs-2」の元となっている「chart.js」は、javascriptを使ってwebサイトにグラフを表示する際に広く使われているライブラリです。「chart.js」をそのまま利用して、React上でグラフを扱うことは難しいのですが、「react-chartjs-2」を使うことでReact上でも簡単にグラフを表示することができます。
「react-chartjs-2」はCanvasを使用して、折れ線グラフや棒グラフ、ドーナツチャートなど様々なグラフを描画することができ、グラフの描画時にアニメーションを行うこともできます。
「react-chartjs-2」のドキュメント
https://react-chartjs-2.netlify.app/
「chart.js」のドキュメント
https://www.chartjs.org/docs/latest/
インストール方法
react-chartjs-2はラッパーライブラリのため、利用する際にはchart.jsも一緒にインストールする必要があります。
npm install -D chart.js react-chartjs-2
描画できるグラフの種類
chart.jsのドキュメントを見ると、グラフの種類として以下のようなものが書かれています。
- Line Chart
- Bar Chart
- Radar Chart
- Doughnut and Pie Charts
- Polar Area Chart
- Scatter Chart
- Area Chart
- Mixed Chart Types
実際にTypeScriptでreact-chartjs-2を使って、React上でも全ての種類のグラフを描画できるのか試してみました。
グラフの描画を試す際には、chart.jsのドキュメントにあるサンプルコードが役立ちました。TypeScriptでreact-chartjs-2を利用しているのもあり、そのままコピペで動くわけではありませんが、サンプルデータなど部分的にはコピペで利用できます。
ドキュメント以外のサイトを参考にする場合でも、「react-chartjs-2」について検索しようとすると「chart.js」の情報が多く出てきます。「chart.js」のコードだとそのままコピペしてもReact上では使えない場合があるので注意が必要です。
実際にグラフを表示してみた
以下のコードはreact-chartjs-2を利用して折れ線グラフを表示するコードです。ラベルと、グラフデータ、オプションを定義して、Line要素に渡すだけなので簡単です。
import React from "react";
import { Line } from "react-chartjs-2";
function App() {
const labels = ["1 月", "2 月", "3 月", "4 月", "5 月", "6 月"];
const graphData = {
labels: labels,
datasets: [
{
label: "A社",
data: [65, 59, 60, 81, 56, 55],
borderColor: "rgb(75, 192, 192)",
},
{
label: "B社",
data: [60, 55, 57, 61, 75, 50],
borderColor: "rgb(75, 100, 192)",
},
],
};
const options: {} = {
maintainAspectRatio: false,
};
const divStyle: React.CSSProperties = {
marginLeft: "auto",
marginRight: "auto",
margin: "10px",
width: "500px",
};
return (
<div className="App" style={divStyle}>
<Line
height={300}
width={300}
data={graphData}
options={options}
id="chart-key"
/>
</div>
);
}
export default App;
オプションの指定
オブションを指定することでグラフを細かくカスタマイズすることができます。自分が実際に使ってみたオプションをいくつか紹介します。
legend
legendでは、グラフの凡例の設定を行うことができます。legendのドキュメントを確認すると、Namespace: options.plugins.tooltipと書いてあります。そのため、legendは親キーにpluginsを指定する必要があります。凡例のオプションを指定する場合は、上記に貼った折れ線グラフのコードの22~24行目を、以下のコードに置き換えます。
const options: {} = {
maintainAspectRatio: false,
plugins: {
legend: {
position:"bottom",
labels: {
padding: 10,
font: {
size: 20,
},
},
},
},
};
tooltip
tooltipはグラフのデータにカーソルを合わせた際に表示される、吹き出しです。背景の色や文字のサイズ、表示する位置などを調整することができます。
const options: {} = {
maintainAspectRatio: false,
plugins: {
tooltip: {
titleFont: { size: 17 },
bodyFont: { size: 17 },
titleMarginBottom: 15,
backgroundColor: "rgba(255,112,162,0.8)",
titleColor: "rgba(0,0,0,1)",
bodyColor: "rgba(0,0,0,1)",
displayColors: true,
xAlign: "center"
},
},
};
複数のオプションを指定する場合は以下のようなコードになります。
const options: {} = {
scales: {
radialLinear: {
max: 100,
min: 0,
pointLabels: {
font: {
size: [25, 20, 20, 20, 20, 20],
weight: "bold",
},
color: [
"rgba(255,0,0,1)",
"rgba(0,0,0,1)",
"rgba(0,0,0,1)",
"rgba(0,0,0,1)",
"rgba(0,0,0,1)",
"rgba(0,0,0,1)",
],
},
},
},
plugins: {
legend: {
position:"bottom",
labels: {
padding: 10,
font: {
size: 20,
},
},
},
},
};
25
