React/TSでChart.jsやってみる

プロジェクトセットアップ

Reactプロジェクト生成

npx create-react-app project-name --template typescript

project-name部分に自分のプロジェクト名を書いてください。

ライブラリ追加

npm i chart.js react-chartjs-2

react-chartjs-2にtypeが定義されているので@types/react-chartjs-2じゃなくてreact-chartjs-2を設置してください。

chart.jsはreact-chartjs-2利用するために設置します。

Code example

Graph.tsxをsrc/に作ってください。

// src/Graph.tsx

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

const Graph = () => {

    const data = {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [{
            label: 'Dataset',
            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 options = {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }]
        }
    }

    return (
        <Bar
            data={data}
            width={100}
            height={50}
            options={options}
        />
    );
};

export default Graph;

dataとoptionsはこちらのofficial documentから持ってきました。

src/index.tsxの

<APP />を<Graph />

に変えてください。

// src/index.tsx

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import Graph from './Graph';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <Graph />
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

reportWebVitals()はCRA version 4から出たものです。

reportWebVitals(console.log);するとTTFB(Time to first byte), FCP(First contentful paint)などのパフォーマンスが確認できます。

Test

npm startすると自分のブラウザから確認できます。

後は

dataの部分に自分のbackendからデータを持って画面に表示する感じで簡単にできるんだと思います。

Barの形以外にもいろいろあります。

https://www.chartjs.org/docs/master/のChart Typesを確認してください。

他のsettingも上のページから確認してください！

全体のprojectはこちらgithub repoに作りました。

以上です〜。