Chart.js 折れ線グラフのY軸を動的に変化させた際に、グラフエリアが伸縮されることを回避したい

Question

前提・実現したいこと

タブレットやスマホでブラウザからアクセスした際に、カメラ映像の上にChart.jsのグラフ領域を重ね合わせて、縦軸を端末の傾き(地面に対して端末が垂直の状態を0.0°として-180.0～180.0の範囲を表示)、横軸をコンパス情報(真北を向いた状態を0.0°として0.0～359.9の範囲を表示)にしたいと考えております。
グラフを100ms毎に更新して端末の傾きに追従してy軸の値が変化することは確認できたのですが、y軸の値によってグラフ領域が若干ですが伸縮してしまうことを確認いたしました。y軸に指定する値の文字数が変化しているためと思われます。

発生している問題・エラーメッセージ

Chart.jsで表示しているグラフについて、y軸の値によらずグラフ領域が伸縮されることを回避したいと考えているのですが、方法をご存知のかたご教示願えますでしょうか。

該当のソースコード

@media all and (orientation: portrait) {
  .chartview {
    position: absolute;
    top: 0.5rem;
    right: 24px;
    bottom: 5px;
    z-index: 3;
  }
}

<div class="col-auto mx-auto">
    <video id="video" class="camera" autoplay playsinline="true" style="width:100%;height:450px;"></video>
    <canvas id="chartview" class="chartview" style="width:100%;height:490px;"></canvas>
</div>

const VERTICAL_NUM = 11;
const SIDE_NUM = 9;

var betaVal = 0.000;
var directionVal = 0.000;
window.addEventListener("deviceorientation", function(eventOrient) {
  // ベータ軸
  betaVal = eventOrient.beta;
  if (betaVal == null) {
    betaVal = 0.0;
  }

  // 方位
  directionVal = eventOrient.webkitCompassHeading;
  if (directionVal == null) {
    directionVal = 0.0;
  }
});

var ctx = document.getElementById('chartview').getContext('2d');
var chartView = new Chart(ctx, {
type: 'category',
options: {
    responsive: false,
    maintainAspectRatio: false,
    // 凡例非表示
    legend: {
      display: false
    },
    // アニメーション停止
    animation: {
        duration: 0,
    },
    hover: {
        animationDuration: 0,
    },
    responsiveAnimationDuration: 0,
  }
});

function scalePortrait(chart) {
  var posx = 0 - ((SIDE_NUM / 2) | 0);
  var posy = 0 - ((VERTICAL_NUM / 2) | 0);
  var val = 0.0;
  var xlabelArray = [];
  var yLabelArray = [];

  // 現在のコンパス情報からx軸方向のラベルを取得
  for (var i = 0; i < SIDE_NUM; i++, posx++) {
    val = directionVal + (posx * 10);
    if (val < 0.0) {
      val += 360.0;
    } else if (360.0 <= val) {
      val -= 360.0;
    }
    if (val == 360.0) {
      val = 0.0;
    }
    xlabelArray.push(val.toFixed(1).toString());
  }

  // 現在の傾きからy方向のラベルを取得
  for (var i = 0; i < VERTICAL_NUM; i++, posy++) {
    val = (betaVal - 90) + (posy * 10);
    yLabelArray.push(val.toFixed(1).toString());
  }

  // 軸ラベル設定
  chart.options.scales = {
    xAxes:[{
      type    : 'category',
      labels  : xlabelArray,
      ticks   : {
        maxRotation:  0,
        minRotation:  0
      },
      gridLines: {
        color : 'rgba(255, 255, 255, 0.5)',
        borderDash: [4, 1]
      }
    }],
    yAxes:[{
      type    : 'category',
      labels  : yLabelArray,
      ticks   : {
        maxRotation:  0,
        minRotation:  0
      },
      gridLines: {
        color : 'rgba(255, 255, 255, 0.5)',
        borderDash: [4, 1]
      }
    }]
  }
  chart.update();
}

function chartUpdate() {
    scalePortrait(chartView);
}
setInterval(chartUpdate, 100);

該当のソースコード

元の状態

縮んだ状態

Answer 1

お騒がせして申し訳ありません。
見た目が若干異なる形とはなりましたが、自己解決いたしました。
内容を下記に記載いたします。

問題であった点

・Y軸の数値を算出して展開した際、桁数により文字数が異なっていたこと
・表示フォント

解決策

• Y軸の数値を算出して展開した際、桁数により文字数が異なっていたこと

Y軸の数値によって、-100.0といった6文字となる場合と10.0といた4文字となる場合がありましたが、軸の目盛は最大文字数に合わせてグラフの開始位置をずらしてしまうようでした。
そこで、Y軸のオプションにコールバックを追加して、コールバック側で半角スペースでパディングを取る形に修正いたしました。

      yAxes:[{
        type    : 'category',
        labels  : yLabelArray,
        ticks   : {
          maxRotation:  0,
          minRotation:  0,
          callback: function(value, index, values) {
            return ("      " + value).substr(-6);
          }
        },

• 表示フォント

表示状態をiPadのSafariで確認していたのですが、フォントが等幅フォントになっていなかったため、上記のみでは数ピクセル伸縮されてしまうことを確認いたしました。
そこで、下記の通りデフォルトのfontfamilyを等幅フォントに変更することで、グラフ領域が伸縮されることなく動作することを確認いたしました。

  Chart.defaults.global.defaultFontFamily = "'Courier New', 'monospace', 'ＭＳ ゴシック'";
  Chart.defaults.global.defaultFontStyle = 'Bold';