【React】棒グラフを描く方法

今回はReactで棒グラフを表示する方法を紹介します。

グラフを描画してくれるプラグインreact-chartjs-2をインストールします。
react-chartjs-2のGithubサイトはこちらです。


続いてFakerもインストールしましょう。
FakerのGithubサイトはこちらです。

インストール

react-chartjs-2のインストール

npm i react-chartjs-2 chart.js

Fakerのインストール

npm install --save-dev @faker-js/faker

react-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 })
この状態でブラウザには次のように表示されます。
react chart

グラフの見た目を変える方法

少し変更を加えてみます。
グラフの上にあるタイトルを書き換えます。
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 chart

まとめ

今回はreact-chartjs-2を利用して、Reactで棒グラフを表示させました。
最後までお読みいただきありがとうございました。

返信を残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください