📖
React用チャートライブラリ比較検討資料
Reactアプリケーションでチャートなどのデータビジュアライゼーションを表現したい場合に、2024/7現在でどんなライブラリが利用できるかを調査した。
候補は以下のとおり。
調査時点で開発が継続されており、ほどほどにチャートのパターンを網羅しているものを選択している。
共通
- TypeScriptベース
- 関数コンポーネントベース
- 以下の基本的なコンポーネントが整備
- Line
- Area
- Bar
- Scatter
- Pie
Rechart
GitHub: https://github.com/recharts/recharts
Version: v2.12.7
メンテナンス状況
- Issue、Discussionともに機能している
- Issueは少したまり気味
- メジャーバージョンアップはここまで少なめ
- 3系がすでに準備されはじめている
- Exampleを含むドキュメントは豊富
- 10 authors (June 7, 2024 – July 7, 2024)
実現可能範囲
- Rader、TreeMapコンポーネントなどもある
- レスポンシブ対応のために
ResponsiveContainerというレイヤーがある - svg描画
- React依存バージョン: "^16.8.0 || ^17.0.0 || ^18.0.0"
普及度
GitHub star: 23.1k
weekly downloads: 1,681,980
その他
- データ操作はvictory-vendor (victoryの内部パッケージ) に依存。
- つまりD3依存。
- サイズ: 137.7 kB (MINIFIED + GZIPPED)
Victory
GitHub: https://github.com/FormidableLabs/victory
Version: v37.0.2
メンテナンス状況
- 2018年のv30が実質的なスタートっぽいので破壊的変更はほどほどにある感じ。
- リリースドキュメントはきちんとしているので、マイグレーションなどで困ることはなさそう。
- APIドキュメントがExampleを兼ねているような構成。
- 個人的には少し読みにくく感じた。
- ドキュメント量は十分にある。
- 直近１ヶ月はIssueのみでPRはなし。 (June 7, 2024 – July 7, 2024)
実現可能範囲
- Box、Candleコンポーネントなどもある。
- React Native対応。
- ズームやD&D、アニメーションなどの対応が手厚い。
- svg描画 (canvasの実験的機能はある)
- React依存バージョン: ">=16.6.0"
普及度
GitHub star: 10.9k
weekly downloads: 206,668
その他
- d3に依存。
- サイズ: 130.5 kB (MINIFIED + GZIPPED)
nivo
GitHub: https://github.com/plouc/nivo
Version: v0.87.0
メンテナンス状況
- 現状メジャーバージョンアップがない。
- 実際に直近破壊的変更はなさそうだが...
- カタログ的なドキュメントは整備されているが、APIドキュメントや利用ガイド的なものが少なそう。
- 4 authors (June 7, 2024 – July 7, 2024)
実現可能範囲
- Rader、Heatmap、Bullet、Funnel、Boxなど、サポートしているコンポーネントが豊富。
- 全コンポーネントがsvg描画に対応しており、一部がcanvas描画にも対応している。
- React依存バージョン: ">= 16.14.0 < 19.0.0"
普及度
GitHub star: 12.9k
weekly downloads: 394,659 (モノレポなので@nivo/coreで計測)
その他
- d3に依存。
- 一部JSが残っており、マイグレーションプロジェクトが進行中の模様。
-
@nivo/coreが残っているあたりに趣を感じる。
-
- サイズ: 54.4kB (MINIFIED + GZIPPED) (@nivo/core)
@ant-design/charts
GitHub: https://github.com/ant-design/ant-design-charts
Version: v2.1.1
メンテナンス状況
- 基本的にドキュメントは中国語がベース。 (リリースノート、Issueなども含めて)
- 開発は活発そう。
- カタログ、ドキュメントは豊富。(一応英語バージョンがある)
- 1 author (June 7, 2024 – July 7, 2024)
実現可能範囲
- Bullet、Funnel、Box、Stock、Gaugeなど、サポートしているコンポーネントが豊富。
- canvas描画
- React依存バージョン: ">=16.8.4"
普及度
GitHub star: 1.9k
weekly downloads: 49,552
その他
- 自社のツール g2 のラッパー。
- g2はd3に依存。
- サイズ: 315.7kB (MINIFIED + GZIPPED)
@mui/x-charts
GitHub: https://github.com/mui/mui-x/tree/master/packages/x-charts
Version: v7.8.0
メンテナンス状況
- 開発は活発。
- 例のごとくマイナーバージョンでも破壊的変更が入る。
- ドキュメントはわかりやすい印象。
- ここ１年くらいの若いライブラリ。
https://github.com/mui/mui-x/pull/8308
実現可能範囲
- 無料版でGaugeに、有料版でHeatmapやZoomに対応している。
- 今後の対応として、無料版でReader、Treemap、有料版でFunnel、Sanky、Ganttの実装が計画されている。
- レスポンシブ対応のために
ResponsiveChartContainerというレイヤーがある - svg描画
- React依存バージョン: "^17.0.0 || ^18.0.0"
普及度
GitHub star: 3.9k
weekly downloads: 137,122
その他
- d3に依存。
- サイズ: 86.1 kB (MINIFIED + GZIPPED)'
Discussion