Reactのチャートライブラリを比較検討してみる

目的

chartライブラリの選定に先駆けて、各ライブラリの比較を行いたい。
仕様やデザイン（Figma）がFIXしていないので、あくまで仮選定。

実装が必要になりそうな仕様

• 棒グラフ（ネガポジのスタックバーチャート）の実装
• 折れ線グラフを混合実装
• 棒グラフは途中期間から色が変わる
• 折れ線グラフは途中期間から点線になる
• etc…?

npm trends

選定基準

• 拡張性（仕様を満たせそうか）
• スター数
• アップロード日
• サイズ

検討一覧

• react-chartjs-2（chart.jsを内部使用、Canvas）
• Recharts（d3を内部使用、SVG）

ーーー

• ECharts（issue数爆裂多い、サイズでかい）
• React Charts（まだbeta）
• Nivo（TypeScript未対応、拡張性低）
• Victory（拡張性低）

Tips

チャートの描画にはSVGとCanvasがある。
SVG（Scalable Vector Graphics）とCanvasは、ウェブ上でグラフィックを描画するための2つの異なるテクノロジーで、それぞれ特徴と利用シーンが異なります。

SVG（Scalable Vector Graphics）

ベクトルベース: SVGは、数学的な形状とパスに基づいて画像を記述するので、拡大・縮小しても品質が失われません。
DOMとの統合: SVG要素はHTMLのDOM内に存在するので、CSSやJavaScriptでスタイリングや操作が容易です。
アニメーション: CSSアニメーションやJavaScriptを使用してアニメーションを作成することができます。
パフォーマンス: 大量の要素を持つ場合、パフォーマンスが下がることがあります。

Canvas

ピクセルベース: Canvasはピクセルに直接描画するため、細かい描画制御が可能ですが、拡大すると画質が失われることがあります。
DOMとの分離: Canvasはピクセルデータを操作するため、DOMと直接関連しないため、SVGよりも高速に動作することがあります。
アニメーション: ゲームなど、高速に変化するグラフィックスに適しています。
手動管理: Canvasでは、状態やオブジェクトを手動で管理する必要があるため、複雑なシーンではコードが複雑になることがあります。

どちらを使うべきか

シンプルで、拡大縮小が必要なチャート: SVGが適しています。
高速な描画や大量のデータを扱うチャート: Canvasが向いています。
詳細な制御やゲームのような動的な描画: Canvasを選ぶとよいでしょう。
スタイリングやインタラクションが重要: SVGは、CSSとの連携が容易なため選ぶとよいかもしれません。
チャートライブラリを選ぶ際には、これらの特性を考慮して、プロジェクトのニーズに合ったものを選ぶとよいでしょう。

まとめ

react-chartjs-2かRechartsが良さそう。
2つのライブラリをハンズオンしてみて、使い勝手の違いなどを確認し、選択したい。

参照

React Chartライブラリを比較してみた | DevelopersIO
The top 8 React chart libraries - LogRocket Blog
Reactベースのチャートツール選定(2022年版)
【React】チャートライブラリ比較してみた - Qiita