apexcharts

ApexCharts AI スキル

フレームワークラッパーの検出 — コードを生成する前に package.json を確認してください。

• react → コア API ではなく react-apexcharts を使用します。
• vue（Vue 3）→ vue3-apexcharts を使用します。Vue 2 → vue-apexcharts を使用します。
• @angular/core → ng-apexcharts を使用します。

ラッパーはアンマウント時に destroy() を自動的に処理し、リアクティブなプロパティを受け付け、イベントを各フレームワークに適したイベントとして転送します。フレームワークが検出されない場合、またはユーザーが明示的にバニラを希望した場合にのみ、コア API を直接使用してください。references/framework-wrappers.md を参照してください。 ApexCharts v8 が対象です。 チャートや機能のコードを書く前に、次のボックスをお読みください。デフォルトバンドルには、すべてのチャートタイプや機能が含まれているわけではありません。

⚠️ v8.0 の破壊的変更：3 つのチャートタイプと 4 つの機能がデフォルトバンドルから外れました。 import ApexCharts from 'apexcharts'（スクリプトタグの場合：dist/apexcharts.min.js）では、line、area、scatter、bubble、rangeArea、bar（および column）、rangeBar、candlestick、boxPlot、histogram、funnel、pyramid、pie、donut、polarArea、radialBar、gauge、radar、heatmap、treemap に加えて、軸、ツールチップ、および Tier 1 機能（exports、legend、toolbar、annotations、keyboard navigation、morph、stats、themes（Facet）、plugins（Weave）、custom series（Marks）が登録されます。それ以外はすべて Tier 2 です。パッケージには含まれていますが、デフォルトバンドルには含まれず、隣に独自のインポートを追加することで利用できます。

import ApexCharts from 'apexcharts'
import 'apexcharts/sunburst'             // Tier 2 のチャートタイプ
import 'apexcharts/features/drilldown'   // Tier 2 の機能

<script src=".../dist/apexcharts.min.js"></script>
<script src=".../dist/sunburst.js"></script>
<script src=".../dist/features/drilldown.js"></script>

Tier 2	apexcharts と並べてインポート	スクリプトタグ	Tier 2 になったバージョン
unit とその waffle エイリアス	apexcharts/unit	dist/unit.js	8.0
sunburst	apexcharts/sunburst	dist/sunburst.js	8.0
violin	apexcharts/violin	dist/violin.js	8.0
icicle	apexcharts/icicle	dist/icicle.js	7.6（新規）
raincloud	apexcharts/raincloud（violin レンダラーと raincloud 機能）	dist/violin.js、続けて dist/features/raincloud.js	7.1（新規）。8.0 以降は violin が必要
drilldown、および waterfall、dumbbell、streamgraph の各チャートタイプ	apexcharts/features/<name>	dist/features/<name>.js	8.0
highlight-filter（highlightFilter）	apexcharts/features/highlight-filter	dist/features/highlight-filter.js	7.9（新規）
trellis、storyboard、perspectives、ink、renderer-canvas、link、measure、history、context-menu	apexcharts/features/<name>	dist/features/<name>.js	7.0

Waterfall と dumbbell は rangeBar を通じて描画され、streamgraph はデフォルトバンドルに含まれる rangeArea を通じて描画されるため、追加するのは機能だけです。Storyboard は Perspectives を登録するため、両方をインポートしても、Storyboard だけをインポートする場合とコストは変わりません。

フルバンドル（v8.0）では、すべての機能を一度に読み込みます。バンドラーでは import ApexCharts from 'apexcharts/full'、スクリプトタグでは dist/apexcharts.full.min.js を使用します。すべてのチャートタイプと機能に加えて、unit-shapes と pictograms のカタログも含まれており、追加のインポートは不要です（プレミアム項目には引き続きライセンスが必要です）。8.0.0 での gzip 圧縮後のサイズは、デフォルトバンドルが 263,188 B、フルバンドルが 381,135 B です。

問題は黙って失敗しません。 インポートが不足している場合、コンソールにその名前が表示されます。Tier 2 のチャートタイプでは render() が reject されます。waterfall、dumbbell、streamgraph は空のプロットを描画します。Tier 2 の機能は、可能な範囲で機能を縮小して動作します（trellis は 1 つのチャートとして描画され、renderer: 'canvas' は SVG にフォールバックします）。バージョン指定のない CDN URL は 8.0 を配信します。7 を使い続けるには apexcharts@7 を指定してください。7 では unit、sunburst、violin、drilldown、waterfall、dumbbell、streamgraph が引き続きデフォルトバンドルに含まれています。この分割は v7.0 から始まり、それ以前はすべての機能が含まれていたデフォルトバンドルから、最後の表にある 9 つの機能が外されました。すべての Tier の表については references/tree-shaking.md を、各機能の API については references/feature-platform.md を参照してください。

その他の v7.0 の破壊的変更。 （1）plotOptions.bar.borderRadiusWhenStacked は、v7.0 で使用されなくなった設定として削除されましたが、v7.4 で再び有効なオプションになっています。'all'（デフォルト）ではスタックの両端が丸くなり、'last' では遠い側の端だけが丸くなり、基準線側は四角のままです。設定から削除しないでください。（2）dataLabels.animate.enabled のデフォルトが true になりました（bar／column のみ）。データ更新時、ラベルは新しい位置へ移動し、瞬時に切り替わらなくなりました。以前の動作に戻すには dataLabels: { animate: { enabled: false } } を設定してください。v5 と v6 のその他の設定は、引き続き変更なく動作します。

デフォルトで有効な動作（どちらも prefers-reduced-motion を尊重します）：点を追加・削除するデータ更新は一貫性のあるアニメーションで表示され、片指での慣性パンが有効になります（chart.pan.inertia）。v7.8 以降、重なり合うデータラベルは互いに離れるように調整されます（dataLabels.avoidOverlap。セクション 5 を参照）。ピンチズームと両指でのパンという 2 本指ジェスチャーは、デフォルトが 'auto' の chart.zoom.pinch によって制御されます。ツールバーのリセットボタンがある場合にのみ有効となるため、意図しないズームは必ず元に戻せます。chart.zoom.allowMouseWheelZoom も同じ条件で制御されます。ツールバーのないチャートでジェスチャーを強制的に有効にするには pinch: true を設定するか、この条件を満たすもう 1 つの方法について chart.zoom.resetControl（v7.4）を参照してください。

プレミアム機能とライセンス。 9 つの機能がプレミアムです：trellis（スモールマルチプル、7.0）、storyboard、link（クロスフィルター／連動ビュー）、ink（注釈の作成）、measure、context-menu、perspectives（共有可能なビュー）、history（元に戻す／やり直す）、highlight-filter（highlightFilter、7.9）。2 つのチャートタイプがプレミアムです：unit／waffle と raincloud（7.1）。これらは完全に動作しますが、ApexCharts.setLicense(key)（静的）またはチャートごとの chart.license を使って対象ライセンスを設定するまでは、APEXCHARTS の試用版ウォーターマークが表示されます。利用には premium または enterprise プランが必要です。pro キーまたは無料プランではウォーターマークが表示されたままです。その他のチャートタイプと無料モジュールには、ライセンスによる制限はありません。プレミアムと Tier 2 は別の区分です。8.0 以降、すべてのプレミアム項目は Tier 2 ですが、Tier 2 がすべてプレミアムとは限りません（renderer-canvas、drilldown、waterfall、dumbbell、streamgraph、sunburst、violin、icicle は無料で、インポートが必要です）。references/feature-platform.md の「ライセンス」セクションを参照してください。

1. Critical Rules

