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

Chart.js　棒グラフの棒の幅（対象：棒グラフ）

棒グラフの棒の幅







棒の幅は、options.scales.xAxesで設定します。


options: {
    :
    scales: {
        xAxes: [
            {
               categoryPercentage: 0.8, // ┐省略時の値
               barPercentage: 0.9,      // ┘
                   :



categoryPercentage:目盛り線の幅に対する棒（複数棒）の占める幅の割合。１にすると要素間の空白が狭くなります。

barPercentage：categoryPercentageに対する単独棒の幅。１にすると複数棒間間隔がなくなり、1より小さくすると棒が細くなり間隔が広がります。１以上にすると重なります。

単一棒の場合は、categoryPercentage/barPercentageの一方だけの設定で、ほぼ同じような結果になります。

棒間に隙間のないヒストグラムにするには、categoryPercentage: 1 （1.1のほうが見栄えが良い）だけにします。



値を変えて確認してください。



categoryPercentage=、
barPercentage