Webの表現力を高めてくれるのがグラフ、チャートライブラリです。ある時は円グラフ、ある時は棒グラフとニーズは様々です。そのため、多くのグラフに対応していれば、それだけ価値が高まります。 今回はRechartsを紹介します。React用のチャートコンポーネントです。

Rechartsの使い方

グラフのサンプルをスクリーンショット多めで紹介します。まずはシンプルな曲線グラフ。

マウスオーバーで情報を出せます。

小さなグラフもできます。

線の種類を変えた場合。

これは珍しい垂直型。

二軸のグラフを合わせたもの。

途切れた表現もできます。

参考になる線を追加した場合。

エリアグラフ。

パーセント型のエリアグラフ。

棒グラフ。

積み上げ型もできます。

こんな形をカスタマイズした棒グラフも。

範囲を絞れる棒グラフ。

複数のグラフを合わせることもできます。

散布図。

バブルチャート。

二つの軸を持ったパイチャート。

角度を指定したパイチャート。

レーダーチャート。

こんな棒グラフも。面白いですね。

ツリーマップ。

Rechartsでは普段使いそうな多くのグラフに対応しています。しかも、その表現力が多彩で、細かいニーズにも対応できそうです。React製のWebサイトでグラフを使いたいニーズがある場合には大いに役立つことでしょう。

RechartsはJavaScript製のオープンソース・ソフトウェア（MIT License）です。

PieResponsiveContainer | Recharts recharts/recharts: Redefined chart library built with React and D3