この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
こんにちは。データアナリティクス事業本部 サービスソリューション部の北川です。
最近、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
特徴
- コンポーネントの種類は一番多い
- 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ダウンロード
- recharts
- react-chartjs-2
- victory
スター数
- recharts
- nivo
- victory
直近コミット
- react-chartjs-2 (1ヶ月前)
- recharts (2ヶ月前)
- nivo (2ヶ月前)
比較図
完全に個人的な印象になります
- 利便性 ⇨ TypeScript組み込みや、ドキュメントの分かりやすさ、記事の多さ
- コンポーネントの多さ ⇨ 単純なチャートAPIの多さ
参考
まとめ
今回は、Reactで使用するChartライブラリについて調べてみました。個人的には、ドキュメントの豊富なRecharts、React-chartjs-2のどちらかを選択するのがいいと思いました。
12
