こんにちは、そうすけです。
最近は React + Vite を使って Chrome拡張を作る機会が増えてきました。
「拡張機能でもグラフ描画したい！」
そんな場面って意外と多いですよね。データ可視化、トレンド分析、クリックログのヒートマップなどなど…。
でも、実際にやってみると意外とハマりどころが多かったので、代表的なグラフライブラリ3つを試してみた結果と注意点をまとめておきます！
JSのグラフライブラリ候補調査
スター数
圧倒的にChart.jsが多く、そのあとRechartsと続きていきます。
Chart.jsは昔からあるというのも大きいと思います。
週次ダウンロード数
Recharts一興ですね。
パッケージサイズ
Echartsがかなり大きく、他はトントンです。
✅ 使用したベースリポジトリ
まず今回使ったベースはこちら👇
Manifest v3対応・React + TypeScript + Vite + Tailwind のモダン構成で、かなり開発しやすいです。
試したグラフライブラリ3つ
| ライブラリ | 見た目 | 開発体験 | パフォーマンス | Vite互換性 |
|---|---|---|---|---|
| Recharts | ◎ キレイ | △ HMR効かない | ○ 普通 | ❌ 相性悪い |
| Chart.js | △ レガシー | △ 手動実装多い | ◎ 軽い | ○ 問題なし |
| React-ECharts | ○ 良い感じ | ◎ 安定 | △ メモリ重め | ◎ 相性良い |
Recharts：UI最強、でもHMRが使えない
一番期待していたのがこれ。
Recharts、UIはほんとにキレイです。 カスタマイズ性も高く、使い心地もGood。ドキュメントも揃っていて、導入も簡単。
ただ、Viteと相性がとても悪かった…！
問題点
- HMR（Hot Module Replacement）が効かない
- 差分ビルドが崩れて 再レンダリングされない
- 毎回ローカルサーバー落としてビルドしないといけない
Chrome拡張開発でこの不安定さは致命的。
本番には使えないと判断しました。
Chart.js：超軽量だけどゼロからの実装がしんどい
次に試したのが Chart.js。
Canvasベースで描画されるので、パフォーマンスは非常に軽い。
ただし、Reactで使うにはカスタマイズが大変！
具体的にしんどい点
- クロスヘア（マウスオーバー時の縦線） → 自作が必要
- 凡例・ツールチップもある程度自力実装
- スタイルやイベントハンドリングが冗長になる
昔ながらのグラフライブラリという印象。
とにかく「Reactっぽくない」し、学習コストも高め。
AI使ったら、グラフはかけるものの、処理が複雑になりすぎて、認知不可が高くなり、
グラフUIをゴリゴリ自力しないといけないのは、チームで運用にするのには不向きだなと考えました。
React-ECharts：相性良し、実用性も高い！
最終的に採用したのがこれ。
React-ECharts（EChartsのReactラッパー）です。
良かった点
- HMRが安定して動く（＝Viteとの相性◎）
- クロスヘアやズーム、ツールチップなどがデフォで使える
- 設定もオブジェクトベースで柔軟
多少メモリは食いますが、開発・運用ともに一番ストレスが少ないと感じました。
Chrome拡張の中でも全く問題なく動作しています。
🏁 結論：React-EChartsが今のところ最適解！
| 目的 | おすすめ |
|---|---|
| UIの美しさを最優先 | Recharts（でもViteならやめとこう） |
| とにかく軽くしたい | Chart.js（でも自作覚悟） |
| 安定性・開発体験重視 | React-ECharts |
✍️ さいごに
Chrome拡張でグラフを描画したい！
…と軽い気持ちでライブラリを導入したら、意外と沼だった今回。
Rechartsは魅力的だったけど、拡張開発においては開発体験やビルドの安定性もめちゃくちゃ重要だなと実感しました。
今後はEChartsベースで色々試していこうと思います。
この記事が誰かのグラフ沼脱出のヒントになれば嬉しいです！