はじめに
Next.js の SSG で簡単な線グラフを表示する必要に迫られ、その界隈で使われているライブラリの現状をちょっと調べてみました。以前に同じ界隈のグラフ表示のライブラリを使ったのは 2018 年頃なので、最近の状況を把握する目的もあります。
チャートライブラリは特定の目的のものから汎用的なもの、チャートを簡単に表示するものから部品のラッパー的なものまで多種多様ですが、既に開発が終了/停滞しているプロジェクトも多く、調査にはそれなりに時間がかかってしまいました。
ライブラリ調査/選定について
英語版の Wikipedia に結構まとまっているので、まずはそこから列挙したあとに絞り込んでいきました。今回の利用目的から、非プロプライエタリ、かつ、比較的更新がされており、PC 上の Web ブラウザ上での表示がメインで Reace(Next.js/SSG) で利用でき、オフライン表示も可能なライブラリを選んでいきました。個人的に SVG レンダリングのものをチョイスしてます。全部実際に試した訳ではないので、比較サイトなどの内容などを元に記載しています。
以下、Wikipedia から非プロプライエタリで抽出したものを並べて調査してます。タイトルのリンクはプロジェクトへのリンク（と、もし存在するならリポジトリへのリンク）です。説明中のグラフは、GitHub で確認した 1年以内のコミット数です。GitHub 上の情報（スター数や最終リリースなど）は 令和6年1月中頃に確認した情報をもとに記載していますので、最新の情報とは異なっている可能性があります。もし最新の情報や不足、誤りがあれば是非指摘いただければと思います。
なお、それぞれでサポートしているチャートの数はなんとなくで書いているので、詳しくはプロジェクトのページを参照してください。チャートの分類などがプロジェクトによって違うこともあり、統一した方法で調査できていません。（余裕があれば追記していきたいと思います）
一般的な JS チャートライブラリ（調査対象）
まずは一般的な JavaScript で利用するグラフ表示/生成ライブラリを調査しました。紹介します。なお、さらにそれらの中で React を公式にサポートしているもの、もしくは、プラグインやラッパーとの併用で利用できるものは先の章でご紹介しています。
また、今回の利用目的にそぐわなかったプロジェクトや既にプロジェクトが休眠状態やそれに近い状態プロジェクトは次の章にまとめています。
Vizzu (ソースコード)
Apache 2.0ライセンス、HTML5 キャンバスレンダリング、GitHub スター 1.8k、最終リリース 2023/12/21、Open Issue 10個
アニメーションに重点がおかれているためか、C++ で記述され WebAssenbly としてコンパイルされたものを読み込む形式のライブラリ。開発は活発。サポートされているグラフの種類は普通。Reactなどの外プロジェクトとの連携やサンプルも幾つか提供されている。
VisJS (ソースコード)
Apache 2.0 and MITライセンス、HTML5 キャンバスレンダリング、GitHub スター 1.6k、最終リリース 2023/10/28、Open Issue 220個
他と少し毛色が違い、DOT と呼ばれる graphviz で使われるグラフ記述言語を読み込んでグラフを生成するライブラリ。ソースコードはグラフの種類毎にリポジトリが分かれている。開発は活発というほどではないが継続して更新が続けれられている。
サポートするグラフの種類はあまり多くはないが、他にはあまり見かけない 3D グラフという特徴的なグラフを生成できるという特徴がある。なお、リポジトリの情報は今回の調査対象の線グラフを表示できるものを調査・記載した。
D3.js (ソースコード)
BSD-3ライセンス、SVG レンダリング、GitHub スター、最終リリース 2023/6/3、Open Issue 6個
D3.js は現在でも継続的に開発が続いているチャートライブラリで、非常に多くの種類の図表をサポートしている。表示可能なグラフの種類はかなり多く、多彩なカスタマイズが可能。SVG レンダリングのチャートライブラリといえばこれ。リリースは継続的に行われているが、枯れてきているのか Issue もコミット数もそれほど多くは無い。
ただ、D3.js チャートライブラリというよりは JS による SVG のタグのラッパーという側面があるので、はかゆいところに手が届く反面、今回のようなちょっとグラフを描きたいという向きにはコード量が多くなる傾向にある。また、直接 react で使う場合も面倒なことが多いため、実際に利用する際には他のさらに抽象化したラッパーライブラリを使うことが多いらしい。
Dygraphs (ソースコード)
MITライセンス、HTML5 キャンバスレンダリング、GitHub スター 3.1k、最終リリース 2023/2/16、Open Issue 253個
線グラフのみをサポートしているチャートライブラリ。線グラフに注力することで大量のデータを非常に高速にレンダリングする。線グラフは非常に多彩な表現力を有し、応答性も良くカスタマイズも豊富でインタラクティブなグラフには良さそう。ドキュメントは少なそうに見えるが、線グラフのみなのでそんなものかも。ただ、2023年2月が最終リリースが止まっており、全体的に活動/コミットも活発ではない様子で若干の不安がある。
plotly.js (ソースコード)
MITライセンス、SVG レンダリング、GitHub スター 16.3k、最終リリース 2024/1/6、Open Issue 1500個
Webページトップにあるように数多くの図をサポートするチャートライブラリ。元々は Plotly と呼ばれる Python/Julia/F#/R での分析、統計、グラフ作成を統合したライブラリ群で、その中のチャートライブラリを単独で利用出来るようにした物が Plotly.js。Plotly 自体も含め非常に活発に更新がされており、リリースの頻度も高くスター数も多い。
ドキュメントも良く整備されており、Plotly の一部である dash と呼ばれる分析フレームワークに対して(何故か)自社の Ployly.js ではなく D3.js を react と組み合わせて使うためのドキュメントも公開されているので参考になりそう。
RGraph (ソースコード)
MITライセンス、SVG/HTML5 キャンバスレンダリング、GitHub スター 47、最終リリース 2024/1/10、Open Issue なし
2008年から開発が続いている、こちらも老舗のチャートライブラリ。サポートしている図表の数も多く、ドキュメントも豊富（ただしサイトの作りが古いため読みにくい）。レスポンシブでインタラクティブな機能のサポートもされている。元々は商用だったこともあり、GitHub への移行が 2021 年と最近のためか GitHub スターも極めて少ないが、最近でもそれなりにコードの変更が入っており、リリースも割と頻繁でつい最近も行われている。
サンプルを見ると多彩なカスタマイズが可能なように見えるが、必要なコードの量が少し多いように思える。
RoughViz (ソースコード)
MITライセンス、SVG レンダリング、GitHub スター 6.6k、最終リリース なし、Open Issue 9個
これだけ特殊で、最近チラホラ見る手書き風チャートを作ることのできるライブラリ。ネタ的な紹介のみなので、もちろん対象外で。
一般的な JS チャートライブラリ（調査対象外）
一般的な JavaScript で利用するグラフ表示/生成ライブラリのうち、今回の利用目的にそぐわなかったプロジェクトや、休眠状態、または、長い間更新が無いものをまとめました。ここに記載のプロジェクトはあまり調査していません。
Greylock (ソースコード)
Apache 2.0ライセンス、SVG レンダリング
サポートされているグラフが少なく、ドキュメント以外の最終更新日がおおよそ2016年だったことから詳細調査はスキップ。
JenScript (ソースコード)
BSD-3ライセンス、SVG レンダリング
オープンソースのチャートライブラリだが更新が遙か7年前で止まっているため、対象から除外。
Chart Builder
今回の目的には全く合わないが、Web ブラウザ上で数値を入力してグラフを作れる SaaS 型のアプリ。変わったグラフを数多く作れるのでプレゼン資料など用にちょっと見栄えの良いグラフを作るにはいいと思うが、今回は対象外。
Google Charts
利用は無料
オープンソースではないが無料で利用出来る google 製のチャートライブラリ。有名なので使った方も多いと思うが、導入も簡単で多くのグラフを少ない手間で表示出来る。今回の目的としてはオフラインで表示するようもしておきたいため選択肢からは外すことに。
PlusCharts (ソースコード)
D3.js ベースのオープンソースのチャートライブラリ。5年以上更新されておらず、商用目的での利用も NG のため対象外。
DHTMLX Charts (ソースコード)
GNU GPL v2ライセンス、HTML5 キャンバスレンダリング
サポートしているグラフの種類の数は普通程度。ライセンスは PRO 機能が不要なら GPL 版を利用可能と書かれているが、一方で OSS 以外で利用する場合には購入(有料ライセンス版)しろという記述があるため、正確なところは分からないが、対象外とした。
Webix JS Charts, part of Webix
GNU GPL v3ライセンス、HTML5 キャンバスレンダリング
Webix という UI ライブラリに含まれるチャートライブラリ。サポートしているグラフの種類の数は普通程度。利用するアプリケーションがオープンソースで非商用の場合にのみ GPL 版を利用可能。よって対象外とした。
Dojo Charting, part of Dojo Toolkit (ソースコード)
BSD or AFLライセンス、SVG/HTML5 キャンバスレンダリング
これも他とは少し毛色が異なる。このチャートライブラリは Dojo toolkit と呼ばれるエンタープライズ向けのオープンソース JS ライブラリ群の一部として含まれているもの。Dojo toolkit 自体はまだ開発が続いてはいる（ver 1.7～2.0 で結構モダンに生まれ変わったらしい）。エンタープライズ向けということで詳細調査からは除外。
C3.js (ソースコード)
MITライセンス、SVG レンダリング、GitHub スター 9.3k、最終リリース 2020/8/8、Open Issue 727個
D3.js をもっと手軽に利用したいという人向けに開発されたオープンソースの D3.js のラッパーライブラリ。サポートしている図表の種類の数は普通程度だが最終更新日が4年前と開発が停滞しており、GitHub Issue も積まれていて下で紹介している billboard.js などに開発者が移行していると思われる。実装量は少なく、見た目もスッキリとしていて好んで使っている人もいるようだが、対象外とした。
Cytoscape.js (ソースコード)
MITライセンス、HTML5 キャンバスレンダリング、GitHub スター 9.5k、最終リリース 2023/12/21、Open Issue 18個
生物学研究の分子相互作用ネットワークのビジュアライズのために作られたライブラリ。このためサポートしているグラフはネットワークグラフのみのため、対象外とした。
Frappe Charts (ソースコード)
MITライセンス、SVG レンダリング、GitHub スター 14.9k、最終リリース 2022/4/27、Open Issue 122個
やや少ない種類の図をサポートしているチャートライブラリ。Frappe 自体は様々な製品の集合らしく、チャートライブラリはそのうちの Frappe Charts と呼ばれるもの。そのためWebのリンク先は開発者の紹介記事としてある。
自社製品のために c3.js の代替としてゼロスクラッチから作成されたらしいが、ドキュメントは少なく利用するにはちょっと心細い。見た目や動きは良さそうだしスター数も多いが開発やリリースは今ではそれほど活発では無く、2022年4月を最後にリリースもされていない。GitHub Issue も放置気味なのようなので対象外とした。
Muze (ソースコード)
MITライセンス、SVG レンダリング、GitHub スター 1.2k、最終リリース 2020/7/31、Open Issue 4個
やや少ない種類の図をサポートしているチャートライブラリ。ver 2.0 から WebAssembly によるライブラリに移行して高速化を実現したものの何らかの理由で WebAssembly 部分がクローズドソースに変更されてしまい、そのまま4年前に更新を停止しており GitHub もアーカイブされている。よって対象外とした。
Pizza Amore (ソースコード)
MITライセンス、SVG レンダリング、GitHub スター 415、最終リリース 2014/2/27、Open Issue 20個
そもそもサポートされている図の種類も多くないが、なにより10年以上も更新されていないため対象外で。Webページはよさそうに見えるんだけどな...
Raphaël (ソースコード)
MITライセンス、SVG レンダリング、GitHub スター 11.2k、最終リリース 2019/8/14、Open Issue 314個
VML 及び SVG レンダリングをサポートする 2008 年から開発が開始された老舗のチャートライブラリ。サポートしている図は少なめ。ただ、リリースが 2019 年で止まっていて GitHub Issue も積み上がっており、React/Next.js との組み合わせで問題が出ているという Issue も出ていることから対象外とした。
TeeChart JS
MITライセンス、SVG/HTML5 キャンバスレンダリング
比較的多くの種類の図をサポートしているライブラリだが、Delphi や .NET などモバイルを含む多数のプラットフォーム毎に販売されているライブラリで有料。なのだが、かつては TeeChart for PHP版のみフリーとして公開されていた。しかしそれも 2018 年を最後にリリース/公開が中止され、ディスコンになっている。よって対象外とした。
Chartist (ソースコード)
WTFPL or MITライセンス、SVG レンダリング、GitHub スター 13.3k、最終リリース 2022/11/3、Open Issue 197個
軽量かつシンプルであることに徹したオープンソースのチャートライブラリ。特にレスポンシブ、アニメーション、トランジションに注力してはいるものの、圧縮後で10KBというサイズを実現している。プラグインの形で拡張できるが、サポートしている図の種類は多くはないものの、スター数が1万を超えている注目のプロジェクトではあるようだ。ドキュメントはやや見にくい。
このプロジェクトは2019年までは個人のプロジェクトのような形で細々と開発され、2022年からは別の開発者によるリブートの形で精力的にリリースが続けられてきたが、同年末にぱったりとリリースが止み2023年は一度もリリースされておらずコミットも1件のみで、GitHub Issue も積み上がっている（ただし多くは前任のプロジェクトで起票されたもの）。このようなことから今後の継続性に疑問が生じているため、調査対象外とした。
NVD3 (ソースコード)
MITライセンス、SVG レンダリング、GitHub スター 7.2k、最終リリース 2017/8/24、Open Issue 535個
D3.js をラップしてより簡単にチャートを作れるようにした C3.js と類似のライブラリ。なのだが、リリースが 2017 年で止まってしまっているため対象外とした。
BriteCharts (ソースコード)
サポートチャート 10種、Apache 2.0ライセンス、SVG レンダリング、GitHub スター 3.7k、最終リリース 2017/10/27、Open Issue 5個
これも D3.js をラップしてより簡単にチャートを作れるようにした C3.js と類似のライブラリ。リポジトリの引っ越しがあったためか Issue は極端に少ない。リリースが 2017 年で停止しているため対象外。
ただ、リリースはされていないもののタグは 2023 年も打たれていて v2.18 まで上がっている。公式に react wrapper もある が、こちらもリリースは 2017年が最後、タグは2021年が最後。twitter(X)アカウントもまだ生きているみたいだが...
TauCharts (ソースコード)
MITライセンス、SVG レンダリング、GitHub スター 1.9k、最終リリース 2020/2/26、Open Issue 43個
これも D3.js をラップしてより簡単にチャートを作れるようにした C3.js と類似のライブラリ。なのだが、リリースが 2020 年で止まってしまっているため対象外とした。
React サポートチャートライブラリ（調査対象）
公式に React との連携を謳っているライブラリ群、または、各種チャートライブラリを react/Next.js 連携させるためのラッパープロジェクトをご紹介。
選定の時に注意が必要なのは、サポートされている react のバージョンと（必要なら） SSR サポートでしょうか。あとは、構築の難易度やサンプルの提供状況、APIなどのドキュメントの豊富さあたりが選定基準になると思われます。
同じく、調査対象外としたプロジェクトは次の章にまとめてあります
Victory (ソースコード)
MITライセンス、SVG レンダリング、GitHub スター 10.7k、最終リリース 2024/1/17、Open Issue 276個
普通程度の種類の図をサポートする、React コンポーネントとして提供されているオープンソースのチャートライブラリ。このため、React の採用は必須。開発も2023年前半は停滞気味だったが、最近はまた活発になった。React を使っている場合には非常に簡単に組み込むことができ、チャートはパーツまでちゃんとコンポーネント化されている。
ドキュメントも揃っているが、ちょっとドキュメントの構成が特殊で、かつあっさり気味なので実装の際には少し苦労するかもしれない。
Apache ECharts (ソースコード)
Apache 2.0ライセンス、SVG/HTML5 キャンバスレンダリング、GitHub スター 57.7k、最終リリース 2023/7/18、Open Issue 2200個
Apache ソフトウェア財団(ASF)のプロジェクトのOSS。現在でも活発に開発が続けられており、サポートするグラフの種類も最多。アニメーション効果のサポートも多様かつドキュメントも豊富で SSG での利用も明記されている。Next.js/SSG と組み合わせての記事もある。ただ、ライブラリのサイズがやはり大きくなっているようだ。
ドキュメントは充実している。が Issue が大量にあるので修正が追い付いていない気がする。
echarts-for-react (ソースコード)
MITライセンス、GitHub スター 4.3k、最終リリース 2021/10/29
この ECharts の最大の問題が react のサポート。本家ではサポートしていないためにこのラッパーを使うのをよく見かけるが、更新が2021年より止まっているのが気になるところ。
Recharts (ソースコード)
MITライセンス、SVG レンダリング、GitHub スター 21.7k、最終リリース 2024/1/10、Open Issue 505個
サポートされているチャートの数は多く、細かい設定も可能なSVGレンダリング形式のチャートライブラリ。内部で D3.js を利用しており、また、各種チャートの部品もちゃんと React コンポーネントして提供されている。React18 も対応済み。ドキュメントは豊富でサンプルコードも多いので実装は楽そうだが、細かい機能は意外に無かったりする。デフォルトである程度のアニメーションが組み込まれている。開発/リリースも活発。恐らく、react/Next.js サポートのチャートライブラリの候補として真っ先に名前が挙がるだろうライブラリ。
ApexCharts (ソースコード)
MITライセンス、SVG レンダリング、GitHub スター 13.5k、最終リリース 2023/12/16、Open Issue 318個
オープンソースのチャートライブラリ。サポートしている図表の種類の数は普通程度だが、アニメーションと応答性に優れ、開発/リリースも結構頻繁に行われている。各フレームワークとの組み合わせも Angular.js, Vue.js, React は最初からサンプルが提示されており、コード量も少なめで使いやすそう。Vue/React/Angular/Stencil のためのラッパーが公式で用意されている。
ただし、サンプルがクラスコンポーネントであることと、メインのコンポーネントが一つで、あとは属性として与える形であることには注意が必要。なのと、公式ラッパーの最終リリース日が 2018 年なのが不安。もちろん react 18 は未対応っぽい。
React Charts (ソースコード)
MITライセンス、SVG レンダリング、GitHub スター 2.8k、最終リリース 2020/5/30、Open Issue 50個
名前の通り、React/TypeScript 対応。TanStack Query(旧React Query) の仲間の一つ。D3.js ベース。X/Yチャートのみのサポートだが、Victory 同様に軸などもちゃんと関数コンポーネント化されていてすぐに使えそう。問題は2020年の v2.0.0 のリリース以来、正式リリースが無いこと（ベータなら v2.1.0 とかある）。ただし次のリリース v3.0.0に向けて歩みは遅いものの着々とβリリースは続けられているので、正式リリースされれば一気に最有力候補にはなりそう。
Chart.js (ソースコード)
MITライセンス、HTML5 キャンバスレンダリング、GitHub スター 62.7k、最終リリース 2023/12/5、Open Issue 324個
一番人気と言われるチャートライブラリ。サポートしている図表の種類は普通程度でドキュメントはあっさり気味だが、開発やリリースは割と活発。カスタマイズできる範囲は多くないが、非常に簡単に実装出来ることから人気なのだと思われる。非Reactであれば一番に候補が上がるライブラリ。本体の機能はそれほどでもないが、Awesome Chart.js でプラグイン形式で機能を追加できる模様
React-chartjs-2 (ソースコード)
MITライセンス、SVG レンダリング、GitHub スター 6.2k、最終リリース 2023/1/10、Open Issue 153個
TypeScript 対応の Chart.js の react 向けラッパーライブラリ。これもコンポーネントは一つであとは属性で指定するタイプ。開発がやはりかなり速度低下していてIssueが積みあがっている雰囲気を感じる。react 18 はサポートされているぽい
Ant Design Charts (ソースコード)
MITライセンス、SVG レンダリング、GitHub スター 1.7k、最終リリース 2024/1/15、Open Issue 152個
Alibaba 開発の react/TypeScript 対応チャートライブラリ。チャートの種類が豊富でカスタマイズもかなりできそうで、ドキュメントもまあまあ揃っている感じですが、ドキュメントが一部中国語のみしか提供されていないし、Issue はほぼ中国語なところが玉に瑕。リリースや更新は活発だし見た目も良いので、検討の対象にはなりそう。react 18 は未対応...?
nivo (ソースコード)
MITライセンス、SVG/HTML5キャンバス/HTML レンダリング、GitHub スター 12.3k、最終リリース 2023/11/20、Open Issue 93個
D3.js をベースにした SVG レンダリング形式のOSSチャートライブラリ。公式にSSRサポートを謳っており、react-spring による小気味いいアニメーションも対応。SVGだけではなくHTML5キャンバス形式とネイティブHTMLもサポートしている（ただし、全チャートをサポートしているのはSVGのみ）。
カスタマイズが細かいところまで可能で、ドキュメント上でその変更が確認でき、STORYBOOK も閲覧できるなど充実していて、機能的にもドキュメント的にもかなりいい感じに思える。ただ、普通は存在する Getting Start 的なドキュメントが無いのが不思議だが...。
コミットはそれほど活発ではなく、react 18 はサポートが不完全っぽいが、動いているという issue もある。だたし、リリースはつい最近にも行われていて停滞している感は無い。
Visx (ソースコード)
MITライセンス、SVG レンダリング、GitHub スター 18.2k、最終リリース 2023/12/16、Open Issue 129個
AirBnB製の SVG レンダリング形式のOSSチャートライブラリ。D3.js ベースだが、他のように C3.js 的なライブラリというよりは react で使えるようにラップしたという要素が強い。このため、チャートの部品単位までコンポーネント化されていてカスタマイズはかなりできそうだが、ちゃんとしたチャートを表示させるまでの手数は多そう。一応、利用頻度が高い XYチャートなどについては特別に用意されているが、一方でこのチャートの機能はそれほど多くは無い。
コミットもそれほど活発ではないが、リリースは頻繁に行われている模様。react 18 もサポート済みで Next.js での動作も問題なさそう。 XYChart を少し触ったところ軸についてのバグっぽい挙動に遭遇したので、バグの修正が追い付いていないのかもしれない。
billboard.js (ソースコード)
MITライセンス、SVG レンダリング、GitHub スター 5.7k、最終リリース 2023/11/8、Open Issue 152個
NAVER 社によるオープンソースのチャートライブラリ。活発に開発が行われており、リリースの頻度も多い。上の C3.js の派生プロジェクトのため、C3.js とよく似た UI や API を持つ。C3.js 同様に利用も簡単であるため、使いやすい。他のフレームワークとの組み合わせや比較表もドキュメントにある。ドキュメントも充実。ポスト C3.js の有力候補。
公式で react のラッパーが提供されており、一応メンテナンスもされている模様だが、react 18 のサポートは不明。一つのコンポーネントに属性で各種値を設定するタイプ
React サポートチャートライブラリ（調査対象外）
BizCharts (ソースコード)
MITライセンス、SVG レンダリング、GitHub スター 6.1k、最終リリース 2021/12/7、Open Issue 350個
同じく Alibaba 開発のSVGレンダリング形式のOSSライブラリ。こちらは 2021 年末を境にパッタリとリリースが止んでしまっており、Issue も積みあがっているので対象外とした。
React-Viz (ソースコード)
MITライセンス、SVG レンダリング、GitHub スター 8.6k、最終リリース 2019/4/9、Open Issue 309個
Uber 製のSVGレンダリング形式のOSSチャートライブラリ。2019 年が最終リリースで、コミットもほとんど無く、react 18 へのインストールも現状できないらしいので、対象外とした。（一応、細々と活動はしているようだが）
で、結局何を採用したの？
本記事を公開する結構前（調査途中）で実装を開始してしまったため、最初に visx を検討して最終的に Recharts を採用しました。visx は本文にも書いてある通り XYChart で Y 軸の設定が反映されないバグらしきものに遭遇したため早々と recharts に切り替えました。
その後全部を書き終えた今見てみると、実は nivo を採用したほうが良かったんじゃないかと思ったり...してます。
参考記事
- 英語版Wikipedia
- Reactのチャートライブラリ調査メモ in 2023春
- Next.js(App Router)で使えるチャートライブラリ徹底比較
- billboard.js comparison table
- React Chartライブラリを比較してみた