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

Chart.js　タイトル・凡例（対象：全チャート）

タイトル

標準設定では、タイトルは表示されません。表示するには options.title での設定が必要です。
displayとtext以外は、省略時と異なるものだけを記述します。

        options: {                // オプション
            :
            title: {                   // タイトルの設定
                display: true,             // ★必須　表示設定 省略時は false
                position: "bottom",        // 表示位置 省略時は top、他に left, right が指定できる
                fontSize: 14,              // フォントサイズ 省略時は 12
                fontColor: "black",        // 文字の色 省略時は "#666"
                fontStyle: "bold",         // フォントタイプ 省略時は "bold"
                fontFamily: "sans-serif",  // フォントファミリ 省略時は "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"
                text: 'タイトル'           // ★必須　タイトルの文字列
            },
            :

凡例

標準設定では、凡例はグラフの上（top）に表示されます。個々の系列に関する事項は datasets で、全体に関する事項は、options.legendで設定します。その仕組みを示します。

        data: {
            :
            datasets: [ // 系列により異なるものはここで設定する
                {
                    label: "生産量", // 系列０の凡例文字列になる
                    :
                    borderColor: "red",                      // ┐
                    backgroundColor: "rgba(255, 0, 0, 0.5)"  // │
                },
                {
                    label: "構成比", // 系列１の凡例文字列になる
                    :
                    borderWidth: 2,                          // │棒や線に関して設定したものが
                    borderColor: "blue",                     // │凡例の図形に反映される
                    backgroundColor: "blue"                  // ┘
                }
            :
        options: {       // 全系列に共通するものはここで設定する。
            :            // 
            legend: {
                position: "bottom",     // タイトルでの position と同じ
                labels: {
                    fontSize: 14,       // ┐
                    fontColor: "red",   // │凡例文字列のフォント等の設定
                        :               // │タイトルでの fontSize ～ fontFamily と同じ
                }
            },                

折線グラフでは、グラフの点を考慮した凡例図形にしたいのですが、それらに関しては「折線グラフ」を参照してください。

タイトル・凡例の表示例

下のＡでは、タイトルのフォント等を設定して表示しました。
Ｂでは、Ａに加えて凡例のフォント等を設定し、表示位置を変更しました。
さらにＢでは、タイトルを２段にしました。このように、改行をするには各行を配列にすることで実現できます（できれば２段目のフォントサイズを小さくして出典などの記述にしたいのですが、解決していません。

options: {
    :
    title: {              // タイトルの設定
        display: true,         // 表示設定
        pocision: "top",       // 表示位置
        fontSize: 18,          // フォントサイズ
        fontColor: "green",    // 文字の色
        text: "タイトル凡例Ａ" // タイトル文字列
    },
    :

   title: {
       :
       position: "bottom", // 表示位置変更
       :
       text: ["タイトル凡例Ｂ", "位置変更 改行"]
          // タイトルや凡例文字列を改行するには配列にする
   },
   legend: {             // 凡例の設定
       position: "right",     // 表示位置
       labels: {              // 凡例文字列の設定
           fontSize: 14,
           fontColor: "red"
       }
   }