Recharts、Chart.js、Nivo、Victory、visx、EChartsのそれぞれで同じ棒グラフを作り、コピーして使えるコードと、実際に測定したバンドルサイズで比較しました。自分に合ったReactのグラフライブラリを選べます。
Reactで作るほとんどのダッシュボードでは、Rechartsがいちばん手早く始められ、Chart.jsはキャンバスに描画するぶんバンドルが小さくなります。完全に独自のデザインを最小のサイズで作るならvisx、洗練された初期設定が欲しいならNivo、React Nativeにも対応したいならVictory、非常に大規模で複雑なグラフならEChartsを選びましょう。私たちは同じグラフをそれぞれのライブラリで作り、実際にサイズを測定しました。
結論だけ知りたい方へ
以下のライブラリはすべて、同じデータから同じ6か月分の棒グラフを描いています。それぞれを単独でバンドルして結果を測定しているので、サイズの表は同じ条件で比較したものになっています。また、Rechartsの例はこのページ上で実際に動いています。
用途によって変わります。一般的なダッシュボードにはRecharts、小さなバンドルで大量のデータを扱うならChart.js、オーダーメイドのデザインにはvisx、データ量の多い複雑なグラフにはEChartsが向いています。このページのサイズの表で、それぞれのコストを確認できます。
グラフがコンポーネントになっていて、スタイルを調整できるSVGとして描画されるため、Reactで自然に使えるのはRechartsです。Chart.jsはキャンバスに描画し、大量のデータ点をうまく処理でき、今回のテストではRechartsの半分以下のサイズでした。
はい。6つともオープンソースです。Recharts、Chart.js、Nivo、Victory、visxはMITライセンス、EChartsはApache 2.0ライセンスで提供されています。
これらのライブラリはブラウザー上で描画し、エフェクトや参照を使うため、グラフのコンポーネントには"use client"が必要です。ただし、データの取得はこれまでどおりServer Componentで行い、プロップスとして渡すことができます。
実測値：棒グラフ1つを圧縮し、gzipした後のサイズ（Reactは含まない）
それぞれの違い
6か月分のWebサイトの訪問数です。以下の各ライブラリは、このデータから同じ棒グラフを描きます。
X軸、Y軸、ツールチップ、棒といった、グラフの構成そのままに読めるコンポーネントを組み合わせて作ります。ResponsiveContainerを使うと、親要素の幅いっぱいに広がります。横に表示されている実際に動くグラフは、このコードで描いています。
Chart.jsはツリーシェイキングに対応しているので、グラフで使う部品だけを登録します。キャンバスに描画するため、数千のデータ点があっても高速に動きますが、アクセシビリティのためのテキストは別途用意する必要があります。
多くのプロップスと見栄えの良い初期設定を持つ、1つのコンポーネントで作ります。ResponsiveBarには、高さを指定した親要素が必要です。
組み合わせて使えるSVGのコンポーネントです。React Native向けにも同じAPI（victory-native）があるので、Webとアプリでグラフのコードを共有したい場合に便利です。
グラフライブラリというより、部品の集まりです。スケールを作り、棒を描くところまで自分で行います。コードは増えますが、すべてを自由に制御でき、今回のテストでは最も小さなバンドルになりました。
すべてを1つのオプションオブジェクトで指定します。echarts-for-reactをインポートするとECharts全体が読み込まれるため、ここでは最も大きなバンドルになります。
echarts/coreからインポートし、使うグラフ、コンポーネント、レンダラーだけを登録します。今回のテストでは、これでバンドルがおよそ半分になりました。
グラフを置く場所が必要ですか？こちらから始めましょう：
月別訪問数の棒グラフ：1月 1,200、2月 1,650、3月 1,420、4月 2,100、5月 2,480、6月 2,310
1月
3月
4月
5月
6月
無料で始める · クレジットカード不要