Chart.js 軸ラベル等の設定<Chart.js<Javascript<木暮仁

スタートページJavascriptChart.js

Chart.js 軸ラベル等の設定(対象:棒グラフ、折れ線グラフ)


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

概要

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

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

軸ラベル(scaleLabel)

軸ラベルは、標準では表示されません。scaleLabelを記述することにより表示されます。
名称意味省略時備考
labelStringラベルの文字列必須上図の "縦軸ラベル", "横軸ラベル"
fontColor文字の色'#666'
fontSize文字の大きさ12
fontStyleフォント'normal''bold',
fontFamilyフォントファミリ
注:"'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"

目盛り(ticks)

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

目盛線(gridLines)

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

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

Y軸に限定されますが、y=0(X軸)の線を特別な線にすることができます。zeroLineColor/zeroLineWidth/zeroLineBorderDash で設定します。

ソースコード

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