こんにちは！アルダグラムでエンジニアをしている大木です。昨今若者の間では「なぁぜなぁぜ？」というのが流行っているみたいですね。積極的に使っていこうと思います。
さて今回は、Reactで使えそうなグラフ描画のライブラリはどぉれどぉれ？なのか調査調査？していこうかと思います。
グラフ描画と聞いて筆者がすぐに思いつくのは、やはり「Chart.js」でしょうか。そちらも踏まえて、どういったライブラリがあるのかか調査していこうかと思います。
~はじめに~ 執筆の背景
実際にプロダクトで利用するつもりはなく「どんなものがあるのかな」と気になったので調査してみた、というのが執筆背景です。
エンタープライズ向け製品などで利用する場合にはより細かくユースケースが分かれており、利用するグラフの種類も多いと推測しています。それぞれのライブラリの詳細に踏み込んだ部分には触れられておりませんのでご承知おきください。
実際に作ってみたグラフがこちら
以降で紹介するライブラリのうち、
- react-chartjs-2
- Recharts
- MUI X Charts
の3つに関してはCodeSandboxで実装してみました。簡単に比較してみたい方は以下からお試しいただくことができます。
サンプルでは、それぞれ以下の3つのグラフを実装してみました。
- 棒グラフ
- 折れ線グラフ
- 円グラフ
各ライブラリでは同じデータを扱うようにしており、デザインに関してはグラフ内の色の変更など細かい調整を行うだけで留めています。
調査していく
1. react-chartjs-2
冒頭で触れた Chart.js のReactのラッパーですね。利用できるコンポーネント一覧はこちらから確認できます
実装されたサンプルはこちらから確認できます。それぞれのグラフにCodeSandboxで実装されたサンプルが存在しており、とっつきやすいかと思います。
感想
デザインを調整せずともそれらしいグラフが出来ることに結構感動しました。お手軽に実装できるのはメリットかなと思います。optionsなども豊富にあるため、様々なユースケースに対応できるのはないかと思います。カスタマイズできることの多さが故に、必要なPropsなどをドキュメントから読み取っていくのに少し苦労しました。
実際に使ってみるとこんな感じ
2. Recharts
利用できるコンポーネントの一覧はこちらから確認できます。
実装されたサンプルはこちらから確認できます。執筆時点ではWIPとなっていますが、Storybookからサンプルを確認することも可能なようですね。
感想
Chartsという分類のコンポーネントを親にし、Cartesian Componentsを使ってグラフを描画する、のようにコンポーネントの構造を理解するとかなり使いやすいなと感じました。
共通で使うデータセットさえ用意できれば、どの値を使うかは各グラフごとに決めることができるため、データの取り回しのしやすさがあるかもしれないなと思います。
実際に使ってみる
3. MUI X Charts
利用できるコンポーネントの一覧はこちらから確認できます。
React Chart library - MUI X
実装されたサンプルはそれぞれのページに記載されています。お馴染みのMUIなのでわかりやすいですね。
感想
記述量は他と比べても少ないなと感じました。APIリファレンスも読み慣れたものなためとっつきやすく感じました。
私が調べた限りでは、各グラフの罫線をつけるのは今回使用したバージョンではできない(？)ようです
こっちも実際に使ってみた
4. Visx
Airbnbが開発しているライブラリなようですね。ドキュメントはこちらから確認できます。
サンプルはこちらに記載されています。
感想
他のライブラリと比較しても記述量はそれなりに多くなりそうな所感です。グラフを手軽に実装するためのもの、というよりはカスタマイズ性に特化したライブラリであることが他との大きな差別化ポイントになっていますね。高度なデザインを実現したい場合にはこちらを採用するのも手段としてはありだなと感じました。
5. Victory
ドキュメントはこちらから確認することができます。
サンプルはこちらから
感想
こちらは比較的記述量少なめに実装できそうな所感です。こちらもカスタマイズ性に特化したことを謳っており、ドキュメントもかなり詳細に記載されているように見受けられます。
6. React-vis
Uberがメインとなって開発されているOSSなようです。ドキュメントはこちらから確認することができます。
サンプルはこちらから
感想
こちらもカスタマイズ性を謳っており、かつドキュメントも詳細に記載されているためわかりやすいなと感じました。コンポーネント自体の構造は Recharts に近いかなと感じました。
まとめ
筆者の独断と偏見で、6つのライブラリを選んでご紹介いたしました。デザインの調整をほとんど行わなかったのに、かなりリッチなグラフが描画できかなり感動しています。それぞれ用意されているグラフの種類もかなり豊富に用意されていて魅力的でした。
実際に記述してみると、それぞれ特徴はあれど2・3パターンに大きく分別することができそうだなと感じました。また今回の観点ではパフォーマンス面に関して触れてはいませんでしたが、そういったところでも使いやすさの差分が出るかもしれません。
それぞれの善し悪しを単純には語れませんが、個人的には Visx のようなツールは極めると表現の幅がかなり広がりそうでステキだなぁと思います。これからツール選定をされる方々の一助になれば幸いです。
ご覧いただきありがとうございました！
株式会社アルダグラムのTech Blogです。 世界中のノンデスクワーク業界における現場の生産性アップを実現する現場DXサービス「KANNA」を開発しています。 採用情報はこちら herp.careers/v1/aldagram0508/
Discussion