Chart.js 軸ラベル等の設定（対象：棒グラフ、折れ線グラフ）

ラベル、目盛り、目盛り線

概要

ここでは、ＸＹ軸のラベル、目盛り、目盛り線の設定を扱います。右図を作成することを目的とします。
options.scales.xAxes/yAxes で次のような構成で記述します。

    options: {
        :
        scales: {         // 軸設定
            xAxes: [           // Ｘ軸設定
                {
                    scaleLabel: {   // 軸ラベル
                        :
                    },
                    gridLines: {    // 目盛線
                        :
                    },
                    ticks: {        // 目盛り
                        :
                    },
                }
            ],
            yAxes: [           // Ｙ軸設定
                :      xAxesと同様  
            ]
        }
        :

軸ラベル（scaleLabel）

軸ラベルは、標準では表示されません。scaleLabelを記述することにより表示されます。

名称	意味	省略時	備考
labelString	ラベルの文字列	必須	上図の "縦軸ラベル", "横軸ラベル"
fontColor	文字の色	'#666'
fontSize	文字の大きさ	12
fontStyle	フォント	'normal'	'bold',
fontFamily	フォントファミリ	注

注："'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"

目盛り（ticks）

通常は、目盛りの最小値や最大値などを設定するのに用いますが、それに加えてＸ軸の "00年" やＹ軸の 10 などの文字の体裁もここで設定します。
「軸ラベル」での labelString 以外が使えます。

目盛線（gridLines）

記述がないと薄い灰色の線になっています。それを変更するのに次の項目があります。

名称	意味	省略時	備考
display	表示の有無	true	falseにすると目盛線が消える
color	線の色	'rgba(0, 0, 0, 0.1)'
lineWidth	線の太さ	1
borderDash	点線	実線	[線長, 空白] の形式例[10,3]

Ｙ軸に限定されますが、y=0（Ｘ軸）の線を特別な線にすることができます。zeroLineColor/zeroLineWidth/zeroLineBorderDash で設定します。

ソースコード

上図を作成したソースコードを示します。