1. new ApexCharts(el, options) の後は必ず chart.render() を呼び出してください。 コンストラクターは描画を行いません。
2. 同じ要素に新しいチャートを作成する前に、必ず chart.destroy() を呼び出してください。 呼び出さないと、メモリリークやチャートの重複が発生します（特に React／Vue）。
3. 系列データの形式はチャートの種類によって異なります。 下記のデータ形式表を参照してください。これは AI が間違える原因の第 1 位です。
4. 複数の y 軸を使用する場合、yaxis は配列にする必要があります。 各要素には、正しい系列に対応付けるための seriesName が必要です。
5. tooltip.shared と tooltip.intersect は同時に使用できません。 shared: true は同じ x 位置のすべての系列を表示します。intersect: true はホバーしたポイントのみを表示します。
6. 欠損データポイントには undefined や空文字列ではなく null を使用してください。 undefined は警告なしで無視され、チャートが正しく動作しなくなります。
7. chart.stacked: true は bar、area、line 系列を積み上げます。複合チャートでは、デフォルトで積み上げられるのは bar 系列のみです（chart.stackOnlyBar のデフォルトは true）。line 系列と area 系列も積み上げるには、stackOnlyBar: false を設定します。waterfall、dumbbell、streamgraph は独自に累積処理を行うため、積み上げを無効にします。
8. レスポンシブのブレークポイントは、responsive 配列内で昇順に並べる必要があります。
9. 複合／コンボチャートでは、 chart.type だけでなく、各系列オブジェクトに type を設定してください。
10. RadialBar の値は plotOptions.radialBar.min から max までの範囲に収まります（デフォルトは 0 から 100 で、そのためデフォルトではパーセンテージとして扱われます）。生の値を描画するには min／max を設定してください。範囲外の値は弧の端の値に丸められます。
11. 色の 16 進数値には # を付けてください（例：'#FF5733'。'FF5733' ではありません）。
12. デフォルトの apexcharts バンドルには、すべてが含まれているわけではありません（v8）。 import ApexCharts from 'apexcharts' のほか、チャートの種類を記述する前に import 'apexcharts/unit'（waffle の場合も同様）、'apexcharts/sunburst'、'apexcharts/violin'、'apexcharts/icicle'、または 'apexcharts/raincloud' を追加してください。waterfall、dumbbell、streamgraph のチャートを記述する場合、または drilldown、highlightFilter（highlight-filter）、trellis、storyboard、perspectives、ink、renderer: 'canvas'（renderer-canvas）、link、measure、history、コンテキストメニュー（context-menu）を使用する場合は、その前に import 'apexcharts/features/<name>' を追加してください。これらのインポートが不要なのは import ApexCharts from 'apexcharts/full'（スクリプトタグの場合は dist/apexcharts.full.min.js）だけです。上の囲みを参照してください。
13. ツリーシェイキング： apexcharts/core をインポートすると、クラスのみが提供されます。チャートの種類と機能のエントリも個別にインポートする必要があります。
14. ファーストクラスのエイリアス： funnel と pyramid は bar エンジンで描画され、gauge は radialBar で描画されます。これらは chart.type に直接指定してください（plotOptions.bar.isFunnel は不要です）。それぞれ apexcharts/bar と apexcharts/radialBar のツリーシェイキング用エントリに含まれています。
15. 統計用の violin は、ポイントごとの密度プロファイルを使用します。形式は data: [{ x, y: { density: [[value, weight], ...], points?: [number] } }] で、単純な数値ではありません。v6.9 以降は、生の観測値のみ（points: [number]、y なし）を指定することもでき、ライブラリが KDE で密度を算出します（ツリーシェイキングを使用する場合は apexcharts/features/stats が必要です）。
16. render() は冪等です。 同じインスタンスで render() を 2 回呼び出すと、重複したチャートを作成せず、同じ Promise を返します。同じ要素に新しいインスタンスを作成する前には、引き続き destroy() を呼び出す必要があります。
17. histogram（v6.9）の系列には、事前に集計した件数ではなく、生の観測値（イベントごとに 1 つの数値）を指定します。 チャートがビンの境界を選び、観測値を数えます。ビニング機能は stats 機能の背後にあります。apexcharts/histogram エントリを使用するか、apexcharts/bar と一緒に import 'apexcharts/features/stats' を指定してください（デフォルトの apexcharts バンドルにはすでに含まれています）。
18. waterfall（v7.1）は自動的に累積します。 系列に指定するのは累計ではなく差分です。累計を表示する行には isSubtotal または isTotal を指定し、y は指定しません。値はライブラリが計算します。累積値を事前に計算しないでください。
19. dumbbell（v7.1）では、各測定値につき 1 つの系列を指定し、すべてに同じ x カテゴリーを使用します。 形式は [{ name: '2020', data: [{ x, y }] }, { name: '2025', data: [{ x, y }] }] です。値を y: [low, high] のペアにまとめないでください。これは以前の plotOptions.bar.isDumbbell による範囲棒形式で、現在も動作しますが、別のチャートです。
20. raincloud（v7.1）には、生のサンプルをカテゴリーごとに 1 つのデータとして指定します。 形式は data: [{ x, points: [number] }] です。これは有料の Tier 2 の種類であるため、デフォルトのバンドルに加えて import 'apexcharts/raincloud' が必要です。
21. 不明な名前は明示的にエラーになります（v7.9）。 不明な chart.type を指定すると、チャートの構築時または更新時に例外がスローされ、メッセージには最も近い有効な種類が表示されます（'column' は有効で、'bar' の同義語です。'' と null は折れ線チャートを描画します）。不明なトップレベルのオプションキーは保持されますが、読み取られることはありません。yaxis.min: '10' のような数値文字列の軸範囲指定は機能します。解析できない範囲指定は無視され、軸はデータに合わせてスケーリングされます。どちらの場合もコンソール警告が出力されますが、apexcharts.min.js と CommonJS ビルド（require('apexcharts') で読み込まれる *.common.js ファイル）では console.warn が削除されているため出力されません。
22. スクリプトタグには、ここに示した正確なバージョンを指定してください： https://cdnjs.cloudflare.com/ajax/libs/apexcharts/8.2.0/apexcharts.min.js または https://cdn.jsdelivr.net/npm/[email protected]/dist/apexcharts.min.js。.../apexcharts/3.54.1/... のような 3.x または 4.x の URL は使用しないでください。これらは 2024 年および 2025 年初頭のリリースであり、このスキルの説明対象ではありません。環境が古いリリースしか受け付けない場合は、これらの URL と同じメジャーバージョンのうち、受け付けられる最新のものを使用してください。各 CDN の追加ファイルについては references/framework-wrappers.md を参照してください。

---

2. 系列データ形式の表

これは最も重要なリファレンスです。データ形式を誤って使用することが、チャートが正しく表示されない最大の原因です。

軸チャート（折れ線、エリア、棒、散布図など）

