Note公開 2024年4月1日更新 2024年4月1日1 min read
React, TypeScriptで円グラフを作成する方法
react-chartjs-2 chart.js をインストールしておきます。 pnpm yarn npm 例 必要に応じて options を入れる。 例えばツールチップやグラフ上の装飾など。 参考文献
- react-chartjs-2
- chart.js
をインストールしておきます。
pnpm
pnpm add react-chartjs-2 chart.js
yarn
yarn add react-chartjs-2 chart.js
npm
npm install react-chartjs-2 chart.js
例
import { Pie } from "react-chartjs-2";
import { Chart, ArcElement, Tooltip, Legend } from "chart.js";
Chart.register(ArcElement, Tooltip, Legend);
const data = {
labels: labels,
datasets: [{ data: data, backgroundColor: colors }],
}
<Pie data={data} />
必要に応じて options を入れる。
例えばツールチップやグラフ上の装飾など。