react-chartjs-2を利用してチャートを描画する

やりたいこと

• Reactでチャートを描画

npm install

npm install --save chart.js react-chartjs-2

チャートを描画するコンポーネントを作成

import React from 'react';
import { Line } from 'react-chartjs-2';

const LineChart = () => {
  const data = {};

  const option = {};

  return (
    <Line data={data} option={option} />
  );
};

export default LineChart;

とりあえずこれだけでも動きます。

データとオプションを追加

import React from 'react';
import { Line } from 'react-chartjs-2';

const AppLineChart = () => {
  const data = {
    labels: ['赤', '青', '黄色', '緑', '紫', '橙'],
    datasets: [{
      label: '得票数',
      data: [12, 19, 3, 5, 2, 3],
      backgroundColor: [
        'rgba(255, 99, 132, 0.2)',
        'rgba(54, 162, 235, 0.2)',
        'rgba(255, 206, 86, 0.2)',
        'rgba(75, 192, 192, 0.2)',
        'rgba(153, 102, 255, 0.2)',
        'rgba(255, 159, 64, 0.2)',
      ],
      borderColor: [
        'rgba(255,99,132,1)',
        'rgba(54, 162, 235, 1)',
        'rgba(255, 206, 86, 1)',
        'rgba(75, 192, 192, 1)',
        'rgba(153, 102, 255, 1)',
        'rgba(255, 159, 64, 1)',
      ],
      borderWidth: 1,
    }],
  };

  const option = {
    scales: {
     yAxes: [{
        ticks: {
          beginAtZero: true,
        },
      }],
    },
  };

  return (
    <Line data={data} option={option} />
  );
};

export default AppLineChart;

Chart.jsの公式ドキュメントからデータとオプションを引用して、テスト。

めっちゃ簡単に描画できます。

あとは、描画したいチャートの種類に応じたimportをしたり、
必要に応じてdataとoptionを変更するだけ。

参考リンク

github.com

misc.0o0o.org

気になる点

react-chartjs-2のgithubを見ると、

UPDATE to 2.x
As of 2.x we have made chart.js a peer dependency for greater flexibility. Please add chart.js as a dependency on your project to use 2.x. Currently, 2.5.x is the recommended version of chart.js to use.

らしい。
2019年12月27日時点ではバージョンを指定せずにnpm installを行うと、
2.9.3のchart.jsがインストールされるので、一応気にしておいたほうがいいかも。