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社 | 1000 | 100 | 50 |
B社 | 500 | 50 | 30 |
C社 | 200 | 10 | 10 |

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を利用すると綺麗なチャートを簡単に作成できます。
興味のある方は、公式のドキュメントで詳細を確認してください。
最後まで読んでいただき、ありがとうございます。
この記事が、「面白いな」、「勉強になったな」という方は、SNSでシェアしていただけると嬉しいです。