TECHNOLOGY Minato

React + TypeScript + Chart.js でグラフを表示する方法

react_chartjs

Reactプロジェクトの作成とChart.jsのインストール

React + TypeScript で新規にアプリを作成する

以下のコマンドを実行して、新規にReactのプロジェクトを作成します。app_nameには任意の値をセットしてください。

npx create-react-app app_name --template typescript

Chart.jsのインストール

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

アプリの起動

以下のコマンドを実行して、アプリを起動します。

ターミナルに表示されたURLにアクセスして、画面にReactのロゴが表示されていれば、インストールは無事完了しています。

npm start

Chart.jsの使い方

まず、srcディレクトリにcomponentsディレクトリを作成しておきます。こちらにチャートのコンポーネントを配置していきます。

LineChart

componentsディレクトリ内にLineChart.tsxを作成します。

以下の例では、月曜日から日曜日までの入場者数をプロットしています。

labels

チャートのラベルを指定します。デフォルトではチャートの下部にラベルが表示されます。

datasets

プロットするデータを定義します。datasetsの中に複数のデータセットを指定することができます。

data: プロットするデータを配列で指定します。データの件数はlabelsの件数と合わせるようにしてください。
borderColor: チャートの枠線の色を指定
backgroundColor: チャートの背景色を指定
pointRadius: ポイントの円の大きさを指定

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

const data = {
  labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
  datasets: [
    {
      label: '入場者数A',
      data: [100, 110, 90, 80, 130, 200, 150],
      borderColor: '#ff6384',
      backgroundColor: '#f59eb1',
      pointRadius: 10,
    },
    {
      label: '入場者数B',
      data: [120, 130, 70, 90, 150, 190, 170],
      borderColor: '#36a2eb',
      backgroundColor: '#72bbec',
      pointRadius: 10,
    }
  ]
}

const LineChart: React.FC = () => {
  return (
    <div>
      <Line data={data} />
    </div>
  );
};

export default LineChart;

作成したLineChartコンポーネントを表示するためにApp.tsxの内容を以下のように変更します。
npm start でアプリを起動するとチャートが表示されます。

import React from 'react';
import './App.css';
import LineChart from "./components/LineChart";

function App() {
  return (
    <div className="App">
      <LineChart />
    </div>
  );
}

export default App;

PieChart

componentsディレクトリ内にPieChart.tsxを作成します。

以下の例では、クラウドサービスのシェアをプロットしています。

labelsに指定した項目とdataに指定する値の数と位置を揃えてください。

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

const data = {
  labels: ['Others', 'AWS', 'Azure', 'GCP'],
  datasets: [
    {
      label: '入場者数A',
      data: [42, 32, 19, 7],
      backgroundColor: ['#c0c0c0', '#ff7f7f', '#7f7fff', '#7fbfff'],
    }
  ]
}

const PieChart: React.FC = () => {
  return (
    <div>
      <Pie data={data} />
    </div>
  );
};

export default PieChart;

import React from 'react';
import './App.css';
import LineChart from "./components/LineChart";
import PieChart from "./components/PieChart";

function App() {
  return (
    <div className="App">
      <LineChart />
      <PieChart />
    </div>
  );
}

export default App;

BarChart

componentsディレクトリ内にBarChart.tsxを作成します。

以下の例では、月曜日から日曜日までの2つの会場の入場者数をプロットしています。

labelsに指定した項目とdataに指定する値の数と位置を揃えてください。

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

const data = {
  labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
  datasets: [
    {
      label: '入場者数A',
      data: [100, 110, 90, 80, 130, 200, 150],
      borderColor: '#ff6384',
      backgroundColor: '#f59eb1',
      pointRadius: 10,
    },
    {
      label: '入場者数B',
      data: [120, 130, 70, 90, 150, 190, 170],
      borderColor: '#36a2eb',
      backgroundColor: '#72bbec',
      pointRadius: 10,
    }
  ]
}

const BarChart: React.FC = () => {
  return (
    <div>
      <Bar data={data} />
    </div>
  );
};

export default BarChart;
import React from 'react';
import './App.css';
import LineChart from "./components/LineChart";
import PieChart from "./components/PieChart";
import BarChart from "./components/BarChart";

