chart.js レーダーチャートの目盛表示間隔を調整したい

投稿者: Anonymous

具体的には、一番最初の刻みをやや小さくしたいです。何かいい方法ありますか?

chart.jsバージョン 2.9.3

scale: {
    ticks: {
        min: 0,
        max: 5,
        stepSize: 1,        ← 一番目の間隔を0.5ほどにしたい。他は1のままで
        display: false, 
        }
}

解決

gridLines の 幅指定 lineWidth を 0 にすることで線を引かなくすることができます。
0.5 間隔に設定して 線を引きたくない場所は 線の幅を 0 にします。

options: {
    scale: {
        gridLines: {
            lineWidth: [1, 1, 0, 1, 0, 1, 0, 1, 0, 1]
        },
        ticks: {
            min: 0,
            max: 5,
            stepSize: 0.5, // ← 一番目の間隔を0.5ほどにしたい。他は1のままで
            display: false                              
        }
    }
}

描画したグラフ

参考までに
chart.jsのtick表示を間引きたい
を参考にして ラベル表示の ON OFF を制御すると 下記のような図も作成できます。

画像の説明をここに入力

回答者: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *