JSのグラフライブラリを今選ぶならHighchartsで決まり（2020年版）

2015年2月版
2017年1月版
2020年9月 本稿

グラフを描画するライブラリは多種多様に存在する。JavaScriptのグラフライブラリはたくさんあるが、今選択するなら何がよいのか調べてみた。

推薦しておきながら入門記事も少なくてとっつきにくいなぁと思っていたので、自分で書いてみた。→ Highcharts入門

結論

5年経っても変わらず、 Highcharts イチオシ！ トップであり続けるってスゴイ！
理由、圧倒的に使われている（っぽいw）から。下図が Google Trends での各ライブラリの比較。

商用利用は有償、非商用利用なら無料。（詳細は後述）

商用利用の無料にこだわるなら完全無料の Google Charts が第一候補。人気も肉薄している。

Chart.js は、なぜか日本に限ると１番人気（下図）なので、 ググッてブログなんか参考にチャチャッと簡単なグラフを作りたいならこれがいいのかも？

調査

名称	トレンド（世界）	GitHubスター	トレンド（日本）
Highcharts	76（基準）	9.7k	32
Google Charts	68	273	15
Chart.js	31	50.3k	44（基準）
ECharts	23	42.9k	18
D3.js	22	93.7k	27
amCharts	20	782	11
ApexCharts	7	9.3k	7
CanvasJS	5	22	3
NVD3	3
C3.js	2	8.9k	11
jqPlot	2	213	10

トレンド（世界）：すべての国/過去12か月/基準としたキーワードを外さずに数値を取得
トレンド（日本）：日本/過去12か月/基準としたキーワードを外さずに数値を取得

Highcharts

公式サイト：Interactive JavaScript charts for your webpage | Highcharts
デモサイト：Demos / Stock Demos / Maps Demos / Gantt Demos
GitHub：https://github.com/highcharts/highcharts
npm：https://www.npmjs.com/package/highcharts
CDN：https://code.highcharts.com/highcharts.js
ライセンス：商用利用は有償、非営利向け無料ライセンスあり（詳細後述）

推薦しておきながら入門記事も少なくてとっつきにくいなぁと思っていたので、自分で書いてみた。→ Highcharts入門

ライセンス

商用利用は有償。
Developer License ： 535ドル / 96,700円〜

Non-Commercial License ： 無料のライセンス取得にはフォーム申請が必要。個人のサイト、学校のサイト、非営利団体、購入前の試用は利用可能。フォーム申請すると即時メールが返ってきてライセンス取得できる。Creative Commons Attribution-NonCommercial 3.0 が適用される。

特徴

• とにかく綺麗
• オプションで細部までいじれる
• ドキュメントがまとまっていて理解しやすくサンプルも豊富
• スマホにも最適化されている
• SVGベースなのでCSSを駆使すれば見栄えのカスタマイズは自由自在
• 公式のReact向けラッパー Highcharts React がある
• Highcharts入門

Google Charts

公式サイト：Charts | Google Developers
デモサイト：Chart Gallery
GitHub：https://github.com/GoogleWebComponents/google-chart
npm：https://www.npmjs.com/package/@google-web-components/google-chart
CDN：https://www.gstatic.com/charts/loader.js
ライセンス：完全に無料

特徴

• Googleスプレッドシートなど外部のデータソースとの連携が設計に組み込まれている
• 3年間の下位互換性を保証
• HTML5/SVGベース

Chart.js

公式サイト：Chart.js | Open source HTML5 Charts for your website
デモサイト：Samples
GitHub：https://github.com/chartjs/Chart.js
npm：https://www.npmjs.com/package/chart.js
CDN：https://cdnjs.com/libraries/Chart.js
ライセンス: MIT License

特徴

• 日本では１番人気
• HTML5 Canvasベースなので、SVGに比べると柔軟性に欠ける

ECharts

公式サイト：Apache ECharts (incubating)
デモサイト：Examples
GitHub：https://github.com/apache/incubator-echarts
npm：https://www.npmjs.com/package/echarts
CDN：https://cdnjs.cloudflare.com/ajax/libs/echarts/4.8.0/echarts.min.js
ライセンス：Apache-2.0 License

特徴

• 百度（Baidu）が開発元、現在はApache Software Foundationで管理されている
• コミッターはほぼ全員が中国人
• 中国語による情報が豊富
• 百度地图（Baidu Map）と連携する

D3.js

公式サイト：D3.js - Data-Driven Documents
デモサイト：Gallery
GitHub：https://github.com/d3/d3
npm：https://www.npmjs.com/package/d3.js
CDN：https://d3js.org/d3.v6.min.js
ライセンス：BSD license

特徴

