【React】react-chartjs-2 zoomとpanの書き方

概要

react-chartjs-2でzoomとpan操作をするコードを備忘録として残します。（今回作成したのは折れ線グラフだけです）
ここではzoomプラグインの説明だけでchartjsの説明はしないのでご了承ください。

一応zoomプラグインの公式のURL貼っときます↓
https://www.chartjs.org/chartjs-plugin-zoom/latest/

とりあえずコードが欲しい方codesandboxに公開してます。
https://codesandbox.io/s/react-chartjs-2-line-zoom-pan-9cz0eh?file=/public/index.html

バージョン

reactやzoomプラグインのバージョンは以下です。

• "chart.js": "3.9.1"
• "chartjs-plugin-zoom": "1.2.1"
• "react": "18.2.0"
• "react-chartjs-2": "4.3.1"

npmの場合以下のようにzoomプラグインをインストールします。

npm install chartjs-plugin-zoom

コードの説明

インポート

まずはインポートについてです。
zoomプラグインに関係するのは14行目と24行目です。これを忘れると動ないので注意して下さい。

https://github.com/saito2321/ChartJs2-Line-zoomAndPan/blob/main/src/App.js#L1-L26

オプション

オプションについてです。
zoomプラグインのオプションはpluginsの中に書きましょう(53行目)
zoomオプションのpanはグラフを左右に動かす操作です。デフォルトではマウスのドラッグで操できます。
zoomはグラフの拡大縮小です。
wheelはマウスホイールの操作
pinchは指2本でやる操作です（スマホとかのタッチパネル操作）
modeは"x" "y" "xy"でどの方向への操作を有効にするか決めれます。

https://github.com/saito2321/ChartJs2-Line-zoomAndPan/blob/main/src/App.js#L27-L55

APIによる操作

先ほどのオプションで有効にした操作はマウスやタッチ操作だけでした。
APIを使ってボタン操作によってzoom操作もすることが出来ます。
APIを使うには参照が必要なのでuseRefを使います（80行目)
そして104行目のようにref={chartRef}で参照を取得します。
あとは86行目～100行目のようにchartRef.current.でAPIを呼び出して操作できます。

https://github.com/saito2321/ChartJs2-Line-zoomAndPan/blob/main/src/App.js#L79-L113

スマホ操作

公式のGetting Startedに書いてる感じではzoomプラグインでスマホ操作(pinchやpan)するにはHammer.jsもインストールする必要があるらしいのですがcodesandboxで試すと無くてもスマホ操作できたのでそこは良くわからないです。
マウスの操作は出来るけどタッチ操作が聞かない場合はHammer.jsをインストールしてみてください。

https://www.chartjs.org/chartjs-plugin-zoom/guide/

個人的にハマったとこ

最後に個人的にハマって困ったとこを紹介します。
コードの58,59行目に書いてますがラベルを文字列じゃなくて数値にするとzoomやpanの挙動がおかしくなります。
ぜひcodesandboxで試してみてください。マジでイカれた動きします笑

https://github.com/saito2321/ChartJs2-Line-zoomAndPan/blob/main/src/App.js#L57-L59

本記事は以上です。ありがとうございました。
間違いや指摘等あればコメントしていただけると幸いです。