チャートの種類	chart.type	系列の形式	最小限の例
折れ線	'line'	[{ name, data: [number | null] }] または [{ name, data: [{ x, y }] }]	series: [{ name: 'Sales', data: [30, 40, null, 50] }]
エリア	'area'	折れ線と同じ	series: [{ name: 'Views', data: [10, 20, 30] }]
バー／縦棒	'bar'（または 'column'。v7.9 以降は同義語です）	折れ線と同じです。デフォルトは縦棒です。横棒にするには plotOptions.bar.horizontal: true を設定します。	series: [{ name: 'Revenue', data: [44, 55, 41] }]
散布図	'scatter'	[{ name, data: [{ x, y }] }] — 常に XY 形式を使用します	series: [{ name: 'Points', data: [{ x: 1, y: 5 }, { x: 2, y: 10 }] }]
バブル	'bubble'	[{ name, data: [{ x, y, z }] }] — z は必須です（バブルのサイズ）	series: [{ name: 'Data', data: [{ x: 1, y: 30, z: 10 }] }]
レンジエリア	'rangeArea'	[{ name, data: [{ x, y: [low, high] }] }]	series: [{ name: 'Temp', data: [{ x: 'Jan', y: [5, 15] }] }]
レンジバー	'rangeBar'	[{ name, data: [{ x, y: [start, end] }] }] — タイムライン／ガントチャートでは、タイムスタンプを使用します	series: [{ name: 'Tasks', data: [{ x: 'Design', y: [1, 5] }] }]
ローソク足	'candlestick'	[{ data: [{ x, y: [O, H, L, C] }] }] — 4 要素の配列です：始値、高値、安値、終値	series: [{ data: [{ x: new Date('2024-01-01'), y: [51, 56, 48, 53] }] }]
箱ひげ図	'boxPlot'	[{ data: [{ x, y: [min, Q1, median, Q3, max] }] }] — 5 要素の配列です。(v6.9) 代わりに生のサンプルを渡すこともできます：[{ data: [{ x, points: [number] }] }] とすると四分位数が計算されます（R type 7。統計機能が必要です）。	series: [{ data: [{ x: 'Group A', y: [10, 20, 30, 40, 50] }] }]
バイオリン (v6、v8 以降は Tier 2)	'violin'	[{ name, data: [{ x, y: { density: [[value, weight], ...], points?: [number] } }] }]。(v6.9) 代わりに生のサンプルを渡すこともできます：[{ name, data: [{ x, points: [number] }] }] とすると、KDE によって密度が導出されます（統計機能が必要です）。import 'apexcharts/violin' が必要です。	series: [{ name: 'Sessions', data: [{ x: 'A', y: { density: [[20, 0.1], [30, 0.2]], points: [21, 29] } }] }]
ヒストグラム (v6.9)	'histogram'	[{ name, data: [number] }]：生の観測値をイベントごとに 1 つ指定します。ビン分け済みの度数ではありません。チャートがビン分けします（統計機能が必要です）。	series: [{ name: 'Latency', data: [102, 87, 143, 91] }]
ヒートマップ	'heatmap'	[{ name, data: [{ x, y: number }] }] — y は強度の値です	series: [{ name: 'Mon', data: [{ x: '10am', y: 45 }] }]
ツリーマップ	'treemap'	[{ data: [{ x, y: number }] }] — y は面積／値です。(v6.9) データ項目に children を持たせると、任意の深さの入れ子のツリーマップを作成できます（references/grid-charts.md を参照）。	series: [{ data: [{ x: 'Item A', y: 100 }, { x: 'Item B', y: 60 }] }]
レーダー	'radar'	[{ name, data: [number] }] と xaxis: { categories: [...] }	series: [{ name: 'Skill', data: [80, 50, 30, 40, 100] }]
ファネル (v6)	'funnel'	[{ name, data: [number] }] と xaxis: { categories: [...] }。値は大きい順→小さい順に並べます。	series: [{ data: [1380, 990, 548, 200] }]
ピラミッド (v6)	'pyramid'	ファネルと同じです。値は小さい順→大きい順に並べます（下部が広い形になります）。	series: [{ data: [200, 548, 990, 1380] }]
ウォーターフォール (v7.1、v8 以降は Tier 2)	'waterfall'	[{ name, data: [{ x, y }] }]。ここで y は符号付きの差分であり、累計ではありません。累計行には isSubtotal（最後の区切り以降の合計）または isTotal（ゼロからの合計）を指定し、y は省略します。import 'apexcharts/features/waterfall' が必要です。	series: [{ data: [{ x: 'Revenue', y: 8786 }, { x: 'Costs', y: -2786 }, { x: 'Gross', isSubtotal: true }] }]
ダンベル (v7.1、v8 以降は Tier 2)	'dumbbell'	x カテゴリを共有し、測定値ごとに 1 系列指定します：[{ name, data: [{ x, y }] }, ...]。[low, high] のペアではありません。import 'apexcharts/features/dumbbell' が必要です。	series: [{ name: '2020', data: [{ x: 'Backend', y: 92 }] }, { name: '2025', data: [{ x: 'Backend', y: 118 }] }]
ストリームグラフ (v7.1、v8 以降は Tier 2)	'streamgraph'	エリアと同じです：[{ name, data: [{ x, y }] }]。積み上げ、ベースライン、帯の順序はチャート側で処理されるため、chart.stacked は設定しないでください。import 'apexcharts/features/streamgraph' が必要です。	series: [{ name: 'Drama', data: [{ x: '2024-01-01', y: 32 }] }]
レインクラウド (v7.1、プレミアム、Tier 2)	'raincloud'	[{ name, data: [{ x, points: [number] }] }]：カテゴリごとの生のサンプルです。密度、箱、雨はそこから導出されます。import 'apexcharts/raincloud' が必要です。	series: [{ name: 'Weight gain', data: [{ x: 'Control', points: [3.1, 4.7, 2.9] }] }]

非軸チャート（pie、donut、radialBar、polarArea、gauge、unit、waffle）

これらでは、series にフラットな数値配列を使用します。オブジェクト形式ではありません。

// CORRECT — flat number array + labels
{
  chart: { type: 'pie' },  // or 'donut', 'polarArea', 'radialBar', 'gauge', 'unit', 'waffle'
  series: [44, 55, 13, 43, 22],
  labels: ['Team A', 'Team B', 'Team C', 'Team D', 'Team E']
}

Gauge (v6) は、単一値の radialBar エイリアスです。series: [72]、labels: ['Progress'] を指定します。plotOptions.radialBar で円弧／針、色付きの帯、目盛り、min／max の範囲を設定します（references/circular-charts.md を参照）。

Unit / Waffle (v6.6、プレミアム、v8 以降 Tier 2) では、（両方の種類で）import 'apexcharts/unit' が必要です。値の単位ごとに 1 つのマークを描画します（ドットのクラスター、絵文字、ワッフル、蜂群）。pie と同じフラット配列＋labels の形式です。レイアウトは plotOptions.unit.layout で選択します。マークごとのオブジェクト形式（series: [{ name, data: [{ value, x, z, name, fillColor, id }] }]）を使うと、各マークに独自の色、位置、サイズ、ツールチップを設定できます。waffle は unit のプリセットエイリアス（グリッドレイアウト）です。利用資格のあるライセンスが設定されるまでは、どちらも APEXCHARTS の透かしを表示します。references/circular-charts.md を参照してください。

階層チャート（sunburst、icicle）

どちらも同じツリーを受け取り、選択の違いはレイアウトです。sunburst はプロットを放射状に配置し、icicle は直線軸に沿って配置します。

Sunburst (v6.7、無料、v8 以降 Tier 2) は、ツリー構造のデータを同心円（入れ子の pie／donut）として描画し、import 'apexcharts/sunburst' が必要です。軸スタイルの [{ data: [...] }] ラッパーを使用しますが、各データ項目は { x, y, children } ノードで、任意の深さまで入れ子にできます。

{
  chart: { type: 'sunburst' },
  series: [{
    data: [
      { x: 'Mobile', y: 55, children: [
        { x: 'iOS', y: 30, children: [{ x: 'iOS 17', y: 18 }, { x: 'iOS 16', y: 9 }] },
        { x: 'Android', y: 23 }
      ] },
      { x: 'Desktop', y: 33, children: [{ x: 'Windows', y: 20 }, { x: 'macOS', y: 10 }] }
    ]
  }]
}

plotOptions.sunburst で中央の穴、角の丸み、円弧間の隙間を設定します（references/circular-charts.md を参照）。

Icicle (v7.6、無料、Tier 2) は、同じパーティションを直交座標で表現します。深さのレベルごとに 1 つの帯を配置し、各子要素は親の範囲内でサイズが決まります。データ形式は sunburst と同じで、既存の drilldown 設定もプレーンデータとして読み取ります（drilldown のランタイムは不要です）。ラベルはすべての深さで水平のままで、同じ深さの兄弟要素は枝をまたいで一直線に並びます。そのため、深いツリー、コールスタック、パスファネルに適しています。

