React Chartライブラリを比較してみた

こんにちは。データアナリティクス事業本部 サービスソリューション部の北川です。

最近、ReactのChartライブラリについて調べる機会があったので、その時の共有です。

今回は、以下の４つを使用してみました。

• Recharts
• react-chartjs-2
• nivo
• victory

Recharts

https://github.com/recharts/recharts

特徴

• React コンポーネントとして使え、素の SVG の描画をサポート
• 画面に表示したいコンポーネントを宣言するだけで描画可能
• Next.jsでは、動的インポートを使用(アラートのみのため、使用しなくても使えることは使えます)
• TypeScript組み込み

チャートAPI

＊　棒グラフ、円グラフなどの基本的なチャートは省きます

• FunnelChart
• SankeyChart
• RadarChart
• Treemap

デザイン例

react-chartjs-2

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

特徴

• Chart.jsのReactコンポーネント
• SankeyChart、FunnelChartがない
• TypeScript組み込み
• Next.jsを使用する際、ケースによっては動的インポート必要

チャートAPI

• RadarChart
• ScatterChart
• BubbleChart

デザイン例

nivo

https://github.com/plouc/nivo

特徴

• コンポーネントの種類は一番多い
• TypeScript未対応のため、定義する必要がある
• Next.jsでは、動的インポートが必要

• ドキュメントが読みづらく、拡張する際は手間がかかりそう

チャートAPI

• FunnelChart
• RadarChart
• SankeyChart
• ScatterChart
• TreeMap

デザイン例

victory

https://github.com/FormidableLabs/victory

特徴

• TypeScript組み込み
• コンポーネントの階層が他と比べて、多くなる印象
• FunnelChart、Sankeyチャートがない

• nivo同様、拡張する際の手間がかかりそう

チャートAPI

• StackChart
• ScatterChart

デザイン例

比較

GitHub(2022.5)

Weekダウンロード

1. recharts
2. react-chartjs-2
3. victory

スター数

1. recharts
2. nivo
3. victory

直近コミット

1. react-chartjs-2 (1ヶ月前)
2. recharts (2ヶ月前)
3. nivo (2ヶ月前)

比較図

完全に個人的な印象になります

• 利便性 ⇨ TypeScript組み込みや、ドキュメントの分かりやすさ、記事の多さ
• コンポーネントの多さ ⇨ 単純なチャートAPIの多さ

参考

まとめ

今回は、Reactで使用するChartライブラリについて調べてみました。個人的には、ドキュメントの豊富なRecharts、React-chartjs-2のどちらかを選択するのがいいと思いました。