今回はReactで棒グラフを表示する方法を紹介します。
グラフを描画してくれるプラグインreact-chartjs-2をインストールします。
react-chartjs-2のGithubサイトはこちらです。
続いてFakerもインストールしましょう。
FakerのGithubサイトはこちらです。
Contents
インストール
react-chartjs-2のインストール
npm i react-chartjs-2 chart.jsFakerのインストール
npm install --save-dev @faker-js/fakerreact-chartjs-2の公式サイトのコードを使います。そのままだとTypeScriptのコードのため動きませんので、一部を変更します。
import faker from ‘faker’; を import { faker } from ‘@faker-js/faker’; と書きます。
position: ‘top’ as const, を position: ‘top’ , とします。
App.jsのデフォルトのコードは削除します。
そして次のコードを記述します。
import React from 'react';
import {
Chart as ChartJS,
CategoryScale,
LinearScale,
BarElement,
Title,
Tooltip,
Legend,
} from 'chart.js';
import { Bar } from 'react-chartjs-2';
import { faker } from '@faker-js/faker';
ChartJS.register(
CategoryScale,
LinearScale,
BarElement,
Title,
Tooltip,
Legend
);
export const options = {
responsive: true,
plugins: {
legend: {
position: 'top' ,
},
title: {
display: true,
text: 'Chart.js Bar Chart',
},
},
};
const labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
export const data = {
labels,
datasets: [
{
label: 'Dataset 1',
data: labels.map(() => faker.datatype.number({ min: 0, max: 1000 })),
backgroundColor: 'rgba(255, 99, 132, 0.5)',
},
{
label: 'Dataset 2',
data: labels.map(() => faker.datatype.number({ min: 0, max: 1000 })),
backgroundColor: 'rgba(53, 162, 235, 0.5)',
},
],
};
export function App() {
return <Bar options={options} data={data} />;
}
export default App;Fakerは、この記述でランダムな数値を指定しています。
faker.datatype.number({ min: 0, max: 1000 })この状態でブラウザには次のように表示されます。
グラフの見た目を変える方法
少し変更を加えてみます。
グラフの上にあるタイトルを書き換えます。
title: {
display: true,
text: 'Chart.jsで棒グラフ',グラフの下部のラベル表記を変更します。
const labels = ['2017', '2018', '2019', '2020', '2021', '2022', '2023'];グラフの色を変更してみます。
datasets: [
{
label: 'Dataset 1',
data: labels.map(() => faker.datatype.number({ min: 0, max: 1000 })),
backgroundColor: 'rgba(255, 0, 0, 0.8)',
},
{
label: 'Dataset 2',
data: labels.map(() => faker.datatype.number({ min: 0, max: 1000 })),
backgroundColor: 'rgba(0, 0, 255, 0.8)',
},ブラウザの描画が次のように変わりました。
まとめ
今回はreact-chartjs-2を利用して、Reactで棒グラフを表示させました。
最後までお読みいただきありがとうございました。