function App() {
  return (
    <div className="App">
      <LineChart />
      <PieChart />
      <BarChart />
    </div>
  );
}

export default App;

RadarChart

componentsディレクトリ内にRadarChart.tsxを作成します。

以下の例では、ゲームのキャラクターの能力値をプロットしています。

labelsに指定した項目とdataに指定する値の数と位置を揃えてください。

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

const data = {
  labels: ['HP', 'MP', 'Attack', 'Defense', 'Speed'],
  datasets: [
    {
      label: 'キャラクターA',
      data: [90, 50, 80, 30, 60],
      backgroundColor: 'rgb(54, 162, 235, 0.5)',
    },
    {
      label: 'キャラクターB',
      data: [100, 0, 90, 80, 20],
      backgroundColor: 'rgb(255, 99, 132, 0.5)',
    },
  ]
}

const RadarChart: React.FC = () => {
  return (
    <div>
      <Radar data={data} />
    </div>
  );
};

export default RadarChart;
import React from 'react';
import './App.css';
import LineChart from "./components/LineChart";
import PieChart from "./components/PieChart";
import BarChart from "./components/BarChart";
import RadarChart from "./components/RadarChart";

function App() {
  return (
    <div className="App">
      <LineChart />
      <PieChart />
      <BarChart />
      <RadarChart />
    </div>
  );
}

export default App;

BubbleChart

3つのデータをプロットするには、バブルチャートを利用できます。

以下の例ではx軸に従業員数、y軸に売上げ、バブルの大きさにシェアを指定して、チャートを表示しています。

従業員数（名）売上げ（億円）シェア（%）
A社100010050
B社5005030
C社2001010

componentsディレクトリ内にBubbleChart.tsxを作成します。

dataのxに従業員数、yに売上げ、rにシェアを指定します。

また、今回はチャートのオプションを指定しています。以下の記述でチャートの上部にタイトルを表示しています。

plugins: {
  title: {
    display: true,
    text: 'Bubble Chart'
  }
},

以下の記述でx軸、y軸の最小値、最大値を指定しています。

scales: {
  y: {
    min: 0,
    max: 140
  },
  x: {
    min: 0,
    max: 1200
  }
}
import React from 'react';
import { Bubble } from 'react-chartjs-2';

const data = {
  labels: ['HP', 'MP', 'Attack', 'Defense', 'Speed'],
  datasets: [
    {
      label: 'A社',
      data: [{x: 1000, y: 100, r: 50}],
      backgroundColor: 'rgb(54, 162, 235, 0.5)',
    },
    {
      label: 'B社',
      data: [{x: 500, y: 50, r: 30}],
      backgroundColor: 'rgb(255, 99, 132, 0.5)',
    },
    {
      label: 'C社',
      data: [{x: 200, y: 10, r: 10}],
      backgroundColor: 'rgb(75, 192, 192, 0.5)',
    },
  ]
}

const options = {
  plugins: {
    title: {
      display: true,
      text: 'Bubble Chart'
    }
  },
  scales: {
    y: {
      min: 0,
      max: 140
    },
    x: {
      min: 0,
      max: 1200
    }
  }
};

const BubbleChart: React.FC = () => {
  return (
    <div>
      <Bubble
        data={data}
        options={options}
      />
    </div>
  );
};

export default BubbleChart;
import React from 'react';
import './App.css';
import LineChart from "./components/LineChart";
import PieChart from "./components/PieChart";
import BarChart from "./components/BarChart";
import RadarChart from "./components/RadarChart";
import BubbleChart from "./components/BubbleChart";

function App() {
  return (
    <div className="App">
      <LineChart />
      <PieChart />
      <BarChart />
      <RadarChart />
      <BubbleChart />
    </div>
  );
}

export default App;

まとめ

ReactとChart.jsを利用すると綺麗なチャートを簡単に作成できます。

興味のある方は、公式のドキュメントで詳細を確認してください。

Chart.js

react-chartjs-2

最後まで読んでいただき、ありがとうございます。

この記事が、「面白いな」、「勉強になったな」という方は、SNSでシェアしていただけると嬉しいです。

RECOMMENDこちらの記事も人気です。