chart.jsの(レーダーチャート)ラベルのフォントサイズ変更がしたい

Question

wordpressのサイト上でchart.jsを使ってレーダーチャートを作っているのですが、ラベルのフォントサイズ変更ができません。
チャートそのものは意図した表示になっています。
リファレンスやググってもみたのですが、詳しく書いてあるものがありませんでした。

<div class="canvas_outer">
    <canvas id="myRadarChart1" width="400" height="400"></canvas>
</div>
<script>
    var ctx = document.getElementById("myRadarChart1").getContext('2d');
    var myRadarChart1 = new Chart(ctx, {
        type: 'radar',
        data: {
            labels: [
                'ラベル１',
                'ラベル２',
                'ラベル３',
                'ラベル４',
                'ラベル５'
            ],
            datasets: [{
                label: '',
                data: [
                    1,
                    2,
                    3,
                    4,
                    5
                ],
                backgroundColor: [
                    'rgba(124, 176, 191, 0.678)',
                ],
                borderColor: [
                    'rgba(124, 176, 191, 1)',
                ],
                borderWidth: 1
            }]
        },
        scaleLabel: {
            fontSize: 20
        },
        options: {
            legend: {
                display: false
            },
            scale: {
                ticks: {
                    fontSize: 0,
                    stepSize: 2,
                    max: 10,
                    beginAtZero: true,
                },
                gridLines: {
                    pointLabels: {
                        fontSize: 18
                    }
                }
            },
            scales: {
                yAxes: [{
                    display: false,
                    gridLines: {
                        drawBorder: false
                    }
                }],
                xAxes: [{
                    display: false,
                    gridLines: {
                        drawBorder: false
                    }
                }]
            }
        }
    });
</script>

詳しい方よろしくおねがいします。

Answer 1

下記で対応可能に思うのですが、いかがでしょうか？

• Chart.js:フォント

Comments

[musashidayo]

defaultFontSizeの注釈の欄に「レーダーチャートの端にあるラベル)には適用されません」とあり、実際に変わりませんでした。

[m.ts10806]

なるほど、それではやはり開発ツールから使われているCSSクラスを特定して同名でfont-sizeを指定するしかなさそうですね。

[musashidayo]

その方法ですと、canvasに変換される前にfont-sizeを変更するということでしょうか？
難易度が高そうですね...

[m.ts10806]

あ、ごめんなさい。
凡例ラベルならこっちですね。
https://misc.0o0o.org/chartjs-doc-ja/configuration/legend.html

[musashidayo]

凡例のラベルというとチャートの上部に表示されているラベルの事でしょうか?
今回変えたいのはレーダーチャートの各項目の橋に表示されるラベルなのですがそちらも凡例のラベル変更でいけるということでしょうか？

[m.ts10806]

あれ？すみません。何度も勘違いを・・・。
https://misc.0o0o.org/chartjs-doc-ja/axes/radial/linear.html
↑これはいかがでしょうか。

FontSizeで検索するとそれっぽいのは幾つかありますがどうでしょうか。
https://misc.0o0o.org/chartjs-doc-ja/?q=FontSize

[musashidayo]

上記URLの点ラベル設定のフォントサイズ変更でいけました！何度も回答いただきありがとうございました！

[m.ts10806]

検索ができるリファレンスでよかったです。
解決できたようで何よりです。