React+chart.jsでドーナツグラフの真ん中に文字列を表示する

概要

現在の仕事ではフロントエンドにreactを使って画面を構築しています。

ある時、新機能を作ってくれと頼まれ、ざっくりした仕様を聞かせてもらうとあるデータの集計結果を画面上にドーナツグラフで表示したい、というものがありました。

まあ、chart.jsとか使えばなんとなかなるだろうと思っていたのですが、すでに出来上がっていたワイヤーフレームを見るとドーナツグラフの真ん中に統計の総件数を表示する、という仕様がありました。

chart.jsのドキュメントを眺めても、グラフの真ん中に何かを表示するオプションなどは見つからず、苦戦しました。

しばらくググっていると以下のchart.jsプラグインで実現できそうでしたので、これを試してみました。

ciprianciurea/chartjs-plugin-doughnutlabel

前提

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にもアップしていますので、参考にしてみて下さい。

miyazi777/doughnutlabel-sample