Chart.jsのレスポンス対応で、ラベルのフォントサイズだけを変更させたいです。

前提・実現したいこと

Chart.jsのレーダーチャートを実装しているのですが、
iPhoneのデバイス幅にすると、ラベルの文字が大きすぎる為、ラベルの文字だけ小さく設定したいです。
ラベルの文字というのは、options, scaleのfontSizeの事を指しております。

ご教授のほど、よろしくお願い致します。

現状

optionsのresponsive: trueを指定すると、無駄に横の余白があり、レーダーチャートが小さくなってしまいます。
そのため、responsive: falseに設定し、レーダーチャートが生成した際に自動で設定されるwidthとheightは、横幅が500px以下の場合のみ.removeAttribute('style')で削除し、CSSでwidthとheightを設定し直しています。
この結果、グラフは大きく表示されるようになったのですが、ラベルの文字数も大きくなり、ここだけを小さくしたいと思っていたのですが、調べても解決につながる情報はありませんでした。

###参考にした資料
参考資料
上記のリンクに、下記のコードが記載されており、参考にして記述したのですが、情報が古い為か記述方法が間違っているらしく、エラーがでてしまいます。

if (window.matchMedia('screen and (min-width:768px)').matches) {
  //768px以上のデスクトップでの処理
  var options = {
    // 略

    legend: {
      labels: {
        boxWidth: 20,
        fontSize: 12 // PC用
      }
    }

   // 略
  };
} else {
  //スクリーンサイズが768pxより小さい時の処理
  var options = {
    // 略

    legend: {
      labels: {
        boxWidth: 20,
        fontSize: 8 // スマホ用
      }
    }

   // 略
  };
}

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <title>Document</title>
7  <link rel="stylesheet" href="style.css" />
8  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js" integrity="sha512-d9xgZrVZpmmQlfonhQUvTR7lMPtO7NkZMkA0ABN3PHCbKA5nqylQ/yWlFAyY6hYgdF1Qh6nYiuADWwKB4C2WSw==" crossorigin="anonymous"></script>
9  <script>
10    window.addEventListener('DOMContentLoaded', ()=>{
11  new Chart(document.getElementById("myChart"),{
12    type: 'radar',
13    data: {
14      labels: ["タイプA", "タイプB", "タイプC", "タイプD"],
15      datasets: [{
16        label: 'A_kun',
17        borderColor: "rgba(0,0,80,1)",
18        data: [8, 6, 9, 8]
19      }]
20    },
21    options: {
22      responsive: false,
23      legend:{
24        position:'bottom'
25      },
26      scale: {
27        pointLabels:{
28          fontSize: 16,
29          fontColor: "rgb(129, 109, 109)"
30        },
31        ticks: {
32          min: 0,
33          max: 10,
34          stepSize: 2
35        },
36        gridLines:{
37          display: true,
38          color: "rgb(129, 109, 109)"
39        }
40      }
41    }
42  })
43  if(window.matchMedia('(max-width:500px)').matches){
44  var chartStyle = document.getElementById("myChart")
45  chartStyle.removeAttribute('style');
46  }
47});
48  </script>
49</head>
50<body>
51  <canvas id="myChart"></canvas>
52</body>
53</html>

CSS
1#myChart{
2  object-fit: cover;
3  width: 400px;
4  height: 300px;
5}

ご教授のほど、よろしくお願い致します。

行動規範の内容に同意します

回答1件

ベストアンサー

js
1scale: {
2  pointLabels:{
3    fontSize: 16,

この fontSize の調整でいかがでしょう。

追記

js
1var myChart = new Chart(document.getElementById("myChart"),{
2...
3})
4if( window.matchMedia('(min-width: 500px)').matches) {
5  myChart.options.scale.pointLabels.fontSize = 13;
6} else if ( window.matchMedia('min-width: 1000px)').matches) {
7  myChart.options.scale.pointLabels.fontSize = 18;
8}
9});
10</script>

フォントサイズは変化するのですが、ウインドウ幅が大きいとフォントサイズが小さくなってしまうようで何か調整が必要かもしれません。

投稿2020/12/01 13:20

編集2020/12/01 15:06

退会済みユーザー

総合スコア0

beginner.tanaka

2020/12/01 13:57

回答いただきありがとございます！ fontSizeのところを画面の大きさによって、数値を変えたいのですが、それができない状況です。 if文を使用すると、入力エラーが出てしまいます。 pointLabels:{ if( window.matchMedia('(min-width: 500px)').matches) { fontSize: 13 } else if ( window.matchMedia('min-width: 1000px)').matches) { fontSize: 18 } },

beginner.tanaka

2020/12/02 13:57

回答ありがとうございます！教えていただいたコードを使用して、無事に解決する事ができました！

行動規範の内容に同意します