Next.js(App Router)で使えるチャートライブラリ徹底比較

背景

現在、インターン先で Next.js を使用した開発をしており、その中でチャートを作成する機会がありました。
また、いくつかチャートライブラリは存在するものの実務で使えそうなものを探すのに苦労する人がいるのでは?と思い今回、本記事を書きました。
デザインやカスタマイズ性、使いやすさを考慮しておすすめな React 製チャートライブラリ 5 選を紹介します。
なお、サンプルコードは開発現場に合わせて Next.js(App Router)×Typescript で載せています。
! 簡潔に要点を知りたい方は、まとめをご覧ください。

比較

! 情報は執筆時点(2023/08/23)のものになります。 チャートの種類の数は、大まかに算出しています。

React Charts

特徴

一般的に 2 つのチャートのポイントが縦軸同じであれば 2 つのポイントにフォーカスが当たる一方で、こちらは 1 つ 1 つの点にフォーカスが当たるのでそこが他のライブラリにはない魅力です。また、useMemo が使えるので、パフォーマンス重視であればおすすめです。
一方デフォルトでは、ラベルを押すなどしてチャートの表示・非表示する機能は提供されてないようです。他にもレスポンシブ対応するようなコンポーネントは用意されておらず div で囲って対応する必要があります。
チャートライブラリのドキュメントの example がクラスコンポーネントが多い中で、これは関数コンポーネントなので、使う側としてはありがたいです。ただドキュメントに関していうと、他と比べてそこまで充実していない印象です。
チャートの種類:約 12 種類
LineChart, BarChart, Bar (Stacked)Chart, Bar (Horizontal)Chart, Bar (Horizontal + Stacked), BandChart, AreaChart, BubbleChart, SteamChart, Spark Chart, Multiple Axes, Interaction Modes
最終リリース:2020 年 5 月 30 日
週間ダウンロード数:18,138
Github star 数:2,592

Victory

特徴

コンポーネントを組み合わせることでチャートができます(Recharts に似ている)。デフォルトで tooltip が提供されていないので、チャートにフォーカスを当てても詳細が表示されなかったです(カスタマイズすれば追加できる)。各チャートで拡張できるものを網羅的に公式ドキュメントにまとまっているため、高度な設定を必要とする場合はおすすめです。
チャートの種類:約 15 種類
VictoryBoxPlot / VictoryArea / VictoryAxis / VictoryBar / VictoryCandlestick / VictoryChart / VictoryErrorBar / VictoryGroup / VictoryLine / VictoryPie / VictoryPolarAxis / VictoryScatter / VictoryStack / VictoryVoronoi / VictoryHistogram
最終リリース:2022 年 8 月 5 日
週間ダウンロード数:199,854
Github star 数:10,461

React-chartjs-2

特徴

datasets で、各チャート毎にスタイルを指定できたり、拡張性が高く扱いやすいです。
ラベルを押すと、そのチャートが表示・非表示されるようになっています。
また、その際アニメーションが有効になっており、トランジションがおしゃれだなと感じました。
ただ使用時に、インポートするものが多いのとチャート内で使用するものを register に登録しておく必要があるのが欠点だなと思いました。
チャートの種類:約 17 種類
Vertical Bar Chart / Horizontal Bar Chart / Stacked Bar Chart / Grouped Bar Chart / Area Chart / Line Chart / Multiaxis Line Chart / Pie Chart / Doughnut Chart / Polar Area Chart / Radar Chart / Scatter Chart / Bubble Chart / Multitype Chart / Chart Events / Get Chart Ref / Gradient Chart
最終リリース:2023 年 1 月 10 日
週間ダウンロード数:949,021
Github star 数:6,067

Recharts

特徴

