スタートページ＞ Javascript＞ Chart.js

Chart.pieceLabelの利用（対象：円グラフ、ドーナツチャート）

Chart PieceLabelの概要

Chart PieceLabelとは、円グラフ、ドーナツチャートの表示に特化したオープンソースのライブラリです。
これを用いると、凡例や数値のパーセント表示を容易に行うことができます。

ライブラリのソースコードは、GitHubのサイトhttps://github.com/emn178/Chart.PieceLabel.jsからダウンロードできます。
それを適当なファイルに保管して、jsとして利用すればよいのです。

Chart.jsの options に pieceLabel という機能を追加する形式です。
pieceLabelの主な機能を示します。すなわち、Chart.jsのプログラムに次の必要部分だけを追加するだけでよいのです。

options: {
    pieceLabel: {
        render: 'value', // 表示対象 'label', 'value', 'percentage', 'image' 省略時 'percentage'
        precision: 0,         // percentageのときの小数点以下桁数 省略時 0
                         // 表示のフォント
        fontSize: 12,         // 文字サイズ 省略時 12
        fontColor: '#fff',    // 色 省略時 '#fff'。[配列]にして個別に変えることが可能

        fontStyle: 'normal',  // フォントPieceLabel
        fontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
                         // 表示位置
        position: 'default', // 表示位置  'default'（グラフ内）, 'border'（周辺）'outside'（外） 省略時 'default'
        arc: true,           // 'border'のとき、円弧に沿って表示するか 省略時 true  
        outsidePadding: 4,   // 'outside'のとき、グラフとのパディング 省略時 4
    }
}

特に説明の必要はないでしょう。https://emn178.github.io/Chart.PieceLabel.js/samples/demo/に実例が掲げられています。

PieceLabelの例

Ａは、最も基本的なもので、グラフ内部にパーセントにして表示しています。
Ｂは、凡例をグラフの外に表示しました。凡例にスペースをとられて円が小さくなっています。
ＡとＢを組み合わせたいのですが、pieceLabelで複数のrenderを記述できないようです（私が知らないだけかもしれません）。
Ｃは、なんとか２つの項目を取り込もうとしたものです。凡例はPieceLabelを用いましたが、数値は dataLabelPlugin の表示位置を修正して表示しました。

options: {
    :
    pieceLabel: {
        render: 'percentage',
        fontSize: 16,
        fontColor: "black"
    }

options: {
    :
    pieceLabel: {
        render: "label",
        fontSize: 16,
        fontColor: "black",
        position: "outside"
    }

options: {
    :
    pieceLabel: {
        render: "label",
        fontSize: 16,
        fontColor: "black"
    }
},
plugins: [dataLabelPlugin]
    :