フロントエンド開発におけるチャートライブラリの選定
apexcharts、chart.js、echarts、recharts は、ウェブアプリケーションでデータを視覚化するための主要なライブラリです。それぞれ描画エンジン（SVG または Canvas）やフレームワークとの統合方法が異なり、プロジェクトの要件に応じて適切な選択が必要です。recharts は React 専用ですが、他はフレームワークを選ばないコアライブラリとして提供されています。
npmのダウンロードトレンド
GitHub Starsランキング
統計詳細
apexcharts vs chart.js vs echarts vs recharts：技術選定の深い比較
ウェブ開発においてデータを可視化する際、apexcharts、chart.js、echarts、recharts の 4 つは頻繁に候補に上がります。これらはすべて優れたライブラリですが、内部の仕組みと得意分野が異なります。アーキテクトとして、単に「使える」かどうかではなく、描画方式やフレームワークとの相性を理解して選ぶ必要があります。
🎨 描画エンジン：SVG と Canvas の違い
チャートライブラリを選ぶ際、最初に確認すべきは描画エンジンです。SVG は DOM 要素として扱えるためアクセス性が良く、Canvas はピクセル描画のため大量のデータに強いという特徴があります。
apexcharts は SVG を使用します。
- 各要素が DOM ノードになるため、CSS やイベント処理が簡単です。
- アニメーションが滑らかで、インタラクション実装が容易です。
// apexcharts: SVG ベース
const options = {
chart: { type: 'line' },
series: [{ name: 'sales', data: [30, 40, 35] }]
};
// DOM 操作や CSS スタイル適用が容易
chart.js は Canvas を使用します。
- 描画が高速ですが、個々の要素に直接イベントを付与できません。
- ヒット検出はライブラリ内部で行われます。
// chart.js: Canvas ベース
const data = {
datasets: [{
label: 'sales',
data: [30, 40, 35]
}]
};
// キャンバス全体として描画される
echarts は Canvas をデフォルトとし、SVG に切り替え可能です。
- 大規模データでもパフォーマンスが落ちにくい設計です。
- 設定で
renderer: 'svg'を指定すれば SVG モードにできます。
// echarts: Canvas または SVG
const option = {
series: [{
type: 'line',
data: [30, 40, 35]
}]
};
// 大量のデータポイントでも高速に動作
recharts は SVG を使用します。
- React コンポーネントとして構築されているため、SVG 要素を直接制御できます。
- カスタム形状や複雑なレイアウト作成に適しています。
// recharts: SVG ベース
<LineChart width={500} height={300} data={data}>
<Line type="monotone" dataKey="value" />
</LineChart>
// SVG 要素を JSX で直接記述
⚛️ React との統合方法
React アプリケーションで使用する際、ライブラリごとの統合コストが異なります。ネイティブ対応か、ラッパーが必要かで開発体験が変わります。
apexcharts は公式ラッパー react-apexcharts があります。
- props で設定を渡す形式です。
- 状態変更時にチャートが再描画されます。
// apexcharts + React
import ReactApexChart from 'react-apexcharts';
function Chart() {
return <ReactApexChart options={options} series={series} />;
}
chart.js は公式ラッパー react-chartjs-2 があります。
- Canvas 要素をラップしています。
- データ配列が変わると自動的に更新されます。
// chart.js + React
import { Line } from 'react-chartjs-2';
function Chart() {
return <Line data={chartData} options={chartOptions} />;
}
echarts はコミュニティ製ラッパー echarts-for-react が主流です。
- 公式の React バインディングはありません。
- 設定オブジェクトを渡して使用します。
// echarts + React
import ReactECharts from 'echarts-for-react';
function Chart() {
return <ReactECharts option={option} />;
}
recharts は React 専用ライブラリです。
- ラッパー不要で、そのままコンポーネントとして使えます。
- React の状態管理と最も相性が良いです。
// recharts: Native React
import { LineChart, Line } from 'recharts';
function Chart() {
return <LineChart data={data}><Line dataKey="value" /></LineChart>;
}
🛠️ カスタマイズ：ツールチップの例
グラフの詳細表示部分（ツールチップ）のカスタマイズは、ライブラリによって難易度が異なります。
apexcharts は設定オブジェクトで関数を定義します。
- HTML 文字列を返す形式です。
- 自由度は高いですが、JSX は使えません。
// apexcharts tooltip
const options = {
tooltip: {
custom: function({ series, seriesIndex, dataPointIndex, w }) {
return '<div>' + series[seriesIndex][dataPointIndex] + '</div>';
}
}
};
chart.js は設定オブジェクトでコールバックを使います。
- Canvas 上に描画されるため、HTML 要素の制御は制限されます。
- 外部ツールチップモードを使うと DOM 要素を制御できます。
// chart.js tooltip
const options = {
plugins: {
tooltip: {
callbacks: {
label: function(context) {
return 'Value: ' + context.parsed.y;
}
}
}
}
};
echarts は設定オブジェクトで formatter を使います。
- 豊富なフォーマットオプションがあります。
- HTML 返却も可能です。
// echarts tooltip
const option = {
tooltip: {
formatter: function(params) {
return 'Value: ' + params.value;
}
}
};
recharts はコンポーネントを渡します。
- JSX で自由にツールチップを設計できます。
- React の状態やスタイルをそのまま使えます。
// recharts tooltip
function CustomTooltip({ payload }) {
return <div className="custom-tooltip">{payload[0].value}</div>;
}
<Tooltip content={<CustomTooltip />} />
🚀 パフォーマンスとデータ量
扱うデータサイズによって、推奨されるライブラリが変わります。
apexcharts：中規模データに向いています。SVG のため要素が増えると重くなります。chart.js：小〜中規模データに向いています。Canvas のため SVG より軽いですが、複雑な描画は苦手です。echarts：大規模データに最強です。10 万件のデータポイントでも最適化されています。recharts：中規模データに向いています。React の再描画コスト影響を受けるため、データ更新頻度には注意が必要です。
📊 比較まとめ
| 特徴 | apexcharts | chart.js | echarts | recharts |
|---|---|---|---|---|
| 描画 | SVG | Canvas | Canvas / SVG | SVG |
| React | ラッパー必要 | ラッパー必要 | ラッパー必要 | ネイティブ対応 |
| 設定 | オブジェクト | オブジェクト | オブジェクト | JSX コンポーネント |
| データ量 | 中 | 小〜中 | 大 | 中 |
| カスタム | 設定関数 | 設定関数 | 設定関数 | JSX コンポーネント |
💡 結論
apexcharts は、設定だけで綺麗なグラフが欲しい場合に最適です。標準的なダッシュボード作成で時間を節約できます。
chart.js は、シンプルさと軽快さを求める場合に適しています。シンプルな統計グラフならこれが十分です。
echarts は、大量データや特殊なグラフが必要な場合に選定します。パフォーマンス重視のプロジェクト向けです。
recharts は、React アプリケーションで細かな制御をしたい場合に選定します。コンポーネントとしての統合性を最も重視すべきです。
最終的には、プロジェクトのデータ規模と、フレームワークとの統合コストを天秤にかけて決定してください。
選び方: apexcharts vs chart.js vs echarts vs recharts
- apexcharts:
設定ファイルだけで見栄えの良いチャートが欲しい場合に選定します。SVG ベースでアニメーションが滑らかであり、React 用ラッパーも公式に提供されています。ドキュメントが豊富で、標準的なビジネスチャートを手早く実装したいプロジェクトに適しています。
- chart.js:
単純なグラフを軽量に実装したい場合に選定します。Canvas ベースで動作し、設定がシンプルです。React 使用する場合は公式ラッパー
react-chartjs-2を併用します。複雑な機能よりも、手軽さと軽快さを優先する際に有効です。 - echarts:
大量のデータや複雑な相互作用を扱う場合に選定します。Canvas および SVG モードをサポートし、パフォーマンスに優れています。地理情報や大規模な散布図など、特殊なチャートが必要な場合に強力な選択肢となります。
- recharts:
React のコンポーネント構造でグラフを制御したい場合に選定します。SVG ベースで、チャートの要素を JSX コンポーネントとして記述できます。React の状態管理と密接に連携させたい場合や、カスタマイズ性を重視する際に適しています。
人気の比較
apexcharts のREADME
ApexCharts
Modern, interactive JavaScript charts your users will love - built for dashboards, SaaS, and data-heavy UIs.
Live demos · Documentation · License
Why ApexCharts
- 16+ chart types out of the box — line, area, bar, column, pie, donut, radar, heatmap, treemap, candlestick, boxplot, funnel, pyramid, gauge and more
- SSR support for Next.js, Nuxt, SvelteKit, Astro, and other meta-frameworks — render real SVG on the server, hydrate on the client
- Tree-shakable — import only the chart types and features you need; typical bundles are 30–60% smaller than the full build
- TypeScript-first — full type definitions ship with the package, no
@types/*install needed - Zero runtime dependencies — no React/Vue/D3 required; works in any framework or vanilla JS
- Accessibility — keyboard navigation and ARIA support built in
- Free for most users — see License
Install
npm install apexcharts
Or via CDN:
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
Quick start
import ApexCharts from 'apexcharts'
const chart = new ApexCharts(document.querySelector('#chart'), {
chart: { type: 'bar' },
series: [{ name: 'Sales', data: [30, 40, 35, 50, 49, 60, 70, 91, 125] }],
xaxis: { categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999] }
})
chart.render()
Browse 100+ ready-to-use samples — copy, paste, ship.
Chart types
- Line · Area · Range Area
- Bar · Column · Range Bar / Timeline
- Scatter · Bubble
- Candlestick · BoxPlot
- Pie · Donut · Polar Area · Radial Bar / Gauge
- Radar · Heatmap · Treemap
- Funnel
Combine any of the above as mixed/combo charts, stacked variants, sparklines, or synchronized multi-chart layouts.
Framework wrappers
Official:
- React — react-apexcharts
- Vue 3 — vue3-apexcharts
- Vue 2 — vue-apexcharts
- Angular — ng-apexcharts
- Blazor — Blazor-ApexCharts
- Stencil — stencil-apexcharts
Community:
- Svelte — svelte-apexcharts
- Ruby — apexcharts.rb
- Laravel — larapex-charts
- R — apexcharter
Server-side rendering
Render chart HTML on the server, then hydrate in the browser. Works with Next.js, Nuxt, SvelteKit, Astro, Remix, and any Node-based framework.
// Server
import ApexCharts from 'apexcharts/ssr'
const chartHTML = await ApexCharts.renderToHTML({
chart: { type: 'bar' },
series: [{ data: [30, 40, 35, 50, 49, 60, 70, 91, 125] }],
xaxis: { categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999] }
}, { width: 500, height: 300 })
// Returns hydration-ready HTML with embedded SVG
// Client
import ApexCharts from 'apexcharts/client'
ApexCharts.hydrate(document.getElementById('my-chart'))
// or: ApexCharts.hydrateAll()
No more dynamic(() => import(...), { ssr: false }) workarounds — the chart renders on the server and becomes interactive on hydration.
Tree-shaking — ship only what you use
By default import ApexCharts from 'apexcharts' includes everything. For smaller bundles, import from apexcharts/core and add only what you need:
import ApexCharts from 'apexcharts/core' // bare class — no chart types, no features
// Chart types (match the value of chart.type)
import 'apexcharts/line'
import 'apexcharts/bar'
// import 'apexcharts/area'
// import 'apexcharts/scatter'
// Optional features
import 'apexcharts/features/legend'
import 'apexcharts/features/toolbar' // zoom/pan toolbar
// import 'apexcharts/features/exports' // SVG/PNG/CSV download
// import 'apexcharts/features/annotations'
// import 'apexcharts/features/keyboard' // keyboard navigation
See the tree-shaking guide for the complete list of entry points.
Browser support
ApexCharts works in all modern evergreen browsers (Chrome, Firefox, Safari, Edge). For server-side rendering, Node.js 18+ is required.
Documentation
Contributing
npm install
npm run dev # vite build --watch
npm test # e2e + unit
See CONTRIBUTING.md for setup, coding conventions, and PR guidelines.
License
ApexCharts uses a revenue-based license:
- Free for individuals, and organizations with under $2M USD in annual gross revenue — including commercial and internal use. No registration required.
- Commercial license required for organizations at or above $2M USD annual gross revenue.
Full terms: apexcharts.com/license
Need an enterprise data grid?
We've partnered with Infragistics, creators of Ignite UI — high-performance data grids that handle unlimited rows and columns, with custom templates and real-time updates.
Available for:
Angular · React · Blazor · Web Components · jQuery
Contact
- Issues & bugs: GitHub Issues
- Questions: GitHub Discussions
- Email: info@apexcharts.com