import ApexCharts from 'apexcharts'
import 'apexcharts/icicle'   // Tier 2: NOT in the default bundle

{
  chart: { type: 'icicle' },
  series: [{ data: [ /* the same { x, y, children } tree as above */ ] }],
  plotOptions: { icicle: { direction: 'up' } }   // flame-graph orientation
}

枝自身の y を省略し、子要素の合計として扱うことができます（両方のパーティション種類で v7.6 に修正）。plotOptions.icicle で深さの方向、帯の厚さ、葉の動作、ズームを設定します（references/grid-charts.md を参照）。

---

3. パッケージ／モジュールマップ

# Default bundle (the standard chart types plus the Tier 1 features; see the box at the top)
import ApexCharts from 'apexcharts'

# Full bundle (v8.0): every chart type and feature, plus the unit-shapes and pictograms catalogs. No add-on needed.
import ApexCharts from 'apexcharts/full'

# Bare core (no chart types, no optional features — must register manually)
import ApexCharts from 'apexcharts/core'

# Per-type entry points (registers specific chart types + core, plus any feature the type needs; no legend, toolbar or exports unless you import them).
# For a Tier 2 type (unit, sunburst, violin, icicle, raincloud) the usual form is
# import 'apexcharts/<type>' next to the default bundle.
import ApexCharts from 'apexcharts/line'         # line, area, scatter, bubble, rangeArea
import ApexCharts from 'apexcharts/area'          # same as /line
import ApexCharts from 'apexcharts/scatter'       # same as /line
import ApexCharts from 'apexcharts/bubble'        # same as /line
import ApexCharts from 'apexcharts/rangeArea'     # same as /line
import ApexCharts from 'apexcharts/bar'           # bar, column, rangeBar
import ApexCharts from 'apexcharts/column'        # same as /bar
import ApexCharts from 'apexcharts/rangeBar'      # same as /bar
import ApexCharts from 'apexcharts/waterfall'     # waterfall (v7.1): bar engine + the waterfall feature
import ApexCharts from 'apexcharts/dumbbell'      # dumbbell (v7.1): bar engine + the dumbbell feature
import ApexCharts from 'apexcharts/streamgraph'   # streamgraph (v7.1): rangeArea engine + the streamgraph feature
import ApexCharts from 'apexcharts/candlestick'   # candlestick, boxPlot
import ApexCharts from 'apexcharts/boxPlot'       # same as /candlestick
import ApexCharts from 'apexcharts/violin'        # violin (Tier 2 since v8). Carries no bar renderer: on this lean path also import 'apexcharts/bar'
import ApexCharts from 'apexcharts/raincloud'     # raincloud (v7.1, premium): violin + the raincloud feature; on this lean path also import 'apexcharts/bar'
import ApexCharts from 'apexcharts/histogram'     # histogram (v6.9): bar engine + the stats feature
import ApexCharts from 'apexcharts/pie'           # pie, donut, polarArea
import ApexCharts from 'apexcharts/donut'         # same as /pie
import ApexCharts from 'apexcharts/polarArea'     # same as /pie
import ApexCharts from 'apexcharts/radialBar'     # radialBar + gauge
import ApexCharts from 'apexcharts/radar'         # radar only
import ApexCharts from 'apexcharts/heatmap'       # heatmap only
import ApexCharts from 'apexcharts/treemap'       # treemap only
import ApexCharts from 'apexcharts/sunburst'      # sunburst (v6.7, hierarchical): Tier 2 since v8
import ApexCharts from 'apexcharts/icicle'        # icicle (v7.6, hierarchical): Tier 2, NOT in the default bundle
import ApexCharts from 'apexcharts/unit'          # unit + waffle (v6.6, premium): Tier 2 since v8
# funnel + pyramid render through the bar engine; use apexcharts/bar

# Unit-chart shape kit (v6.10): named exports, tree-shaken per shape (~4 KB gzipped each)
import { heart, outlined, glyphs, preview } from 'apexcharts/unit-shapes'

# Pictogram glyphs (v7.0): one drawn mark per unit, independent of the layout
import { person, registerMarks } from 'apexcharts/pictograms'

# TIER 1 features: already in the default `apexcharts` bundle.
# Import these only when you started from /core or a per-type entry.
import 'apexcharts/features/exports'         # PNG/SVG/CSV export methods
import 'apexcharts/features/legend'          # Interactive legend component
import 'apexcharts/features/toolbar'         # Toolbar (zoom, pan, download buttons)
import 'apexcharts/features/annotations'     # X/Y/point/text/image annotations
import 'apexcharts/features/keyboard'        # Keyboard navigation (accessibility)
import 'apexcharts/features/stats'           # Statistics (v6.9): histogram binning, boxPlot/violin raw samples, rowSeries()
import 'apexcharts/features/morph'           # Animated chart-type morphs
import 'apexcharts/features/facet'           # Design tokens + OS-aware themes
import 'apexcharts/features/weave'           # Public plugin platform
import 'apexcharts/features/marks'           # Custom series types (registerSeriesType)

# TIER 2: NOT in the default bundle (all are in apexcharts/full).
import 'apexcharts/features/drilldown'       # Hierarchical drill-down (Tier 2 since v8)
import 'apexcharts/features/waterfall'       # (v7.1) waterfall chart type (Tier 2 since v8)
import 'apexcharts/features/dumbbell'        # (v7.1) dumbbell chart type (Tier 2 since v8)
import 'apexcharts/features/streamgraph'     # (v7.1) streamgraph chart type (Tier 2 since v8)
import 'apexcharts/features/highlight-filter' # (v7.9) Part-of-whole highlight, highlightFilter (premium)
import 'apexcharts/features/trellis'         # (v7.0) Small multiples (premium)
import 'apexcharts/features/storyboard'      # Scrollytelling (premium; registers perspectives)
import 'apexcharts/features/perspectives'    # Shareable view state (premium)
import 'apexcharts/features/ink'             # On-chart annotation authoring (premium)
import 'apexcharts/features/renderer-canvas' # Hybrid SVG + canvas renderer (Strata)
import 'apexcharts/features/link'            # Crossfilter / linked views (premium)
import 'apexcharts/features/measure'         # Measure / delta ruler (premium)
import 'apexcharts/features/history'         # Undo/redo (Rewind, premium)
import 'apexcharts/features/context-menu'    # Right-click / long-press context menu (premium)
import 'apexcharts/raincloud'                # (v7.1) raincloud (premium): the violin renderer plus the raincloud feature. features/raincloud alone works only where violin is already registered (v8)

import 'apexcharts/features/all'             # Tier 1 only. Does NOT pull in Tier 2.

# SSR (server-side rendering)
import ApexCharts from 'apexcharts/ssr'    # Node.js: renderToString, renderToHTML. Also the only entry with hydrate() (browser-safe)
import ApexCharts from 'apexcharts/client' # Browser build, explicitly. No hydrate(): hydrate from apexcharts/ssr

注（v8）： apexcharts では、標準のチャート種類と Tier 1 の機能を利用できます。Tier 2 のチャート種類（unit／waffle、sunburst、violin、icicle、raincloud）および Tier 2 の機能には、apexcharts/full から始めた場合を除き、それぞれ専用のインポートが必要です。apexcharts/features/all は Tier 1 のセットなので、これを使ってもこの要件を回避することはできません。ツリーシェイキング用のエントリー（/core、/line など）は、デフォルトよりバンドルサイズを小さくするためのものです。軽量なコアでは、violin と raincloud にも apexcharts/bar が必要です。また、生の観測値を使う boxPlot または violin には apexcharts/features/stats が必要です（コンソールに表示されます）。

