📊

Reactベースのチャートツール選定(2022年版)

2022/09/01に公開約2,900字2件のコメント

初めに

何気にzenn初投稿なのでお手柔らかにお願いいたします。

業務でReactを使用しており、チャートツールの導入を行う際に良さそうなライブラリを調査しました。
※スター数は調査時点での数です

サンプル実装

全部ではないですが、棒グラフを自分で実装してみました。参考にどうぞ。

調査基準(選定基準)

  • Reactベースであること
  • 定期的にメンテナンスがされていること
  • スター数がある程度多いこと
  • チャートが見やすいこと
  • できることが多いこと(チャート数が多いこと)
  • 開発していてモチベが上がりそうなこと(モチベ大事)

今回調査したライブラリ

react-chartjs-2

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

[特徴]

  • Chart.jsベースのコンポーネント
  • スター数: 5.3k

Ant Design Charts

https://charts.ant.design/en
https://github.com/ant-design/ant-design-charts

[特徴]

  • G2Plot, G6, X6, L7Plotベース(これらが何かは知らない)
  • スター数: 1.2k
  • マップ表示ができる(対応地域は未調査)

サンプルめっちゃ多い

https://charts.ant.design/en/examples/gallery

Recharts

https://recharts.org/en-US
https://github.com/recharts/recharts

[特徴]

  • D3を使っているらしい
  • スター数: 18.8k
  • SVGサポート

同じくサンプル結構ある

https://recharts.org/en-US/examples

VICTORY

https://formidable.com/open-source/victory/
https://github.com/FormidableLabs/victory

[特徴]

  • React Nativeでも使えるみたい
  • スター数: 9.9k

なんかデザインカッコ良い

https://formidable.com/open-source/victory/gallery

visx

https://airbnb.io/visx
https://github.com/airbnb/visx/

[特徴]

  • Airbnb製
  • D3使っている
  • Not a charting library. あれ、チャートライブラリじゃない??
    • チャート機能あるっぽいから一応候補として
  • スター数: 15.7k

めっちゃカラフル。全体的に使うと目がチカチカしそうだから部分的に使用するには良さそう。

https://airbnb.io/visx/gallery

nivo

https://nivo.rocks/
https://github.com/plouc/nivo

[特徴]

  • D3使っている (今流行ってる??)
  • スター数: 10.4k
  • マップ使えそう

実装サンプル沢山用意してくれているので良さそうな印象

https://nivo.rocks/bar/

BizCharts

https://bizcharts.taobao.com/products/bizCharts
https://github.com/alibaba/BizCharts

[特徴]

  • ドキュメントが中国語・・・
  • スター数: 5.9k
  • 拡張しやすいみたい

サンプルは豊富。ただ、せめて英語のドキュメントが欲しいところ・・・

https://bizcharts.taobao.com/product/BizCharts4/gallery

React Charts

https://react-charts.tanstack.com/
https://github.com/TanStack/react-charts

[特徴]

  • シンプルかつ、インタラクティブなチャートを提供
  • スター数: 2.1k
  • まだベータ版みたい

個人的には綺麗で好きなUI

すごくいい感じなので、正式リリースしたらちょっと触ってみたい。

まとめ

  • Reactベースのチャートライブラリは結構豊富なので、プロダクトにマッチするかで選定しようと思う
  • ライブラリはD3.jsを使用するのが主流みたい
  • どこもドキュメントやサンプルが充実している

ざっとこんな感じで、今後はプロダクトに合わせてこちらの記事を見返して適材適所で使いたいと思います。

Discussion

ログインするとコメントできます