🎉

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

2020/11/23に公開

React

Chart.js

tech

概要

現在の仕事ではフロントエンドに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

サンプルと使い方

install

サンプル用のプロジェクト作成とnpmのインストールは下記のように行いました。

npx create-react-app doughnutlabel-sample
cd doughnutlabel
yarn add chart-js react-chartjs-2
yarn add chartjs-plugin-doughnutlabel

サンプル

src/App.jsを下記のように修正しました。

doughnutOptions内のplugins.doughnutlabel以下がドーナツの中身で表示したい文字列を指定する箇所になります。
配列なのは複数行を表示する為のようです。

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>
  );
}

export default App;

yarn startして開発用サーバを起動し、ブラウザに以下のような画面が表示されたら成功です。

今回のサンプルはgithubにもアップしていますので、よかったら参考にして下さい。

概要

前提

サンプルと使い方

install

サンプル

Discussion