Reactのグラフライブラリ「react-chartjs-2」を使ってみた。

Reactでグラフライブラリ使って、グラフを表示してみました。

react-chartjs-2とは

「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

実際にグラフを表示してみた

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,
          },
        },
      },
    },
  };