Recharts - React用のグラフ/チャートコンポーネント
Webの表現力を高めてくれるのがグラフ、チャートライブラリです。ある時は円グラフ、ある時は棒グラフとニーズは様々です。そのため、多くのグラフに対応していれば、それだけ価値が高まります。 今回はRechartsを紹介します。React用のチャートコンポーネントです。
Rechartsの使い方
グラフのサンプルをスクリーンショット多めで紹介します。まずはシンプルな曲線グラフ。
マウスオーバーで情報を出せます。
小さなグラフもできます。
線の種類を変えた場合。
これは珍しい垂直型。
二軸のグラフを合わせたもの。
途切れた表現もできます。
参考になる線を追加した場合。
エリアグラフ。
パーセント型のエリアグラフ。
棒グラフ。
積み上げ型もできます。
こんな形をカスタマイズした棒グラフも。
範囲を絞れる棒グラフ。
複数のグラフを合わせることもできます。
散布図。
バブルチャート。
二つの軸を持ったパイチャート。
角度を指定したパイチャート。
レーダーチャート。
こんな棒グラフも。面白いですね。
ツリーマップ。
Rechartsでは普段使いそうな多くのグラフに対応しています。しかも、その表現力が多彩で、細かいニーズにも対応できそうです。React製のWebサイトでグラフを使いたいニーズがある場合には大いに役立つことでしょう。
RechartsはJavaScript製のオープンソース・ソフトウェア(MIT License)です。
PieResponsiveContainer | Recharts recharts/recharts: Redefined chart library built with React and D3