注（v6.9）： ApexCharts は依存関係なしではなくなりました。実行時に apex-commons に依存します。npm が自動的に解決し、ブラウザー（script タグ）用のバンドルにはインラインで含まれるため、対応は不要です。依存関係がゼロであることを前提としたツールを使う場合にのみ関係します。

---

4. コアのライフサイクルパターン

import ApexCharts from 'apexcharts'

// 1. Define options
const options = {
  chart: {
    type: 'line',
    height: 350
  },
  series: [{
    name: 'Sales',
    data: [30, 40, 35, 50, 49, 60, 70]
  }],
  xaxis: {
    categories: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  }
}

// 2. Create chart instance
const chart = new ApexCharts(document.querySelector('#chart'), options)

// 3. Render (REQUIRED — constructor alone does not display the chart)
await chart.render()

// 4. Update data or options later
await chart.updateSeries([{
  name: 'Sales',
  data: [10, 20, 15, 30, 29, 40, 50]
}])

// Or merge new config options
await chart.updateOptions({
  title: { text: 'Updated Chart' }
})

// 5. Destroy when done (REQUIRED before unmounting in SPA frameworks)
chart.destroy()

---

5. フォーマッター関数のシグネチャ

設定パス	シグネチャ	戻り値
xaxis.labels.formatter	(value: string | number, timestamp?: number, opts?) => string	書式設定された X 軸の目盛りラベル
yaxis.labels.formatter	(value: number, opts?) => string	書式設定された Y 軸の目盛りラベル
tooltip.x.formatter	(value: number, opts?) => string	ツールチップの X 値のテキスト
tooltip.y.formatter	(value: number | null, opts?) => string	ツールチップの Y 値のテキスト。ギャップでは value が null になるため、数値用メソッドを呼び出す前にチェックしてください：(val) => val == null ? 'n/a' : val.toFixed(2)`
tooltip.y.title.formatter	(seriesName: string, opts?) => string	ツールチップの系列タイトル
tooltip.z.formatter	(value: number) => string	ツールチップの Z 値（バブル）
dataLabels.formatter	(value: number | string | number[], opts?) => string | number	データラベルのテキスト
legend.formatter	(legendName: string, opts?) => string	凡例項目のテキスト
plotOptions.pie.donut.labels.value.formatter	(val: string) => string	ドーナツ中央の値
plotOptions.pie.donut.labels.total.formatter	(w: { globals, config }) => string	ドーナツ中央の合計値
plotOptions.radialBar.dataLabels.value.formatter	(val: number) => string	RadialBar 中央の値

重要： すべてのフォーマッターは string（dataLabels.formatter の場合は number も可）を返す必要があります。undefined は決して返さないでください。

データポイントごとのデータラベルのオフセット（v6.8）： dataLabels.offsetX と dataLabels.offsetY には、number | ((opts) => number) を指定できます。関数には { series, seriesIndex, dataPointIndex, w } が渡されます（dataLabels.style.colors 関数と同じシグネチャです）。意図的に配置を調整する場合に使用してください。ラベルごとに複数回呼び出される可能性があるため、純粋関数にしてください。重なりの回避にこの機能は必要ありません。v7.8 以降、dataLabels.avoidOverlap（デフォルトで有効）はオフセット適用後、値軸に沿って重なったラベルを互いに離して配置します。系列間だけでなく、同じ系列内の重なりも対象です（放射状タイプは独自の配置を維持します）。{ gap, maxShift, hide } で調整するか、avoidOverlap: false を設定して、各ラベルをマークとオフセットの位置に固定してください。

---

6. 注意点とアンチパターン

注意点 1：チャートタイプに合わない系列データ形式

❌ 誤り — 軸チャート用の系列形式を使った円グラフ：

{ chart: { type: 'pie' }, series: [{ name: 'A', data: [44, 55] }] }

✅ 正解 — 円グラフではフラットな数値配列とラベルを使用します：

{ chart: { type: 'pie' }, series: [44, 55, 13], labels: ['A', 'B', 'C'] }

注意点 2：render() を呼び出していない

❌ 誤り — チャートが表示されません：

const chart = new ApexCharts(el, options)
// Missing render() call!

✅ 正解：

const chart = new ApexCharts(el, options)
await chart.render()

注意点 3：再作成前に破棄していない（React/Vue のメモリーリーク）

❌ 誤り — チャートが重複して作成されます：

useEffect(() => {
  const chart = new ApexCharts(ref.current, options)
  chart.render()
}, [options])

✅ 正解 — クリーンアップ時に破棄します：

useEffect(() => {
  const chart = new ApexCharts(ref.current, options)
  chart.render()
  return () => chart.destroy()
}, [options])

注意点 4：xaxis.type と不適切なデータ形式を組み合わせている

❌ 誤り — 文字列形式の日付を使った日時軸（タイムスタンプではありません）：

{
  xaxis: { type: 'datetime' },
  series: [{ data: [{ x: 'January 2024', y: 30 }] }]
}

✅ 正解 — タイムスタンプまたは Date オブジェクトを使った日時軸：

{
  xaxis: { type: 'datetime' },
  series: [{ data: [{ x: new Date('2024-01-01').getTime(), y: 30 }] }]
}

また、データがすでに { x, y } 形式の場合は、xaxis.categories を使用しないでください。カテゴリーは無視されます。

注意点 5：複数の Y 軸を配列にしていない

❌ 誤り — yaxis が単一のオブジェクトになっています：

{
  series: [{ name: 'Revenue', data: [...] }, { name: 'Profit', data: [...] }],
  yaxis: { title: { text: 'Revenue' } }
}

✅ 正解 — seriesName のマッピングを使い、yaxis を配列にします：

{
  series: [{ name: 'Revenue', data: [...] }, { name: 'Profit', data: [...] }],
  yaxis: [
    { seriesName: 'Revenue', title: { text: 'Revenue ($)' } },
    { seriesName: 'Profit', opposite: true, title: { text: 'Profit (%)' } }
  ]
}

注意点 6：tooltip.shared と tooltip.intersect

❌ 誤り — 両方を有効にしています（競合します）：

{ tooltip: { shared: true, intersect: true } }

✅ 正解 — いずれか一方のモードを選びます：

// Mode A: Show all series values at x-position (default for line/area)
{ tooltip: { shared: true, intersect: false } }

// Mode B: Show only hovered data point (better for scatter)
{ tooltip: { shared: false, intersect: true } }

custom ツールチップ内のコンテンツへのアクセス (v7.6)： ポインターがデータポイントから離れるとツールチップが閉じるため、custom が返すリンクやボタンはクリックできません。tooltip.interactive: true にすると、ポインターがツールチップ上にある間は開いた状態を維持します。デフォルトでは無効です。有効にすると followCursor は無視されます（カーソルを追うツールチップは、どのように近づいても離れてしまいます）。設定された followCursor の値は変更されず、interactive を無効にした時点で再び適用されます。

{ tooltip: { interactive: true, custom: ({ seriesIndex }) => `<a href="/detail/${seriesIndex}">Open</a>` } }

注意点 7：フォーマッターのシグネチャが間違っている

❌ 誤り — ツールチップに Y 軸フォーマッターのシグネチャを使用しています：

{
  tooltip: { y: { formatter: (val, timestamp, opts) => `$${val}` } }
}

✅ 正解 — tooltip.y.formatter が受け取るのは (val, opts) のみです：

{
  tooltip: { y: { formatter: (val, opts) => `$${val}` } },
  yaxis: { labels: { formatter: (val) => `$${val.toFixed(0)}` } }
}

落とし穴 8：データが欠損している場合、null ではなく undefined を使う

❌ 誤り — undefined を使うとチャートが壊れます：

{ series: [{ data: [10, undefined, 30, undefined, 50] }] }

✅ 正しい — null を使います：

{ series: [{ data: [10, null, 30, null, 50] }] }

落とし穴 9：対応していないチャートタイプでの積み上げ

❌ 誤り — 散布図での積み上げ：

{ chart: { type: 'scatter', stacked: true } }

✅ 正しい：積み上げに対応しているのは棒グラフ、面グラフ、折れ線グラフです：

{ chart: { type: 'bar', stacked: true } }
// or
{ chart: { type: 'area', stacked: true } }
// or
{ chart: { type: 'line', stacked: true } }

落とし穴 10：複合グラフで系列ごとのタイプが指定されていない

❌ 誤り — 個々の系列にタイプが指定されていません：

{
  chart: { type: 'line' },
  series: [
    { name: 'Sales', data: [10, 20, 30] },      // renders as line
    { name: 'Profit', data: [5, 12, 18] }        // also renders as line!
  ]
}

✅ 正しい — 系列ごとにタイプを設定します：

{
  chart: { type: 'line' },
  series: [
    { name: 'Sales', type: 'column', data: [10, 20, 30] },
    { name: 'Profit', type: 'line', data: [5, 12, 18] }
  ]
}

落とし穴 11：RadialBar の値が最小値／最大値の範囲外

❌ 誤り：デフォルトの 0～100 の範囲で生の値を使用しています（各円弧が最大まで表示されます）：

{ chart: { type: 'radialBar' }, series: [340, 520, 190] }

✅ 正しい：パーセンテージを使用するか、生の値に合うよう範囲を設定します：

{ chart: { type: 'radialBar' }, series: [76, 67, 61], labels: ['A', 'B', 'C'] }
// or
{ chart: { type: 'radialBar' }, series: [340, 520, 190], labels: ['A', 'B', 'C'],
  plotOptions: { radialBar: { min: 0, max: 600 } } }

落とし穴 12：色に # 接頭辞がない

❌ 誤り：

{ colors: ['FF5733', '33FF57'] }

✅ 正しい：

{ colors: ['#FF5733', '#33FF57'] }

落とし穴 13：レスポンシブのブレークポイントが昇順ではない

❌ 誤り — 降順です：

{ responsive: [{ breakpoint: 1024, options: {...} }, { breakpoint: 480, options: {...} }] }

✅ 正しい — 昇順です：

{ responsive: [{ breakpoint: 480, options: {...} }, { breakpoint: 1024, options: {...} }] }

落とし穴 14：機能のインポート漏れ

この問題には 2 つのパターンがあります。（a）タイプ別のエントリーに機能が含まれていない：

❌ 誤り — ツールバー／凡例／注釈が何も表示されません：

import ApexCharts from 'apexcharts/line'
// No feature imports! Legend, toolbar, annotations won't appear.

✅ 正しい — 必要な機能をインポートします：

import ApexCharts from 'apexcharts/line'
import 'apexcharts/features/legend'
import 'apexcharts/features/toolbar'
import 'apexcharts/features/annotations'

（b）(v8) デフォルトのバンドルには、Tier 2 のチャートタイプと機能が含まれていません。 ツリーシェイクを一度も行ったことがない人が陥りやすい問題です。最もよくあるアップグレード時の失敗で、v6 から v7 では 7.0 の 9 つの機能、v7 から v8 では unit、sunburst、violin、drilldown、waterfall、dumbbell、streamgraph が対象です。

❌ 誤り：設定は正しいものの、モジュールが存在しないため render() が拒否され、何も描画されません：

import ApexCharts from 'apexcharts'
new ApexCharts(el, { chart: { type: 'sunburst' }, series }).render()

✅ 正しい：

import ApexCharts from 'apexcharts'
import 'apexcharts/sunburst'

どの場合も、コンソールに不足しているインポート名が表示されます（7.9.1 以降は minified バンドルにも表示されます）。ただし、チャートの動作は不足しているものによって異なります。

• Tier 2 のチャートタイプ（unit、waffle、sunburst、violin、icicle、および violin 経由で描画される raincloud）：render() が拒否され、何も描画されません。これらを要求する updateOptions、updateSeries、appendSeries は拒否され、チャートは元の状態のままです。
• 対応する機能がない waterfall、dumbbell、streamgraph（または violin はあるものの raincloud 機能がないページでの raincloud）：警告が 1 件表示され、プロットは空になります。
• Tier 2 の機能（drilldown、highlightFilter、trellis、storyboard、perspectives、ink、renderer: 'canvas'、link、measure、history、contextMenu）：チャートはその機能なしで描画され、設定に含まれている場合は警告が表示されます。trellis は通常のチャート 1 つとして描画され、drilldown チャートはルートレベルを描画するだけで遷移せず、chart.drillDown() は例外をスローします。

または、これらのインポートが不要な import ApexCharts from 'apexcharts/full' から始めてください。

落とし穴 15：SSR — インポートパスの誤り

apexcharts は環境に応じて解決されます。"." エクスポートの node 条件は SSR バンドルを指すため、サーバーでの import ApexCharts from 'apexcharts' にも renderToString / renderToHTML が含まれます。ただし、Node を対象にしているときに browser 条件を解決するバンドラーでも意図が保たれるよう、apexcharts/ssr を明示的にインポートしてください：

// On server:
import ApexCharts from 'apexcharts/ssr'
const svg = await ApexCharts.renderToString(options)

// On client (for hydration): target the wrapper renderToHTML emitted,
// which carries data-apexcharts-hydrate and NO id.
import ApexCharts from 'apexcharts/ssr'  // hydrate() lives only on this entry; it is browser-safe
ApexCharts.hydrateAll()  // or hydrate(document.querySelector('[data-apexcharts-hydrate]'))

ブラウザーでは、apexcharts、apexcharts/client、apexcharts/full に hydrate / hydrateAll がありません。型定義ではすべてのエントリーにこれらが宣言されているため、TypeScript ではこの間違いを検出できません。

落とし穴 16：updateOptions と updateSeries、appendData の使い分け

❌ 誤り — データを変更するだけなのに updateOptions で全体を更新しています：

chart.updateOptions({ series: [{ data: newData }] })

✅ 正しい — 適切なメソッドを使用します：

// Replace all series data (most common)
await chart.updateSeries([{ name: 'Sales', data: newData }])

// Add data points to existing series (real-time streaming)
await chart.appendData([{ data: [newPoint] }])

// Change config (title, colors, axis, etc.)
await chart.updateOptions({ title: { text: 'New Title' } })

---

7. API メソッド早見表

インスタンスメソッド

メソッド	説明
render()	チャートを描画します。Promise<ApexCharts>を返します。
destroy()	チャートインスタンスを破棄し、DOM要素を削除します。
updateOptions(options, redraw?, animate?, updateSyncedCharts?)	新しいオプションをマージして再描画します。Promiseを返します。
updateSeries(newSeries, animate?)	系列データを置き換えます。Promiseを返します。
appendSeries(newSeries, animate?)	既存の系列に新しい系列を追加します。Promiseを返します。
appendData(newData)	各系列にデータポイントを追加します。Promiseを返します。
toggleSeries(seriesName)	名前を指定して系列の表示／非表示を切り替えます。
showSeries(seriesName)	非表示の系列を表示します。
hideSeries(seriesName)	表示中の系列を非表示にします。
resetSeries(shouldUpdateChart?, shouldResetZoom?)	系列データを初期状態に戻します。
zoomX(min, max)	プログラムからx軸をズームします。
addXaxisAnnotation(opts)	x軸の注釈を動的に追加します。
addYaxisAnnotation(opts)	y軸の注釈を動的に追加します。
addPointAnnotation(opts)	ポイント注釈を動的に追加します。
removeAnnotation(id)	IDを指定して注釈を削除します。
clearAnnotations()	すべての注釈を削除します。
dataURI(options?)	チャートをデータURIとしてエクスポートします。Promiseを返します。
getSvgString(scale?)	チャートのSVGマークアップを取得します。Promise<string>を返します。
exportToCSV(options?)	CSVのダウンロードを開始します。
setLocale(localeName)	ロケールを切り替えます。
toggleDataPointSelection(seriesIndex, dataPointIndex?)	データポイントを選択／選択解除します。
rowSeries(opts?)	(v6.9) このチャートのマークの基となる生の行データをユニットチャート系列（マークごとに1つのクラスター）として返します。タイプに行データソースがない場合はnullを返します（histogram／boxPlot／violinで動作します。apexcharts/features/statsが必要です）。opts.maxRowsで出力件数の上限を設定できます（デフォルトは3000）。結果の描画にはunitタイプが必要です。v8以降はTier 2です（import 'apexcharts/unit'）。
getState()	チャートの状態のスナップショットを返します。
addEventListener(name, handler)	チャートイベントを購読します。
removeEventListener(name, handler)	チャートイベントの購読を解除します。

機能別インスタンスメソッド（対応する機能のインポートが必要）

メソッド	機能	説明
chart.getPanels() / getPanel(key)	trellis	(v7.0) グリッドのパネル、およびファセットキーで指定したパネル自身のApexChartsインスタンスを返します。trellisホストではないチャートの場合は空／nullです。
chart.promotePanel(key) / restorePanels()	trellis	(v7.0) 1つのパネルをグリッドの全幅に拡大し、元に戻します。
chart.history.undo() / redo() / jump(id) / transaction(fn)	history	コマンドジャーナルの操作を取り消し／やり直しします。
chart.perspectives.capture() / toURL() / apply(token)	perspectives	正確なビューをシリアル化／復元します。
chart.getActiveRenderer()	renderer-canvas	現在使用中の'svg' | 'canvas'を返します。
chart.refreshTokens()	facet	--apx-* CSSカスタムプロパティを再読み込みします。
chart.startMeasure() / stopMeasure() / clearMeasures()	measure	コードから計測ルーラーを操作します。
chart.storyboard.bind({ beats }) / goTo() / unbind()	storyboard	スクロールに連動した演出を行います。
chart.drillDown(id) / drillUp() / drillToRoot()	drilldown	ドリルダウン階層を移動します。
chart.clearCrossfilter()	link	有効なクロスフィルターの選択を解除します。
chart.highlightFilter.set(parts) / clear() / valueAt(i, j) / isActive()	highlight-filter	(v7.9) 強調表示する部分を設定または削除し（各部分は描画時に解決されます）、1つの部分を読み取ります。機能がない場合、chart.highlightFilterはnullです。

静的メソッド

メソッド	説明
ApexCharts.exec(chartID, fn, ...args)	チャートの chart.id を指定して、メソッドを呼び出します。
ApexCharts.getChartByID(chartID)	ID でチャートのインスタンスを取得します。
ApexCharts.setLicense(key)	(v6.5) プレミアム機能のトライアルウォーターマークを消すライセンスキーを設定します。静的で、ファミリー内で共有され、オフラインで使用でき、SSR にも安全です。render() の前に呼び出してください。チャートごとの上書きには chart.license を使用します。6.7.0 以降は premium／enterprise プランが必要です。
ApexCharts.merge(target, source)	オブジェクトをディープマージします。
ApexCharts.use(typeMap)	チャートタイプのコンストラクターを登録します（ツリーシェイキング）。
ApexCharts.registerFeatures(featureMap)	オプションの機能モジュールを登録します。
ApexCharts.registerPlugin(def) / unregisterPlugin(name)	(v6, Weave) 再利用可能なプラグインを登録します。
ApexCharts.registerSeriesType(name, def) / unregisterSeriesType(name)	(v6, Marks) カスタム系列タイプを登録します。
ApexCharts.registerTheme(name, def) / unregisterTheme(name)	(v6, Facet) 名前付きのブランドテーマを登録します。
ApexCharts.registerEasing(name, fn)	(v6, Cadence) カスタムイージング曲線を登録します。
ApexCharts.registerUnitLayout(name, fn) / unregisterUnitLayout(name)	(v6.9) 名前付きのユニットチャートレイアウトを登録します。layout: 'custom' とともに plotOptions.unit.positions: '<name>' で参照できます。
ApexCharts.crossfilter({ id, records }) / getCrossfilter(id)	(v6, Link) クロスフィルターエンジンを作成／取得します。
ApexCharts.perspectives.fromURL(href)	(v6) URL からパースペクティブトークンをデコードします。
ApexCharts.trellis(el, options)	(v7.0, Trellis) 命令型エントリーポイントです。トレリスホストを作成し（options に trellis.by が必要です）、レンダリングを開始します。トレリス機能が読み込まれていない場合は、コンソール警告とともに null を返します。
apexcharts/pictograms の registerMarks(defs) / definePictogram(meta)	(v7.0) グリフを登録し、plotOptions.unit.pictogram.mark: 'person' を解決できるようにします。

SSR 静的メソッド（apexcharts/ssr で利用可能）

メソッド	説明
ApexCharts.renderToString(options, { width, height, scale })	チャートを生の SVG 文字列としてレンダリングします（Node.js）。
ApexCharts.renderToHTML(options, { width, height, scale, className })	ハイドレーション対応の HTML 文字列としてチャートをレンダリングします（Node.js）。
ApexCharts.hydrate(element, clientOptions?)	サーバーでレンダリングされたチャートをハイドレーションします（ブラウザー）。
ApexCharts.hydrateAll(selector?, clientOptions?)	ページ上のサーバーでレンダリングされたすべてのチャートをハイドレーションします。
ApexCharts.isHydrated(element)	要素がすでにハイドレーションされているか確認します。

---

8. チャートイベント

{
  chart: {
    events: {
      // Lifecycle
      beforeMount: (chart, options) => {},
      mounted: (chart, options) => {},
      updated: (chart, options) => {},
      animationEnd: (chart, options) => {},

      // User interaction
      click: (event, chart, options) => {},
      mouseMove: (event, chart, options) => {},
      mouseLeave: (event, chart, options) => {},
      legendClick: (chart, seriesIndex, options) => {},
      markerClick: (event, chart, options) => {},
      xAxisLabelClick: (event, chart, options) => {},

      // Data point events
      dataPointSelection: (event, chart, options) => {},
      dataPointMouseEnter: (event, chart, options) => {},
      dataPointMouseLeave: (event, chart, options) => {},

      // Zoom & pan
      beforeZoom: (chart, { xaxis }) => {},      // return false to cancel
      zoomed: (chart, { xaxis }) => {},
      beforeResetZoom: (chart, options) => {},    // return false to cancel
      scrolled: (chart, { xaxis }) => {},
      selection: (chart, { xaxis, yaxis }) => {},

      // v6 feature events (fire only when the matching feature is enabled)
      annotationDragged: (chart, options) => {},  // ink
      annotationEdited: (chart, options) => {},    // ink
      annotationStyled: (chart, options) => {},    // ink
      annotationDeleted: (chart, options) => {},   // ink
      measured: (chart, { from, to, dx, dy, percentChange, slope }) => {}, // measure
      beatChange: (chart, beatInfo) => {},         // storyboard
      drillDownStart: (info, chart, options) => {},// drilldown
      drillDownEnd: (info, chart, options) => {},  // drilldown
      drillUp: (info, chart, options) => {},       // drilldown
      drillDownError: ({ id, error }, chart, options) => {}, // drilldown (v6.9): async level failed; view unchanged
      highlightFilterChanged: (chart, { active, phase }) => {}, // highlight-filter (v7.9): phase is 'enter', 'update' or 'clear'
    }
  }
}

---

9. 機能プラットフォーム

以下のすべての機能は、設定上はデフォルトで無効です。Tier 列はバンドルについてのものです。Tier 1 はすでに import ApexCharts from 'apexcharts' に含まれており、/core またはタイプ別エントリーポイントから開始した場合にのみ features/* のインポートが必要です。Tier 2 は、apexcharts/full（すべての機能を含みます）を除き、使用したエントリーポイントにかかわらずインポートが必要です。設定の全形式、API、使用例は references/feature-platform.md にあります。

機能	ティア	インポート	概要
Weave（プラグイン）	1	apexcharts/features/weave	安定した ApexCharts.registerPlugin({ name, setup }) API を使って再利用可能なチャートプラグインを公開し、plugins: [{ name }] でチャートごとに有効化します。契約は v6（v7.5）です：info／categories／markDerived（v2）、reserve（v3）、pointer（v4）、claim／drawn／declare／can（v6）。実行できる最低のバージョンを apiVersion として宣言し、残りの機能は検出して使用してください。宣言したバージョンより古いホストは、プラグインを完全にスキップします。
Marks（カスタム系列）	1	apexcharts/features/marks	ファーストクラスのカスタムマーク（ロリポップ、ブレット）には ApexCharts.registerSeriesType(name, { renderItem }) を使用します。基準線は api.zeroY ではなく scales.y(0) です。
Facet（テーマ／トークン）	1	apexcharts/features/facet	theme: { follow: 'os', name }、--apx-* CSS カスタムプロパティ、ApexCharts.registerTheme。
Morph	1	apexcharts/features/morph	チャートタイプ間のアニメーション付きトランジション。
Stats	1	apexcharts/features/stats	(v6.9) ヒストグラムのビニング、boxPlot／violin の生サンプル要約（R の type 7 四分位数、KDE）、chart.rowSeries() を支える統計機能です。apexcharts/histogram エントリには、この機能が含まれています。
Cadence（イージング）	コア	なし	chart.animations.easing は、名前付き曲線、cubic-bezier 配列、または関数を受け付けます。ApexCharts.registerEasing。
Streaming	コア	なし	一定速度でスクロールするローリングウィンドウには chart: { streaming: { enabled, maxPoints } } を使用します。
印刷レイアウト	コア	なし	(v7.1) chart: { print: { enabled, width } }。用紙のサイズは JS から測定できません（beforeprint 中は clientWidth と matchMedia のどちらも画面の値を返すため）。そのため、シート用に既知の幅でチャートを再レイアウトし、印刷後に元に戻します。デフォルトで有効で、幅は 700 です（A4／Letter の縦向きに適しています）。これより幅の狭いチャートは変更しません。print: false にすると、v7.1 より前の動作に戻ります。
マーカーのバッチ処理	コア	なし	(v7.0) markers: { largeDatasetThreshold: n }。点の数が n を超えると、系列のマーカーは点ごとに 1 つの要素としてではなく、マーカーサイズごとに 1 つのパスとして描画されます。デフォルトは 0（無効）で、オプトイン方式です。結合されたマーカーパスはピクセル単位で同一ではなく、重なったマーカーの個別の輪郭が失われ、密集したクラスターが平坦に見えるためです。showNullDataPoints が追加するマーカーも対象です。これにより、size: 0 でも null の多い系列が遅くなる問題に対応します。
ドリルダウン	2	apexcharts/features/drilldown	(v8.0 から Tier 2) drilldown: { enabled, series } とデータポイントの drilldown ID、さらに chart.drillDown()／drillUp() を使用します。v6.9 では、折れ線／面グラフのサポート、非同期レベル（onDrillDown は Promise を返せます）、読み込みオーバーレイ、drillDownError イベントが追加されました。
ハイライトフィルター	2	apexcharts/features/highlight-filter	(v7.9、プレミアム) highlightFilter は各値を薄く表示し、同じ基準線から値の一部を手前に不透明で描画します。不透明で表示する部分はデータに追従します。series[].highlightData（data と並行する配列）または各点の { x, y, highlight }、円／ドーナツ／極域／ラジアルバーでの highlightFilter.data を使用します。chart.highlightFilter.set(parts)／clear()。対象は棒、横棒、ファネル、折れ線、面、円、ドーナツ、極域、ラジアルバー（およびゲージ）、ツリーマップです。references/feature-platform.md の「ハイライトフィルター」を参照してください。
Trellis（スモールマルチプル）	2	apexcharts/features/trellis	(v7.0、プレミアム) trellis: { by: 'region', minPanelWidth } は、系列をグリッド状に分割し、スケール、凡例、ツールバー、クロスヘアを共有する実際のチャートを生成します。2 次元グリッドには row × column も使用できます。
Strata（キャンバス）	2	apexcharts/features/renderer-canvas	chart: { renderer: 'auto', rendererThreshold } は、密な系列レイヤーをキャンバスに描画し、軸／ツールチップ／エクスポートには SVG を引き続き使用します。モジュールがない場合は SVG にフォールバックします。
Rewind（元に戻す／やり直す）	2	apexcharts/features/history	(プレミアム) chart: { history: { enabled: true } } を設定し、chart.history.undo()／redo()／jump()／transaction() を使用します。
Perspectives（ビュー状態）	2	apexcharts/features/perspectives	(プレミアム) chart.perspectives.capture()／toURL()／apply() を使って、ビューを正確にシリアライズし、復元します。
Link（クロスフィルター）	2	apexcharts/features/link	(プレミアム) ハイライトの連携には chart: { group, link: { enabled, mode } } を、フィルターエンジンには ApexCharts.crossfilter({ id, records }) を使用します。
Ink（注釈の作成）	2	apexcharts/features/ink	(プレミアム) chart: { ink: { enabled: true } } を設定すると、注釈をドラッグやサイズ変更できるようになり、フローティングエディターが表示されます。
Measure（定規）	2	apexcharts/features/measure	(プレミアム) chart: { measure: { enabled, mode } }。キーを押しながらドラッグすると、変化量／パーセント／傾きを読み取れます。v6.1 ではツールバーのツール（toolbar.tools.measure、toolbar.autoSelected: 'measure'）が追加されました。
コンテキストメニュー	2	apexcharts/features/context-menu	(プレミアム) 点ごとの右クリック操作には chart: { contextMenu: { enabled, items } } を使用します。
Storyboard（スクロール連動ストーリーテリング）	2	apexcharts/features/storyboard	(プレミアム) chart.storyboard.bind({ beats }) は、文章のセクションと保存済みのビューを関連付けます。Perspectives も登録します。

10. リファレンスルーティングテーブル

チャートファミリーごとの詳細なオプション、データ形式のバリエーション、完全な動作例については、以下を参照してください。

トピック	リファレンスファイル
折れ線、面、散布図、バブル、範囲面、ストリームグラフ	references/cartesian-charts.md
棒、縦棒、範囲棒、タイムライン／ガント、ファネル、ピラミッド、ウォーターフォール、ダンベル	references/bar-charts.md
ローソク足、ボックスプロット、バイオリン、ヒストグラム、レインクラウド	references/financial-charts.md
円、ドーナツ、極座標面、放射状棒、ゲージ、サンバースト、ユニット、ワッフル、ピクトグラム	references/circular-charts.md
ヒートマップ（セル形状を含む）、ツリーマップ、アイシクル	references/grid-charts.md
レーダー	references/radar-charts.md
機能プラットフォーム（スモールマルチプル、プラグイン、キャンバス、元に戻す／やり直し、テーマ、クロスフィルター、ストーリーボードなど）	references/feature-platform.md
バンドルの階層、ツリーシェイキング、バンドルの最適化	references/tree-shaking.md
サーバーサイドレンダリング、ハイドレーション	references/ssr.md
React、Vue、Angular の統合	references/framework-wrappers.md