• D3.jsをベースにしたり、派生したり、参考にしたライブラリが多数存在する古くから存在する優れたライブラリ
• SVGベース
• DOM操作機能を持つグラフライブラリに留まらない、データに基づいてドキュメントを操作するためのライブラリ

amCharts

公式サイト：JavaScript Charts & Maps - amCharts
デモサイト：Demos
GitHub：https://github.com/amcharts/amcharts4
npm：https://www.npmjs.com/package/amcharts
CDN：下記
ライセンス：Free license（無料）、Single website license（180ドル）、Single App or SaaS website license（1200ドル）等

CDN

<script src="https://cdn.amcharts.com/lib/4/core.js"></script>
<script src="https://cdn.amcharts.com/lib/4/charts.js"></script>
<script src="https://cdn.amcharts.com/lib/4/themes/material.js"></script>
<script src="https://cdn.amcharts.com/lib/4/lang/de_DE.js"></script>
<script src="https://cdn.amcharts.com/lib/4/geodata/germanyLow.js"></script>
<script src="https://cdn.amcharts.com/lib/4/fonts/notosans-sc.js"></script>

特徴

• Highchartsと同等の機能がありながら、Highchartsより安価
• React、Vue.jsなど書くフレームワークとのネイティブに統合されている

ApexCharts

公式サイト：ApexCharts.js - Open Source JavaScript Charts for your website
デモサイト：Demos
GitHub：https://github.com/apexcharts/apexcharts.js
npm：https://www.npmjs.com/package/apexcharts
CDN：https://cdn.jsdelivr.net/npm/apexcharts
ライセンス：MIT license

特徴

• 公式のReact、Vue.js向けラッパーがある
• SVGベース

React向け

React向けはいったんリストアップまで。

• Highcharts React
• React-ChartJS-2
• Recharts
• amCharts
• ApexCharts
• Nivo
• VX
• Victory
• React-Vis
• Rumble Charts
• React JSX Highcharts
• React Easy Chart
• FusionCharts

Recharts

公式サイト：
デモサイト：
GitHub：
npm：
CDN：
ライセンス：

Appendix. その他調査結果

名称	トレンド（世界）	GitHubスター	トレンド（日本）
NVD3	36（基準）	7.1k
jqPlot	28	213
C3.js	24	8.9k	27
dygraphs	22	2.9k	0
morris.js	16
Chartist.js	12	12.3k	0
billboard.js	11
Sigma.js	8
G6 (G6 graph)	7
Flot(Flot Graph)	7
Taucharts	3	1.9k	0
Smoothie Charts	3
uvCharts	0
Frappe	0
roughViz.js	0

CanvasJS

公式サイト：Beautiful HTML5 Charts & Graphs | 10x Fast | Simple API
デモサイト：JavaScript Charts Gallery
GitHub：https://github.com/tsur/canvasjs
npm：https://www.npmjs.com/package/canvasjs
CDN：https://cdnjs.cloudflare.com/ajax/libs/canvasjs/1.7.0/canvasjs.min.js
ライセンス：

NVD3

公式サイト：
デモサイト：
GitHub：
npm：
CDN：

D3.jsを必要とする。

C3.js

公式サイト：
デモサイト：
GitHub：https://github.com/c3js/c3
npm：
CDN：

D3.jsベース。

jqPlot

公式サイト：
デモサイト：
GitHub：https://github.com/jqPlot/jqPlot
npm：
CDN：
ライセンス：

dygraphs

公式サイト：
デモサイト：
GitHub：
npm：
CDN：
ライセンス：

morris.js

公式サイト：
デモサイト：
GitHub：
npm：
CDN：
ライセンス：

Chartist.js

公式サイト：
デモサイト：
GitHub：
npm：
CDN：
ライセンス：

billboard.js

公式サイト：
デモサイト：
GitHub：
npm：
CDN：
ライセンス：

Sigma.js

公式サイト：
デモサイト：
GitHub：
npm：
CDN：
ライセンス：

G6

公式サイト：
デモサイト：
GitHub：
npm：
CDN：
ライセンス：

Flot

公式サイト：
デモサイト：
GitHub：
npm：
CDN：
ライセンス：

Taucharts

公式サイト：
デモサイト：
GitHub：
npm：
CDN：
ライセンス：

Smoothie Charts

公式サイト：
デモサイト：
GitHub：
npm：
CDN：
ライセンス：

jquery.sparkline

公式サイト：
デモサイト：
GitHub：
npm：
CDN：
ライセンス：

uvCharts

公式サイト：
デモサイト：
GitHub：
npm：
CDN：
ライセンス：

Frappe

公式サイト：
デモサイト：
GitHub：
npm：
CDN：
ライセンス：

roughViz.js

公式サイト：
デモサイト：
GitHub：
npm：
CDN：
ライセンス：