📈
Reactのチャートライブラリ調査メモ in 2023春
背景
業務上、グラフを作成することが多いのですが、毎回機能の調査をしている気がしたので、ざっくり特徴をまとめました。
調査したライブラリ
Recharts
- サンプル https://recharts.org/en-US/examples
- 最終リリース 2023/3/16
- SVGベース
- その他
- APIは使いやすく、コード量も少なくて済みそう
- 機能は意外と少ない
- コンポーネントの種類は最低限
- 例えば、Zoom/Pan機能はないため、やろうとすると結構コードを書く必要がありそう
- 実装予定ではある？
https://github.com/recharts/recharts/issues/710#issuecomment-1469068212
- スター数やリリースの頻度を見ると、Reactのチャートライブラリの中では一番最初に検討すべきか
- React18対応済み？ https://github.com/recharts/recharts/issues/2813
ApexCharts
- サンプル https://apexcharts.com/react-chart-demos/
- 最終リリース
- 本体 2023/2/5
- ラッパー a year ago
- SVGベース
- その他
- APIは使いやすく、コード量も少なくて済みそう
- 本体のapexchart.jsとラッパーのreact-apexchartsの両方が必要
- Zoom、CSV/PNGダウンロードなどをフラグ1つで実現できるのがGood
- 結構issueが放置されていたり、botに閉じられていたりするため、普通に使っていてもバグを踏むことが結構ある。。。
- React18未対応？ https://github.com/apexcharts/react-apexcharts/issues/493
Chart.js
- サンプル https://www.chartjs.org/docs/latest/samples/information.html
- 最終リリース
- 本体 2023/2/10
- ラッパー 2023/1/10
- Canvasベース
- その他
- 機能自体は少ないが、色々なpluginを入れることで機能拡張できる
https://github.com/chartjs/awesome
- 機能自体は少ないが、色々なpluginを入れることで機能拡張できる
Apache Echarts
- サンプル https://echarts.apache.org/examples/en/
- 最終リリース
- 本体 3 weeks ago
- ラッパー 2021/10/29
- Canvasベース
- その他
- 本体のechartsとラッパーのecharts-for-reactの両方が必要
- Echarts自体はそれなりに更新されているが、ラッパーの方はあまり更新されていなさそう
- Issueが1割くらい中国語なので辛い
d3
- サンプル https://observablehq.com/@d3/gallery
- 最終リリース 2 weeks ago
- SVGベース
- その他
- チャートライブラリというよりは、svgの機能をラップしたutil群のイメージが近い
- React、TypeScriptと一緒に使うのは相当辛い
- 「グラフを表示する」という目的の上では、他のライブラリでどうしても実現できない場合の最終手段としたいが、それにしてもまずは後述のVisxを検討したい
Visx
- サンプル https://airbnb.io/visx/gallery
- 最終リリース 3 weeks ago
- SVGベース
- その他
- これもチャートライブラリというよりは、d3をReact用に更にラップしたライブラリのイメージが近い
- コード量は多くなるものの、拡張性は高い
- 一応、xychartという他のチャートライブラリのようなAPIもある（が、ズームの実装などは軸のスケールがされなかったりと割と厳しそう）
nivo
- サンプル https://nivo.rocks/storybook/
- 最終リリース 2022/9/9
- その他
- SSR対応を謳っている
- React18対応済み？ https://github.com/plouc/nivo/issues/1964
- 更新頻度があまり高くなさそうなので、詳しくは調べていない
Victory
- サンプル https://formidable.com/open-source/victory/gallery
- 最終リリース 2022/8/5
- その他
- 更新頻度があまり高くなさそうなので、詳しくは調べていない
Ant Design Charts
- サンプル https://charts.ant.design/en/examples/gallery
- 最終リリース 2022/7/19
- その他
- Alibaba
- 機能が多く、特にTree Graphが充実しているのはGood
- Issueが半分くらい中国語なので辛い
- 更新頻度があまり高くなさそうなので、詳しくは調べていない
BizCharts
- サンプル https://bizcharts.taobao.com/product/BizCharts4/gallery
- 最終リリース 2021/12/7
- その他
- Alibaba
- 更新頻度があまり高くなさそうなので、詳しくは調べていない
React Charts
- サンプル https://react-charts.tanstack.com/examples/simple
- 最終リリース 2020/5/30
- その他
- Tanstackシリーズの1つ
- 更新頻度があまり高くなさそうなので、詳しくは調べていない
React-Vis
- サンプル http://uber.github.io/react-vis/examples/showcases/plots
- 最終リリース 2019/4/19
- その他
- Uber
- 更新頻度があまり高くなさそうなので、詳しくは調べていない
結論
個人的な結論としては、現段階ではRechartsをなるべく使用し、難しいものはVisxで対応とすると思います。
Discussion