Chart.js 棒グラフの棒の幅<Chart.js<Javascript<木暮仁

スタートページJavascriptChart.js

Chart.js 棒グラフの棒の幅(対象:棒グラフ)


棒グラフの棒の幅


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

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

categoryPercentage:目盛り線の幅に対する棒(複数棒)の占める幅の割合。1にすると要素間の空白が狭くなります。
barPercentage:categoryPercentageに対する単独棒の幅。1にすると複数棒間間隔がなくなり、1より小さくすると棒が細くなり間隔が広がります。1以上にすると重なります。
単一棒の場合は、categoryPercentage/barPercentageの一方だけの設定で、ほぼ同じような結果になります。
棒間に隙間のないヒストグラムにするには、categoryPercentage: 1 (1.1のほうが見栄えが良い)だけにします。

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

categoryPercentage=、 barPercentage