React で Chart.js のグラフサイズを自動リサイズする [MUI 使用]

こんにちは、広野です。

React アプリでグラフ生成モジュール Chart.js を使用しております。

先日、グラフが画面サイズの変更に基づく自動リサイズをしていないことに気付き、模索した対応方法を紹介します。

環境
やりたいこと
うまくいかなかったこと
うまくいったこと
まとめ

環境

React や関連モジュールのバージョンは以下の通りです。

React 18.2.0
chart.js 4.2.1
react-chartjs-2 5.2.0
@mui/joy 5.0.0-alpha.69

やりたいこと

生成されたグラフをアスペクト比固定 (2/1) で、画面サイズ、正確には親コンテナのサイズの幅を 100% 使用する設定でグラフを自動拡縮したかったです。

うまくいかなかったこと

当初、Chart.js の正規のグラフオプションに以下の設定を入れていました。本来はこれで動作します。

responsive: true,
aspectRatio: 2,
maintainAspectRatio: true,

Responsive Charts | Chart.js

Open source HTML5 Charts for your website

これだと

画面サイズが小さくなったときにはグラフが小さくなってくれる
画面サイズが大きくなったときにはグラフの大きさが変わらない

という状況になりました。ただし、環境やコードによって挙動が違いました。原因はわかっていません。問題が発生しないケースもありました。

その後いろいろな設定を試行錯誤してみたのですが、アスペクト比が崩れたり、リサイズしなかったりを繰り返したので、Chart.js のオプションによる実現はあきらめました。

うまくいったこと

ということで、他のサイズ関連モジュールを使用することで実現できました。先にコードから紹介します。

import AspectRatio from '@mui/joy/AspectRatio';
import { CssVarsProvider } from '@mui/joy/styles';
import { Chart, registerables } from 'chart.js';
import { Bar } from 'react-chartjs-2';

//中略

Chart.register(...registerables);

//グラフデータ、グラフオプションは省略

//中略

<CssVarsProvider>
  <AspectRatio variant="plain" ratio="2/1" sx={{width:"100%"}} my={2}>
    <Bar data={graphData} options={graphOptions} />
  </AspectRatio>
</CssVarsProvider>

<Bar> は Chart.js のグラフ描画です。
それを MUI の AspectRatio という UI コンポーネントで囲んで、アスペクト比や幅の設定をします。
【要注意】AspectRatio は、CssVarsProvider というコンポーネントで囲まないと機能しません。MUI Joy UI という種類のモジュールは、総じてそうしないとダメなようです。
私は元々画面 UI に MUI の Material UI を使用しており、MUI で解決できないかなーと探したところ Joy UI という姉妹製品みたいなモジュール群の中に AspectRatio がありました。Joy UI はまだアルファリリースのようなので、クリティカルなアプリでは利用は避けた方がいいかもしれません。
Chart.js のグラフオプションは元の設定の中で maintainAspectRatio: false にした状態です。
実現方法はこれだけではありません。他の方法を試している人がネット上にはいました。