📊
Reactベースのチャートツール選定(2022年版)
初めに
何気にzenn初投稿なのでお手柔らかにお願いいたします。
業務でReactを使用しており、チャートツールの導入を行う際に良さそうなライブラリを調査しました。
※スター数は調査時点での数です
サンプル実装
全部ではないですが、棒グラフを自分で実装してみました。参考にどうぞ。
調査基準(選定基準)
- Reactベースであること
- 定期的にメンテナンスがされていること
- スター数がある程度多いこと
- チャートが見やすいこと
- できることが多いこと(チャート数が多いこと)
- 開発していてモチベが上がりそうなこと(モチベ大事)
今回調査したライブラリ
react-chartjs-2
[特徴]
- Chart.jsベースのコンポーネント
- スター数: 5.3k
Ant Design Charts
[特徴]
- G2Plot, G6, X6, L7Plotベース(これらが何かは知らない)
- スター数: 1.2k
- マップ表示ができる(対応地域は未調査)
サンプルめっちゃ多い
Recharts
[特徴]
- D3を使っているらしい
- スター数: 18.8k
- SVGサポート
同じくサンプル結構ある
VICTORY
[特徴]
- React Nativeでも使えるみたい
- スター数: 9.9k
なんかデザインカッコ良い
visx
[特徴]
- Airbnb製
- D3使っている
-
Not a charting library.あれ、チャートライブラリじゃない？？- チャート機能あるっぽいから一応候補として
- スター数: 15.7k
めっちゃカラフル。全体的に使うと目がチカチカしそうだから部分的に使用するには良さそう。
nivo
[特徴]
- D3使っている (今流行ってる？？)
- スター数: 10.4k
- マップ使えそう
実装サンプル沢山用意してくれているので良さそうな印象
BizCharts
[特徴]
- ドキュメントが中国語・・・
- スター数: 5.9k
- 拡張しやすいみたい
サンプルは豊富。ただ、せめて英語のドキュメントが欲しいところ・・・
React Charts
[特徴]
- シンプルかつ、インタラクティブなチャートを提供
- スター数: 2.1k
- まだベータ版みたい
個人的には綺麗で好きなUI
すごくいい感じなので、正式リリースしたらちょっと触ってみたい。
まとめ
- Reactベースのチャートライブラリは結構豊富なので、プロダクトにマッチするかで選定しようと思う
- ライブラリはD3.jsを使用するのが主流みたい
- どこもドキュメントやサンプルが充実している
ざっとこんな感じで、今後はプロダクトに合わせてこちらの記事を見返して適材適所で使いたいと思います。
Discussion
他よりスター数が少ないですが、ApexCharts はどうでしょうか？
コメントありがとうございます！
おお！可愛いUIですね。
参考にさせていただきます。