Chart.js 複数軸（対象：棒グラフ、折線グラフ）

複数軸の考え方

棒グラフ（生産量）と折線グラフ（構成比）の数値が大きく異なると、同一スケールではわかりにくくなることがあります。それで、右図のように、「Ｙ左軸」「Ｙ右軸」の二つの軸を設定する必要があります。

下のように、datasets で yAxisID により、各系列がどの軸に従うかを設定し、options.scales の id でその軸の定義をします（もし第３の系列がある場合は「Ｙ左軸」「Ｙ右軸」のどちらかを指定します）。

    datasets: [
        {
            label: "生産量",
              :
            yAxisID: "Ｙ左軸"       // option でのＹ左軸の定義に従う
        },
        {
            type: "line",
            label: "構成比",
              :
            yAxisID: "Ｙ右軸"       // option でのＹ右軸の定義に従う
        }
    ],
    options:
        :
        scales: {
            yAxes: [             // Ｙ軸
                {
                   id: "Ｙ左軸",         // Ｙ左軸の定義
                   position: "left", 
                       :
                   },
                   :
                },
                {
                    id: "Ｙ右軸",         // Ｙ右軸の定義
                    position: "right",        // 図の右側に配置
                        :
                }
            ]
        }

軸の定義

上のグラフでは、次のように設定しました.js

   「Ｙ左軸」                           「Ｙ右軸」
    id: "Ｙ左軸",         // Ｙ左軸の定義  "Ｙ右軸"　
    position: "left",     // 位置が左側　　"right"
    gridLines: {          // 目盛線
        color: "rgba(255, 0, 0, 0.2)"      "rgba(0, 0, 255, 0.2"
    },
    scaleLabel: {         // 軸ラベル
        display: true,
        labelString: "生産量（個）",       "構成比（％）"
        fontColor: "red",                  "blue"
        fontSize: 14                        14                       
     },     
     ticks: {             // 軸スケール
         fontColor: "red",                 "blue"
         min: 0,                            0
         max:300,                           80
         stepSize: 50                       20
     }