Chart.jsをReact × TypeScriptの環境に導入する方法

React × TypeScriptで作成した環境にChart.jsを導入することになったので、導入方法をメモとして残しておきます。

Chart.jsをReactで使うために以下のライブラリを使用します。

jerairrest/react-chartjs-2: React wrapper for Chart.js

まずは、必要なものをインストール。

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

続いて、上記のライブラリに対応したTypeScriptの型定義をインストール。

npm install --save @types/chart.js
npm install --save @types/react-chartjs-2

使用したいコンポーネントをインポートで指定します。（下記はLineチャートのインポート）

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

コンポーネントの実装は以下の通り。

<Line
  data={data}
  options={options}
  width={600}
  height={400}
/>

「data」や「options」に指定する内容は通常のChart.jsと同じです。

以下は例。

const data = {
  labels: ['Jan', 'Feb', 'Mar'],
  datasets: [{
    label: 'データA',
    data:[10, 20, 30],
    lineTension: 0.2,
    fill: false
  },
  {
    label: 'データB',
    data:[40, 50, 60],
    lineTension: 0.2,
    fill: false
  }]
};

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