JavaScript / TypeScript / jQuery

【Chart.js】レーダーチャートの目盛り表示を数指定したり非表示にしたり

目盛りの最小・最大・ステップ数を指定する場合

  • options.scales.rで指定する
  new Chart(ctx, {
            type: 'radar',
            data: data, // data投入部分は省略
            options: {
                scales: {
                    r: {
                        min: 0, // 目盛最小値
                        max: 10, // 目盛最大値
                        ticks: {
                            stepSize: 2, // 目盛間隔
                        },
                    },
                },
            },
        });

目盛を非表示にする場合

  • options.scales.r.ticksでdisplay: falseを指定
new Chart(ctx, {
            type: 'radar',
            data: data,
            options: {
                scales: {
                    r: {
                       min: 0,
                        max: 10,
                        ticks: {
                            stepSize: 2,
                            display: false // 目盛数字を非表示
                        },
                    },
                },
            },
        });

レーダーチャートのラベルの文字の大きさを変える場合

  • 添付青枠の部分のラベルが、デフォルトだと小さかったので大きくする
   new Chart(ctx, {
            type: 'radar',
            data: data,
            options: {
                scales: {
                    r: {
                        pointLabels: {
                            font: {
                                size: 18 // labelの文字サイズを指定
                            }
                        }
                    },
                },
            },
        });

凡例 (legend) を非表示にする場合

  • 添付青枠の部分を非表示にする

   new Chart(ctx, {
            type: 'radar',
            data: data,
            options: {
                plugins: {
                    legend: {
                        display: false, // 凡例を非表示
                    }
                },
            },
        });

\ 案件のご依頼・ご相談はこちらから /