必要な要素をコンポーネント毎に組み合わせてチャートが出来上がるため、細かな設定がしやすいです。特に、ラインの追加はコンポーネントを追加するだけなので使いやすいです。チャートの種類もめちゃくちゃ多いので、安定にして王道って感じですね。
カスタマイズ要素も多いので、実務向きだと思います。
チャートの種類:約 65 種類
LineChart(16 種類) / AreaChart(8 種類) / BarChart(14 種類) / ComposedChart(5 種類) / ScatterChart(7 種類) / RaderChart(2 種類) / RadialBarChart(1 種類) / TreeMap(2 種類)/ etc..
最終リリース:2023 年 8 月 9 日
週間ダウロード数:1,252,836
Github star 数:20,858

Ant Design Charts

特徴

config 内でチャートの詳細な設定が行えます。条件に応じて lineStyle を変えたり、ラベルを押すことで、各チャートの表示・非表示ができるので比較の際に便利です。また tooltip の情報やスタイルも変えられるので、カスタマイズ性は非常に高いです。公式ドキュメントは中国語ですが、英訳もあり総合的に見て一番使いやすいです。とにかく、チャートの種類が豊富でかつ、ビジュアルも良いので一般向けのプロダクトには是非導入すべきチャートライブラリです。
チャートの種類:70 種類以上
Flowchart(1 種類) / Relation Graph(8 種類) / LineChart(3 種類) / Area(3 種類) / Column(5 種類) / Bar(5 種類) / Pie(2 種類) / Dual Axes(5 種類) / Progress Plots(3 種類) / Scatter and Bubble(2 種類) / Rose(3 種類) / Relation Plots(2 種類) / Heatmap(2 種類) / Tiny Plots(5 種類)
*他にもありましたが、細かいので省略します。
最終リリース:2022 年 7 月 19 日
週間ダウンロード数:62,628
Github star 数:1,598

まとめ

表にまとめると以下のようになります。
チャートの種類最終リリース週間ダウンロード数Github star 数
React Charts約 12 種類2020 年 5 月 30 日18,1382,592
Victory約 15 種類2022 年 8 月 5 日199,85410,461
React-chartjs-2約 17 種類2023 年 1 月 10 日949,0216,067
Recharts約 65 種類2023 年 8 月 9 日1,252,83620,858
Ant Design Charts約 70 種類以上2022 年 7 月 19 日10,4611,598
ランキングは以下のようになります。

チャートの種類

  1. Ant Design Charts
  1. Recharts
  1. React-chartjs-2

最終リリース日

  1. Recharts
  1. React-chartjs-2
  1. Victory

週間ダウンロード数

  1. Recharts
  1. React-chartjs-2
  1. Victory

Github star 数

  1. Recharts
  1. Victory
  1. React-chartjs-2

種類の比較

RechartsReact-chartjs-2React ChartsVictoryAnt Design Charts
Line⚪︎⚪︎⚪︎⚪︎⚪︎
Bar⚪︎⚪︎⚪︎⚪︎⚪︎
Area⚪︎⚪︎⚪︎⚪︎⚪︎
Sankey⚪︎---⚪︎
Funnel⚪︎---⚪︎
Pie⚪︎⚪︎-⚪︎⚪︎
Radial Bar⚪︎--⚪︎⚪︎
Radar⚪︎⚪︎-⚪︎⚪︎
Polar Area-⚪︎-⚪︎⚪︎
Scatter⚪︎⚪︎-⚪︎⚪︎
Bubble⚪︎⚪︎⚪︎⚪︎⚪︎
Bullet----⚪︎
Gantt-----
Histogram---⚪︎⚪︎
Box Plot---⚪︎⚪︎
Candlestick----⚪︎
Heatmap----⚪︎
Treemap⚪︎---⚪︎
Org Chart----⚪︎
Gauge----⚪︎
Geo Chart----⚪︎
Flow Chart/Graph----⚪︎
まとめてみると、 Recharts が一番使われている印象ですね。また、種類に関して言うと Ant Design Charts が圧倒的に多いですね。
弊社でも、ビジュアルと種類の豊富さから Ant Design Charts を採用しています。一方で、まだ認知度が低く具体的な使い方に関しての記事が少ないので、今後記事を書く予定です。
また気になったライブラリがあれば、ソースコードも貼ってあるので実際に触ってみて頂ければと思います!
今後のチャートライブラリ選びの参考にして頂ければ幸いです。