0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

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

Posted at

##chart.jsの目盛り数が設定できない問題
chart.jsで5目盛りのレーダーチャートを作ろうとしてstepSizeプロパティをいじりまくるのだけれども、なぜか5目盛りにならない。目盛り量がすごいことになった状態のままうんともすんともいわない。
スクリーンショット 2022-02-14 14.56.22.png

##原因
めちゃくちゃ初歩的な原因でした。プロパティ名を正規表現「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記述で解決!
スクリーンショット 2022-02-14 15.07.34.png

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

##参考リンク

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?