chart.jsのstepSizeはプロパティ名の小文字・大文字に注意

chart.jsの目盛り数が設定できない問題

chart.jsで5目盛りのレーダーチャートを作ろうとしてstepSizeプロパティをいじりまくるのだけれども、なぜか5目盛りにならない。目盛り量がすごいことになった状態のままうんともすんともいわない。

原因

めちゃくちゃ初歩的な原因でした。プロパティ名を正規表現「stepSize」にしていなかったことが原因。
それまで「StepSize」と頭文字を大文字にしてしまっていたために設定できていなかったようですー。

options: {
    scale: {
      ticks: {
        label: false,
        min: 0,
        max: 5,
        stepSize: 1,
        showLabelBackdrop: false,
        fontSize: 0,
        color: '#eee',
      },
        gridLines: { 
            display: true,
            borderWidth: 2,
            color: "#ddd"
        }
    },
    scales: {
      xAxes: [{
         display: true,
         stacked: false,
         gridLines: {
            display: false
         },

      }]
    },
    legend: {
        display: false
    },
    tooltips: {
        enabled: false
    }
}

以上のoptions記述で解決！

私はなかなかこれに気づかずハマっていたので、同じ悩みをもった方のもとに届きますように。

参考リンク

• chart.js 公式サイト：https://www.chartjs.org
• レーダーチャートのプロパティ設定に参考にしたサイト：http://www.kogures.com/hitoshi/javascript/chartjs/radar.html