React Chartライブラリを比較してみた

2022.05.30

こんにちは。データアナリティクス事業本部 サービスソリューション部の北川です。

最近、ReactのChartライブラリについて調べる機会があったので、その時の共有です。

今回は、以下の4つを使用してみました。

  • Recharts
  • react-chartjs-2
  • nivo
  • victory

Recharts

https://github.com/recharts/recharts

特徴

  • React コンポーネントとして使え、素の SVG の描画をサポート
  • 画面に表示したいコンポーネントを宣言するだけで描画可能
  • Next.jsでは、動的インポートを使用(アラートのみのため、使用しなくても使えることは使えます)
  • TypeScript組み込み

チャートAPI

* 棒グラフ、円グラフなどの基本的なチャートは省きます
  • FunnelChart
  • SankeyChart
  • RadarChart
  • Treemap

デザイン例

react-chartjs-2

https://github.com/reactchartjs/react-chartjs-2

特徴

  • Chart.jsのReactコンポーネント
  • SankeyChart、FunnelChartがない
  • TypeScript組み込み
  • Next.jsを使用する際、ケースによっては動的インポート必要

チャートAPI

  • RadarChart
  • ScatterChart
  • BubbleChart

デザイン例

nivo

https://github.com/plouc/nivo

特徴

  • コンポーネントの種類は一番多い
  • TypeScript未対応のため、定義する必要がある
  • Next.jsでは、動的インポートが必要

  • ドキュメントが読みづらく、拡張する際は手間がかかりそう

チャートAPI

  • FunnelChart
  • RadarChart
  • SankeyChart
  • ScatterChart
  • TreeMap

デザイン例

victory

https://github.com/FormidableLabs/victory

特徴

  • TypeScript組み込み
  • コンポーネントの階層が他と比べて、多くなる印象
  • FunnelChart、Sankeyチャートがない

  • nivo同様、拡張する際の手間がかかりそう

チャートAPI

  • StackChart
  • ScatterChart

デザイン例

比較

GitHub(2022.5)

Weekダウンロード

  1. recharts
  2. react-chartjs-2
  3. victory

スター数

  1. recharts
  2. nivo
  3. victory

直近コミット

  1. react-chartjs-2 (1ヶ月前)
  2. recharts (2ヶ月前)
  3. nivo (2ヶ月前)

比較図

完全に個人的な印象になります

  • 利便性 ⇨ TypeScript組み込みや、ドキュメントの分かりやすさ、記事の多さ
  • コンポーネントの多さ ⇨ 単純なチャートAPIの多さ

参考

まとめ

今回は、Reactで使用するChartライブラリについて調べてみました。個人的には、ドキュメントの豊富なRecharts、React-chartjs-2のどちらかを選択するのがいいと思いました。