React+chart.jsでドーナツグラフの真ん中に文字列を表示する
概要
現在の仕事ではフロントエンドにreactを使って画面を構築しています。
ある時、新機能を作ってくれと頼まれ、ざっくりした仕様を聞かせてもらうとあるデータの集計結果を画面上にドーナツグラフで表示したい、というものがありました。
まあ、chart.jsとか使えばなんとなかなるだろうと思っていたのですが、すでに出来上がっていたワイヤーフレームを見るとドーナツグラフの真ん中に統計の総件数を表示する、という仕様がありました。
chart.jsのドキュメントを眺めても、グラフの真ん中に何かを表示するオプションなどは見つからず、苦戦しました。
しばらくググっていると以下のchart.jsプラグインで実現できそうでしたので、これを試してみました。
前提
node: 12.8.0
yarn: 1.22.4
react: 17.0.1
create-react-app: 3.4.1
サンプルと使い方
サンプル用のプロジェクトと必要なライブラリのインポートは以下の手順で行いました。
npx create-react-app doughnutlabel-sample
cd doughnutlabel
yarn add chart-js react-chartjs-2
yarn add chartjs-plugin-doughnutlabel
src/App.jsを以下のように書き換えてみて下さい。
文字列の表示はpluginをimportしてあとはドーナツグラフのoptionとして、表示したい文字列を追加するだけで、ドーナツの真ん中に文字列を表示できました。
import 'chartjs-plugin-doughnutlabel';
import { Doughnut } from 'react-chartjs-2';
function App() {
const graphdata = {
datasets: [
{
data: [15, 25, 35],
backgroundColor: ['#B9D8F7', '#FFE5EC', '#DEDFE0'],
},
],
labels: ['item1', 'item2', 'item3'],
};
const doughnutOptions = {
legend: {
display: false,
},
plugins: {
doughnutlabel: {
labels: [
{
text: 'ITEMS',
color: '#666666',
font: {
size: 30,
},
},
{
text: 'TEST',
color: '#888888',
},
],
},
},
};
return (
<div>
<p>Doughnut graph sample</p>
<div>
<Doughnut data={graphdata} options={doughnutOptions} />
</div>
</div>
);
}
yarn startして開発用サーバを起動し、ブラウザに以下のような画面が表示されたら成功です。
このサンプルはgithubにもアップしていますので、参考にしてみて下さい。