apexcharts

// TypeScript declarations for ApexCharts. // The ApexCharts class and a namespace of the same name are merged here so // that consumers can access sub-types either as named imports // (`import type { ApexOptions } from 'apexcharts'`) or via the class // namespace (`ApexCharts.ApexOptions`). // // For the full set of supported options, see https://apexcharts.com/docs/options // --------------------------------------------------------------------------- // Shared formatter/event opts types // --------------------------------------------------------------------------- /** * The chart state object passed as `w` to formatters, event opts, and * snapshots. Common access patterns: * - `w.config.chart.type` — the merged user options * - `w.globals.seriesNames` — runtime state bag * * `globals` is intentionally `any` because it is a large, internal surface; * prefer the typed `ApexCharts.ChartState` returned by `getState()` for * stable access. Other internal slices (`dom`, `formatters`, `interact`, * `layout`, etc.) exist on `w` but are not part of the documented API and * may change between releases — the index signature documents their * presence without committing to a stable shape. */ type ApexChartContext = { config: ApexCharts.ApexOptions globals: any [key: string]: any } /** * Opts object passed to most chart event callbacks (click, mouseMove, * keyDown, etc.). For some events (mouseMove, click, keyDown, keyUp) * `w` is also spread into the opts object as a convenience, so members * of `w` (config, globals, etc.) may be accessed directly on opts. The * index signature reflects that. */ type ApexChartEventOpts = { seriesIndex: number dataPointIndex: number w: ApexChartContext [key: string]: any } /** * Opts object passed to most value formatters (dataLabels, tooltip y, * etc.). `series` is included for tooltip formatters; ignore it elsewhere. */ type ApexFormatterOpts = { seriesIndex: number dataPointIndex: number series?: any[][] w: ApexChartContext // Some formatter call sites spread extra state into the opts object (e.g. // the bar total-label formatter spreads `w`), so allow arbitrary reads. [key: string]: any } /** * Opts object passed to legend.formatter and legend.tooltipHoverFormatter. */ type ApexLegendFormatterOpts = { seriesIndex: number w: ApexChartContext } /** * Opts object passed to `colors[]` when a color is provided as a function. */ type ApexColorFormatterOpts = { value: number seriesIndex: number dataPointIndex: number w: ApexChartContext } /** * Opts object passed to `tooltip.custom`. `series` is the parsed series * matrix; `y1`/`y2` are populated for range-bar / range-area tooltips. */ type ApexTooltipCustomOpts = { series: number[][] seriesIndex: number dataPointIndex: number y1?: number y2?: number w: ApexChartContext } declare class ApexCharts { constructor(el: HTMLElement, options: ApexCharts.ApexOptions) /** Renders the chart. Must be called once after construction. */ render(): Promise<ApexCharts> /** * Merges new options into the existing config and re-renders the chart. * @param redraw When true, redraws from scratch instead of animating from previous paths. * @param animate Whether to animate the update. * @param updateSyncedCharts Whether to propagate the update to charts in the same group. * @param overwriteInitialConfig When true, replaces the stored initial config used by resetSeries(). */ updateOptions( options: ApexCharts.ApexOptions, redraw?: boolean, animate?: boolean, updateSyncedCharts?: boolean, overwriteInitialConfig?: boolean ): Promise<ApexCharts> /** * Replaces the chart's series data and re-renders. * @param overwriteInitialSeries When true, replaces the stored initial series used by resetSeries(). */ updateSeries( newSeries: ApexAxisChartSeries | ApexNonAxisChartSeries, animate?: boolean, overwriteInitialSeries?: boolean ): Promise<ApexCharts> /** * Appends a new series to the existing series array and re-renders. * @param overwriteInitialSeries When true, replaces the stored initial series used by resetSeries(). */ appendSeries( newSerie: ApexAxisChartSeries[0] | number, animate?: boolean, overwriteInitialSeries?: boolean ): Promise<ApexCharts> /** * Appends data points to existing series without replacing them. * Each element corresponds to the series at the same index. */ appendData(data: Array<{ data: any[] }>, overwriteInitialSeries?: boolean): Promise<ApexCharts> /** Toggles (show/hide) the series by name. Mirrors a click on the legend item. */ toggleSeries(seriesName: string): object | undefined /** * Linked Views (#4): clears crossfilter dimming across this chart and every * chart in its `chart.group`. No-op unless the `link` feature is bundled. */ clearCrossfilter(): void /** * Measure ruler (#18): arm a sticky measure-ruler mode. Drag A->B on the * plot to read dx/dy/%change/slope. Requires the `measure` feature and * `chart.measure.enabled`. */ startMeasure(): void /** Measure ruler (#18): leave measure mode. */ stopMeasure(): void /** Measure ruler (#18): remove all pinned measure rulers. */ clearMeasures(): void /** Highlights or un-highlights a series when a legend marker is hovered. */ highlightSeriesOnLegendHover(e: MouseEvent, targetElement: HTMLElement): void /** Makes a previously hidden series visible and re-renders. */ showSeries(seriesName: string): void /** Hides a visible series and re-renders. */ hideSeries(seriesName: string): void /** Highlights (dims all other series) the series identified by name. */ highlightSeries(seriesName: string): void /** Returns whether the series identified by name is currently hidden. */ isSeriesHidden(seriesName: string): boolean /** * Resets the chart to its initial series and optionally its initial zoom level. * @param shouldUpdateChart When true, triggers a re-render. Default true. * @param shouldResetZoom When true, restores the initial zoom level. Default true. */ resetSeries(shouldUpdateChart?: boolean, shouldResetZoom?: boolean): void /** Programmatically zooms the x-axis to [min, max]. Requires zoom to be enabled. */ zoomX(min: number, max: number): void /** * Programmatically selects or deselects a data point. * @returns Updated selectedDataPoints array, or null. */ toggleDataPointSelection(seriesIndex: number, dataPointIndex?: number): number[][] | null /** Destroys the chart instance, removing all DOM elements and event listeners. */ destroy(): void /** * Switches the active locale, updating all locale-dependent labels. * @param localeName Must match a name defined in chart.locales. */ setLocale(localeName: string): void /** * Subscribes to a chart event by name. * Event names mirror the chart.events option keys (e.g. 'mounted', 'updated', 'dataPointMouseEnter'). */ addEventListener(name: string, handler: (...args: any[]) => void): void /** Removes a previously registered event listener. */ removeEventListener(name: string, handler: (...args: any[]) => void): void /** Adds an x-axis annotation dynamically after render. */ addXaxisAnnotation(options: XAxisAnnotations, pushToMemory?: boolean, context?: ApexCharts): void /** Adds a y-axis annotation dynamically after render. */ addYaxisAnnotation(options: YAxisAnnotations, pushToMemory?: boolean, context?: ApexCharts): void /** Adds a point annotation dynamically after render. */ addPointAnnotation(options: PointAnnotations, pushToMemory?: boolean, context?: ApexCharts): void /** Removes a specific annotation by its id. */ removeAnnotation(id: string, context?: ApexCharts): void /** Removes all annotations from the chart. */ clearAnnotations(context?: ApexCharts): void /** * Exports the chart to a data URI. * Requires the Exports feature: import 'apexcharts/features/exports'. */ dataURI(options?: { scale?: number; width?: number }): Promise<{ imgURI: string } | { blob: Blob }> /** * Returns the chart's SVG markup as a string. * Requires the Exports feature: import 'apexcharts/features/exports'. */ getSvgString(scale?: number): Promise<string> /** * Triggers a CSV download of the chart's data. * Requires the Exports feature: import 'apexcharts/features/exports'. */ exportToCSV(options?: { series?: ApexAxisChartSeries | ApexNonAxisChartSeries; fileName?: string; columnDelimiter?: string; lineDelimiter?: string }): void /** Returns the SVG.js root element (SVG Paper) for the chart. */ paper(): any /** * Returns the active series renderer for the last render (Strata #2): * `'svg'` (default) or `'canvas'`. Resolves to `'svg'` unless the canvas * renderer feature is bundled and no canvas-unsupported feature is in use. */ getActiveRenderer(): 'svg' | 'canvas' | 'gpu' /** * Facet (#13): re-resolves the `--apx-*` design tokens from the CSS cascade * and re-renders. Use after a runtime token change that is not an OS * color-scheme flip (e.g. the host app swaps its design-system theme), since * tokens are otherwise only re-read when something else triggers a render. */ refreshTokens(): Promise<any> /** * Drills into the child level referenced by `id` (a `drilldown.series` entry). * Requires the Drilldown feature: import 'apexcharts/features/drilldown'. */ drillDown(id: string | number): Promise<ApexCharts> /** * Navigates back one drilldown level. * Requires the Drilldown feature: import 'apexcharts/features/drilldown'. */ drillUp(): Promise<ApexCharts> /** * Navigates back to the root drilldown level. * Requires the Drilldown feature: import 'apexcharts/features/drilldown'. */ drillToRoot(): Promise<ApexCharts> /** Returns the inner SVG group element containing all chart graphics. */ getChartArea(): Element | null /** Returns the sum of all data points whose x value falls within [minX, maxX]. */ getSeriesTotalXRange(minX: number, maxX: number): number[] /** Returns the highest y value in the specified series. */ getHighestValueInSeries(seriesIndex?: number): number /** Returns the lowest y value in the specified series. */ getLowestValueInSeries(seriesIndex?: number): number /** Returns the sum of each series (totals used for percentage calculations). */ getSeriesTotal(): number[] /** Returns all charts in the same chart.group, including this instance. */ getSyncedCharts(): ApexCharts[] /** Returns all charts in the same chart.group, excluding this instance. */ getGroupedCharts(): ApexCharts[] /** * Returns a stable snapshot of chart state for use in formatters, events, * and external integrations. Prefer this over accessing chart.w directly. */ getState(): ApexCharts.ChartState /** * Calls a public method on a chart instance identified by chartID. * Useful when you don't have a direct reference to the instance. */ static exec(chartID: string, fn: string, ...args: any[]): any /** Retrieves a rendered chart instance by its chart.id config value. */ static getChartByID(chartID: string): ApexCharts | undefined /** * Scans the document for elements with data-apexcharts and data-options * attributes and renders a chart in each one automatically. */ static initOnLoad(): void /** Deep-merges source into target and returns the result. */ static merge(target: object, source: object): object /** * Registers chart type constructors for tree-shaking support. * Used by sub-entry points (e.g. apexcharts/charts/bar). */ static use(typeMap: Record<string, new (...args: any[]) => any>): void /** * Registers optional feature modules (Exports, Legend, Toolbar, * ZoomPanSelection, KeyboardNavigation, Annotations). * Call before rendering any chart. */ static registerFeatures(featureMap: Record<string, new (...args: any[]) => any>): void /** * Sets the license key that unlocks the gated premium features (storyboard, * link / crossfilter, ink, measure, contextMenu, perspectives, history). * Without a valid key those features keep working but show an "APEXCHARTS" * trial watermark; a valid key removes it. Keys are shared across the * ApexCharts family (apexgantt, apextree, apexsankey, apex-grid-enterprise, * apexstock). Call before render(); the watermark is re-evaluated on every * render/update. */ static setLicense(key: string): typeof ApexCharts /** * Registers a Weave plugin definition. Available in every bundle; the plugin * activates only when the Weave host is bundled and listed in a chart's * `plugins` config. Re-registering a name replaces the definition. */ static registerPlugin(def: ApexPlugin): typeof ApexCharts /** * Removes a registered Weave plugin definition. Charts holding an active * instance keep it until their plugins config changes or they are destroyed. * Intended for tests and hot-reload flows. */ static unregisterPlugin(name: string): typeof ApexCharts /** * Registers a non-SVG series renderer (Strata #2). The canvas backend * registers itself via `import 'apexcharts/features/renderer-canvas'`. */ static registerRenderer(kind: string, factory: (w: any, ctx: any) => any): void /** * Removes a registered renderer backend; charts fall back to SVG on their * next render. Intended for tests and hot-reload flows. */ static unregisterRenderer(kind: string): void /** * Registers a custom series type (Marks #11): a `{ renderItem }` definition * that draws primitives per datum. Requires the Marks feature to be bundled * (`import 'apexcharts/features/marks'`, included in the full bundle). * Once registered, reference it via `series[].type` or `chart.type`. * Re-registering a custom name replaces it; a built-in chart type name is * rejected with a console warning (the registry is global, so shadowing a * built-in would affect every chart on the page). */ static registerSeriesType(name: string, def: ApexSeriesTypeDef): typeof ApexCharts /** * Removes a custom series type registered via registerSeriesType. Built-in * chart types cannot be unregistered. Intended for tests and hot-reload. */ static unregisterSeriesType(name: string): typeof ApexCharts /** * Registers a named theme (Facet #13): a palette + design-token + mode bundle * referenceable via `theme: { name }`. Sits below explicit config and CSS * `--apx-*` tokens, above the built-in palette/mode defaults. */ static registerTheme(name: string, def: ApexThemeDef): typeof ApexCharts /** * Removes a registered theme. Charts referencing it via `theme.name` fall * back to the built-in defaults on their next render. Intended for tests and * hot-reload flows. */ static unregisterTheme(name: string): typeof ApexCharts /** * Registers a named easing (Cadence #6) referenceable via * `chart.animations.easing: '<name>'`, alongside the built-in curves listed * on `ApexEasing`. `fn` maps linear progress t in [0,1] * to eased progress (back/elastic curves may overshoot 1). */ static registerEasing(name: string, fn: (t: number) => number): typeof ApexCharts /** * Linked Views (#4) Phase 2: get-or-create a crossfilter coordinator by id. * Register one shared record set; each participating chart declares a * dimension + reduction under `chart.link`, and selecting in one chart * re-aggregates the others over the filtered subset. Requires the `link` * feature (`import 'apexcharts/features/link'`); returns null without it. */ static crossfilter(opts: { id: string; records?: any[] }): ApexCrossfilter | null /** Look up an existing crossfilter coordinator by id (null if none). */ static getCrossfilter(id: string): ApexCrossfilter | null /** * Static, pure Perspectives helpers. Available once the feature is imported: * `import 'apexcharts/features/perspectives'`. */ static perspectives: { decode(str: string): ApexPerspective | null fromURL(href?: string): ApexPerspective | null } /** * SSR: render a chart to an SVG string on the server. Available from the * `apexcharts/ssr` entry (`import ApexCharts from 'apexcharts/ssr'`). */ static renderToString( options: ApexCharts.ApexOptions, ssrOptions?: { width?: number; height?: number; scale?: number }, ): Promise<string> /** * SSR: render a chart to hydration-ready HTML (SVG wrapped in the chart * container). Available from the `apexcharts/ssr` entry. */ static renderToHTML( options: ApexCharts.ApexOptions, ssrOptions?: { width?: number height?: number scale?: number className?: string }, ): Promise<string> /** * SSR: hydrate a server-rendered chart container into a live, interactive * chart. Available from the `apexcharts/client` (or `apexcharts/ssr`) entry. */ static hydrate(el: HTMLElement, clientOptions?: ApexCharts.ApexOptions): ApexCharts /** * SSR: hydrate every server-rendered chart container matching `selector` * (defaults to all ApexCharts containers on the page). */ static hydrateAll( selector?: string, clientOptions?: ApexCharts.ApexOptions, ): ApexCharts[] /** SSR: whether a container has already been hydrated. */ static isHydrated(el: HTMLElement): boolean exports: { cleanup(): string svgUrl(): string dataURI(options?: { scale?: number; width?: number }): Promise<{ imgURI: string } | { blob: Blob }> exportToSVG(): void exportToPng(): void exportToCSV(options?: { series?: ApexAxisChartSeries | ApexNonAxisChartSeries; fileName?: string; columnDelimiter?: string; lineDelimiter?: string }): void getSvgString(scale?: number): Promise<string> triggerDownload(href: string, filename?: string, ext?: string): void } /** * Perspectives (#10): serializable, shareable view state. * Requires the Perspectives feature: `import 'apexcharts/features/perspectives'`. */ perspectives: { capture(): ApexPerspective encode(token?: ApexPerspective): string decode(str: string): ApexPerspective | null toURL(): string apply(token: ApexPerspective | string, opts?: { animate?: boolean; mergeOptions?: ApexCharts.ApexOptions }): void save(name: string): string list(): { id: string; name: string; token: ApexPerspective }[] delete(id: string): void } /** * Storyboard: scroll-driven chart choreography (scrollytelling). Beats are * prose elements paired with Perspective views; scrolling a beat across the * trigger line applies its view, and scrolling back reverses it. * Requires the Storyboard feature: `import 'apexcharts/features/storyboard'` * (which includes Perspectives). */ storyboard: { bind(opts?: ApexStoryboardBindOptions): number unbind(): void goTo(beat: number | string, opts?: { animate?: boolean }): void current(): { index: number; key: string | null } | null } /** * Rewind (#3): undo/redo history. * Requires the History feature (`import 'apexcharts/features/history'`) and * chart.history.enabled: true. */ history: { undo(animate?: boolean): void redo(animate?: boolean): void canUndo(): boolean canRedo(): boolean jump(id: string, animate?: boolean): void clear(): void transaction(fn: () => void | Promise<any>, opts?: { label?: string }): Promise<void> entries(): ApexHistoryEntry[] } } interface ApexHistoryEntry { id: string label: string at: number } interface ApexViewState { v: number window: { xaxis: { min: number | null; max: number | null } | null yaxis: ({ min: number | null; max: number | null } | null)[] | null } zoomed: boolean collapsed: number[] ancillaryCollapsed: number[] selectedDataPoints: number[][] theme: { mode: string | null; palette: string | null } | null locale: string | null annotations: { static: any dynamic: { kind: string; params: any }[] } drill: { path: (string | number)[] } | null } interface ApexPerspective { v: number view: ApexViewState options?: Record<string, any> } // ── Storyboard: scroll-driven chart choreography ── interface ApexStoryboardBeatInfo { index: number key: string | null el: Element direction: 'up' | 'down' } interface ApexStoryboardBeat { /** The prose element that triggers the beat (or use `selector`). */ el?: Element selector?: string /** Author key for goTo() and events; defaults to data-apex-beat or the index. */ key?: string /** * The view to apply: a bare ViewState object (partial is fine; a beat * describes the WHOLE target state, e.g. omitting `window` clears the * zoom), a full Perspective token, or an encoded token string. */ view?: Partial<ApexViewState> | ApexPerspective | string /** * updateOptions payload merged into the SAME render as the view, so a beat * can restyle or swap chart.type in one animated transition (cross-type * morphs play out inside it). updateOptions merges, so each beat should * carry every option it depends on, like the view. */ options?: ApexCharts.ApexOptions /** Text pushed to the chart's aria-live region when the beat activates. */ announce?: string /** Escape hatch for arbitrary per-beat work. */ onEnter?(chart: ApexCharts, info: ApexStoryboardBeatInfo): void } interface ApexStoryboardBindOptions { /** * Beats in story order. Omit to auto-discover [data-apex-beat] elements in * document order (data-apex-view holds an encoded token, data-apex-announce * an announcement). */ beats?: ApexStoryboardBeat[] /** Custom scroll container (element or selector); default: the viewport. */ scroller?: Element | string /** 0..1 fraction of the viewport height for the trigger line (default 0.5). */ offset?: number /** Animate beat transitions (default true; prefers-reduced-motion wins). */ animate?: boolean } // ── Weave (#1): public plugin platform ── type ApexPluginHook = | 'afterParse' | 'afterScales' | 'draw' | 'afterUpdate' | 'destroy' interface ApexPluginScales { x(v: number): number y(v: number, axis?: number): number domainX: [number, number] domainY(axis?: number): [number, number] gridWidth: number gridHeight: number ratios: any } interface ApexPluginSeries { name?: string hidden: boolean color?: string points: { x: any; y: any }[] } interface ApexPluginLayer { readonly node: SVGGElement path(opts: { d: string stroke?: string width?: number fill?: string opacity?: number dash?: number className?: string }): any line(opts: { x1: number y1: number x2: number y2: number stroke?: string width?: number dash?: number }): any rect(opts: { x?: number y?: number w?: number h?: number r?: number fill?: string stroke?: string opacity?: number }): any circle(opts: { cx?: number cy?: number r?: number fill?: string stroke?: string }): any text(opts: { x?: number y?: number text?: string color?: string size?: string anchor?: string weight?: string }): any clear(): ApexPluginLayer } interface ApexPluginPayload { api: ApexPluginAPI scales: ApexPluginScales | null data: ApexPluginSeries[] pass: 'full' | 'fast' | 'update' hook: ApexPluginHook } interface ApexPluginAPI { readonly name: string readonly version: number /** * Live: refreshed when the chart's `plugins` config changes, so * `updateOptions({ plugins: [{ name, options }] })` reconfigures an active * plugin in place. The returned object is frozen. */ readonly options: Record<string, any> on(hook: ApexPluginHook, fn: (payload: ApexPluginPayload) => void): ApexPluginAPI off(hook: ApexPluginHook, fn: (payload: ApexPluginPayload) => void): ApexPluginAPI store: Record<string, any> /** * Call INSIDE each draw handler: plugin layers are wiped at the start of * every draw pass, so a handle cached across draws points at a detached node * and its writes vanish silently. */ layer(opts?: { z?: 'front' | 'behind'; className?: string }): ApexPluginLayer readonly scales: ApexPluginScales | null readonly data: ApexPluginSeries[] theme: { readonly mode: string readonly foreColor: string seriesColor(i: number): string token(name: string): any } chart: Record<string, (...args: any[]) => any> /** * Fires on the chart's event bus as `plugin:<pluginName>:<name>` (namespaced * so a plugin can never trigger internal lifecycle subscribers). Listen with * `chart.addEventListener('plugin:myplugin:myevent', fn)`. */ emit(name: string, detail?: any): void readonly el: Element } interface ApexPlugin { name: string apiVersion?: number setup(api: ApexPluginAPI): void destroy?(api: ApexPluginAPI): void } interface ApexPluginActivation { name: string options?: Record<string, any> order?: number } /** * Marks (#11): the per-datum primitive API passed to `renderItem`. Each call * emits a mark (renderer-agnostic: SVG today, canvas above `rendererThreshold`), * tags it with the datum identity so tooltip/selection/keyboard work, and adds * it to the series group. Coordinates are pixels in series space. */ interface ApexMarksAPI { path(opts: { d: string; stroke?: string; width?: number; fill?: string; opacity?: number; fillOpacity?: number; strokeOpacity?: number; dash?: number | number[]; lineCap?: string }): any line(opts: { x1: number; y1: number; x2: number; y2: number; stroke?: string; width?: number; dash?: number | number[] }): any rect(opts: { x?: number; y?: number; w?: number; h?: number; r?: number; fill?: string; stroke?: string; strokeWidth?: number; opacity?: number }): any circle(opts: { cx?: number; cy?: number; r?: number; fill?: string; stroke?: string; strokeWidth?: number }): any text(opts: { x?: number; y?: number; text?: string | string[]; anchor?: 'start' | 'middle' | 'end'; size?: number; color?: string; weight?: number | string }): any } /** Marks (#11): series-space scales (elGraphical-local pixels). */ interface ApexMarksScales { /** data x value -> pixel (numeric axes) */ x(value: number): number /** * Resolve a datum's x pixel by index and value: numeric axes map by value, * categorical band axes (e.g. xaxis.tickPlacement:'between') map by index to * the band center. `ctx.x` is `xAt(dataPointIndex, datum.x)`. */ xAt(index: number, value: any): number /** data y value -> pixel (optionally a specific y-axis index) */ y(value: number, axis?: number): number gridWidth: number gridHeight: number /** pixel width of one x step (numeric) or one band (categorical) */ band: number } /** Marks (#11): context passed to `renderItem` for one datum. */ interface ApexMarksItemContext { /** the raw datum from `series[].data` */ datum: any /** resolved x pixel of this datum */ x: number /** resolved y pixel of this datum's primary value */ y: number scales: ApexMarksScales api: ApexMarksAPI seriesIndex: number dataPointIndex: number /** the series palette colour */ color: string } /** Marks (#11): a custom series type definition for `registerSeriesType`. */ interface ApexSeriesTypeDef { /** Draw one datum by returning/emitting primitives via `ctx.api`. */ renderItem(ctx: ApexMarksItemContext): any /** * Data shape hint. Default 'xy' (scalar y). Set 'rangeXY' when a datum's `y` * is a `[lo, hi]` pair (dumbbell/range mark): both bounds fold into the * y-axis scale and the tooltip renders "lo - hi". */ dataType?: 'xy' | 'rangeXY' | 'custom' /** * Per-datum y-extent override for auto-scaling, when the drawn span is not * simply `y` (e.g. a bullet whose target/bands extend past the value). * Return the value(s) the datum occupies; the min and max fold into the * y-axis scale. Takes precedence over `dataType`. */ yExtent?: (datum: any, dataPointIndex: number) => number | number[] /** Tooltip value(s) for a datum. */ tooltip?: (datum: any) => number | number[] | string } declare namespace ApexCharts { export interface ChartState { // Series data — computed/parsed form used for rendering series: number[][] | any[] seriesNames: string[] colors: string[] labels: string[] seriesTotals: number[] seriesPercent: number[][] seriesXvalues: number[][] seriesYvalues: number[][] // Axis bounds — updated after each render minX: number maxX: number minY: number maxY: number minYArr: number[] maxYArr: number[] minXDiff: number dataPoints: number // Axis scale objects — computed tick/scale results xAxisScale: { result: number[]; niceMin: number; niceMax: number } | null yAxisScale: { result: number[]; niceMin: number; niceMax: number }[] xTickAmount: number // Axis type flags isXNumeric: boolean // Multi-axis series mapping seriesYAxisMap: number[][] seriesYAxisReverseMap: number[] // Chart dimensions — updated after each render/resize svgWidth: number svgHeight: number gridWidth: number gridHeight: number // Interactive state selectedDataPoints: number[][] collapsedSeriesIndices: number[] zoomed: boolean // Chart-type-specific series data (empty arrays when not applicable) seriesX: any[][] seriesZ: number[][] seriesCandleO: number[][] seriesCandleH: number[][] seriesCandleM: number[][] seriesCandleL: number[][] seriesCandleC: number[][] seriesRangeStart: number[][] seriesRangeEnd: number[][] seriesGoals: any[][] } /** A single drilldown level, referenced by a data point's `drilldown` id. */ export interface ApexDrilldownSeries { /** Unique id referenced by a data point's `drilldown` field. */ id: string | number /** Display name used by the breadcrumb and as the (single-series) child series name. */ name?: string /** Child data points for a single-series level. Use this OR `series`. */ data?: any[] /** Full multi-series array for a grouped/stacked drilldown level. Use this OR `data`. */ series?: ApexAxisChartSeries /** Optional chart-type override applied when this level is shown. */ chart?: Pick<ApexChart, 'type' | 'stacked' | 'stackType'> plotOptions?: ApexPlotOptions xaxis?: ApexXAxis yaxis?: ApexYAxis | ApexYAxis[] colors?: Array<string | ((opts: ApexColorFormatterOpts) => string)> /** Optional fill override (e.g. a pattern fill to visually distinguish drilled levels). */ fill?: ApexFill /** Optional legend override (e.g. show a legend when a level is a pie/donut). */ legend?: ApexLegend } /** Payload passed to drill events (`drillDownStart`, `drillDownEnd`, `drillUp`). */ export interface ApexDrilldownEvent { /** The level id navigated away from. */ from: string | number /** The level id navigated to (`'root'` at the top). */ to: string | number /** The clicked data point (drill-down only). */ point?: any seriesIndex?: number dataPointIndex?: number } /** Context passed to the async `onDrillDown` resolver. */ export interface ApexDrilldownContext { point: any seriesIndex?: number dataPointIndex?: number } export interface ApexDrilldown { /** Master switch. When false the feature stays inert even if imported. */ enabled?: boolean /** Inline child levels referenced by data-point `drilldown` ids. */ series?: ApexDrilldownSeries[] breadcrumb?: | false | { show?: boolean position?: 'top-left' | 'top-right' separator?: string rootLabel?: string offsetX?: number offsetY?: number formatter?(label: string, opts: { index: number; depth: number }): string } animation?: { enabled?: boolean /** * Anchor the drill transition at the clicked point: the child unfolds * outward from it (and settles back on drill-up) instead of the chart * simply re-rendering. A gentle scale layered on the SVG. Opt-in. * Defaults to false. */ zoomFromPoint?: boolean /** Base transition duration in ms when `zoomFromPoint` is true. Default 260. */ speed?: number } /** Async resolver called when a drillable point has no inline `series` match. */ onDrillDown?( ctx: ApexDrilldownContext ): ApexDrilldownSeries | Promise<ApexDrilldownSeries> } export interface ApexOptions { annotations?: ApexAnnotations chart?: ApexChart /** * Series colors. Each entry is either a CSS color string (hex, rgb, hsl, * named) or a function returning one per-datapoint. The list cycles when * there are more series than colors. */ colors?: Array<string | ((opts: ApexColorFormatterOpts) => string)> dataLabels?: ApexDataLabels /** Opt-in drilldown navigation. Requires `import 'apexcharts/features/drilldown'`. */ drilldown?: ApexDrilldown fill?: ApexFill forecastDataPoints?: ApexForecastDataPoints grid?: ApexGrid labels?: string[] legend?: ApexLegend markers?: ApexMarkers noData?: ApexNoData /** Weave (#1) plugin activation list. Requires `import 'apexcharts/features/weave'`. */ plugins?: ApexPluginActivation[] plotOptions?: ApexPlotOptions responsive?: ApexResponsive[] parsing?: ApexParsing; series?: ApexAxisChartSeries | ApexNonAxisChartSeries states?: ApexStates stroke?: ApexStroke subtitle?: ApexTitleSubtitle theme?: ApexTheme title?: ApexTitleSubtitle tooltip?: ApexTooltip xaxis?: ApexXAxis yaxis?: ApexYAxis | ApexYAxis[] } // Re-exported sub-types — consumers can use these as: // import type ApexCharts from 'apexcharts' // const yaxis: ApexCharts.ApexYAxis = { ... } export type { ApexAnnotations } export type { ApexChart } export type { ApexEasing } export type { ApexDataLabels } export type { ApexFill } export type { ApexForecastDataPoints } export type { ApexGrid } export type { ApexLegend } export type { ApexMarkers } export type { ApexNoData } export type { ApexPlotOptions } export type { ApexResponsive } export type { ApexParsing } export type { ApexStates } export type { ApexStroke } export type { ApexTitleSubtitle } export type { ApexTheme } export type { ApexTooltip } export type { ApexXAxis } export type { ApexYAxis } export type { ApexAxisChartSeries } export type { ApexNonAxisChartSeries } export type { ApexLocale } export type { ApexDropShadow } export type { ApexChartContext } export type { ApexChartEventOpts } export type { ApexFormatterOpts } export type { ApexLegendFormatterOpts } export type { ApexColorFormatterOpts } export type { ApexTooltipCustomOpts } export type { XAxisAnnotations } export type { YAxisAnnotations } export type { PointAnnotations } export type { TextAnnotations } export type { ImageAnnotations } export type { ApexStoryboardBeat } export type { ApexStoryboardBeatInfo } export type { ApexStoryboardBindOptions } } type ApexDropShadow = { enabled?: boolean top?: number left?: number blur?: number opacity?: number /** * Shadow color. A single string applies to all series; an array applies * per-series (only respected by `chart.dropShadow`). */ color?: string | string[] } /** * Easing for the generic tween runner (Cadence #6): data-update value * transitions, path morphs, marker animate. Accepts a built-in curve name * (the union below is the complete built-in registry), any custom name * registered via `ApexCharts.registerEasing` (hence the widened string), a * CSS-style cubic-bezier control array `[x1, y1, x2, y2]`, or a function * mapping linear progress t in [0,1] to eased progress (back-style curves * may overshoot [0,1]). */ type ApexEasing = | 'linear' | 'easeInSine' | 'easeOutSine' | 'easeInOutSine' | 'easeInQuad' | 'easeOutQuad' | 'easeInOutQuad' | 'easeInCubic' | 'easeOutCubic' | 'easeInOutCubic' | 'easeOutBack' | 'easeInOutBack' | (string & {}) | [number, number, number, number] | ((t: number) => number) /** * Main Chart options * See https://apexcharts.com/docs/options/chart/ */ type ApexChart = { width?: string | number height?: string | number type?: | 'line' | 'area' | 'bar' | 'pie' | 'donut' | 'radialBar' | 'scatter' | 'bubble' | 'heatmap' | 'candlestick' | 'boxPlot' | 'violin' | 'radar' | 'polarArea' | 'rangeBar' | 'rangeArea' | 'treemap' | 'unit' | 'waffle' | 'funnel' | 'pyramid' | 'gauge' /** * Internal — populated when `type` is a first-class alias (`'funnel'`, * `'pyramid'`, `'gauge'`, `'waffle'`). The original requested type is * preserved here while `type` is normalized to the underlying renderer * (`'bar'`, `'radialBar'` or `'unit'`). Read-only for consumers. */ requestedType?: 'funnel' | 'pyramid' | 'gauge' | 'waffle' foreColor?: string fontFamily?: string background?: string offsetX?: number offsetY?: number dropShadow?: ApexDropShadow & { enabledOnSeries?: undefined | number[] } nonce?: string events?: { animationEnd?(chart: ApexCharts, options?: ApexChartEventOpts): void beforeMount?(chart: ApexCharts, options?: ApexChartEventOpts): void mounted?(chart: ApexCharts, options?: ApexChartEventOpts): void updated?(chart: ApexCharts, options?: ApexChartEventOpts): void mouseMove?(e: MouseEvent, chart?: ApexCharts, options?: ApexChartEventOpts): void mouseLeave?(e: MouseEvent, chart?: ApexCharts, options?: ApexChartEventOpts): void click?(e: MouseEvent, chart?: ApexCharts, options?: ApexChartEventOpts): void xAxisLabelClick?(e: MouseEvent, chart?: ApexCharts, options?: ApexChartEventOpts): void legendClick?(chart: ApexCharts, seriesIndex?: number, options?: ApexChartEventOpts): void markerClick?(e: MouseEvent, chart?: ApexCharts, options?: ApexChartEventOpts): void selection?(chart: ApexCharts, options?: { xaxis?: { min: number; max: number }; yaxis?: { min: number; max: number } }): void dataPointSelection?(e: MouseEvent, chart?: ApexCharts, options?: ApexChartEventOpts): void dataPointMouseEnter?(e: MouseEvent, chart?: ApexCharts, options?: ApexChartEventOpts): void dataPointMouseLeave?(e: MouseEvent, chart?: ApexCharts, options?: ApexChartEventOpts): void beforeZoom?(chart: ApexCharts, options?: { xaxis: { min: number; max: number } }): boolean | void beforeResetZoom?(chart: ApexCharts, options?: ApexChartEventOpts): boolean | void zoomed?(chart: ApexCharts, options?: { xaxis: { min: number; max: number }; yaxis?: { min: number; max: number }[] }): void scrolled?(chart: ApexCharts, options?: { xaxis: { min: number; max: number } }): void brushScrolled?(chart: ApexCharts, options?: { xaxis: { min: number; max: number }; yaxis?: { min: number; max: number }[] }): void /** * Linked Views (#4): fired on the source chart when a brush range drives a * crossfilter across the group. */ crossFilter?(chart: ApexCharts, options?: { xaxis: { min: number; max: number }; sourceChartID?: string }): void /** * Linked Views (#4) FILTER mode: fired on the source chart when a click * toggles a crossfilter bucket. `options` carries the coordinator state * (active filters, filtered/total counts), the source chartID, and the key. */ filterChange?(chart: ApexCharts, options?: { filters: Record<string, any>; filteredCount: number; total: number; sourceChartID?: string; key?: any }): void /** * Ink Layer (#7): fired after an annotation is dragged or resized. `options` * carries the annotation type ('point' | 'xaxis' | 'yaxis'), id/index, and * the new data coordinates (x/y, plus x2/y2 for range annotations). */ annotationDragged?(chart: ApexCharts, options?: { type?: 'point' | 'xaxis' | 'yaxis'; id?: string; index: number; x: any; y: any; x2?: any; y2?: any }): void /** * Ink Layer (#7): fired after a point annotation's label is edited inline. * `options` carries the annotation id/index and the new label text. */ annotationEdited?(chart: ApexCharts, options?: { type?: 'point' | 'xaxis' | 'yaxis'; id?: string; index: number; text: string }): void /** * Ink Layer (#7): fired after an annotation is created by clicking the * plot in create mode or from the context menu (note or dashed line). * `options` carries the new annotation type/id/index and its x and/or y. */ annotationCreated?(chart: ApexCharts, options?: { type?: 'point' | 'xaxis' | 'yaxis'; id?: string; index: number; x?: any; y?: any }): void /** * Ink Layer (#7): fired after an annotation is restyled from the floating * note editor (accent color, bold, font size, marker size/shape). `options` * carries the annotation type/id/index and its current label + marker config. */ annotationStyled?(chart: ApexCharts, options?: { type?: 'point' | 'xaxis' | 'yaxis'; id?: string; index: number; label?: any; marker?: any }): void /** * Ink Layer (#7): fired after an annotation is deleted from the floating * note editor. `options` carries the annotation type/id and the index it * occupied before removal. */ annotationDeleted?(chart: ApexCharts, options?: { type?: 'point' | 'xaxis' | 'yaxis'; id?: string; index: number }): void /** * Measure ruler (#18): fired when a measure ruler is drawn. Requires the * `measure` feature. `options` carries the endpoints and the deltas. */ measured?(chart: ApexCharts, options?: { from: { x: any; y: any }; to: { x: any; y: any }; dx: number; dy: number; percentChange: number; slope: number }): void /** * Storyboard: fired when scrolling (or goTo) activates a beat. Requires * the `storyboard` feature and an active chart.storyboard.bind(). */ beatChange?(chart: ApexCharts, options?: ApexStoryboardBeatInfo): void keyDown?(e: KeyboardEvent, chart?: ApexCharts, options?: ApexChartEventOpts): void keyUp?(e: KeyboardEvent, chart?: ApexCharts, options?: ApexChartEventOpts): void /** Fired before a drill-down transition begins. Requires the Drilldown feature. */ drillDownStart?(info: ApexCharts.ApexDrilldownEvent, chart?: ApexCharts, options?: ApexChartEventOpts): void /** Fired after a drill-down transition completes. Requires the Drilldown feature. */ drillDownEnd?(info: ApexCharts.ApexDrilldownEvent, chart?: ApexCharts, options?: ApexChartEventOpts): void /** Fired after navigating back up a drilldown level. Requires the Drilldown feature. */ drillUp?(info: ApexCharts.ApexDrilldownEvent, chart?: ApexCharts, options?: ApexChartEventOpts): void /** Fired when an async onDrillDown resolver throws or rejects. Requires the Drilldown feature. */ drillDownError?(info: { id: string | number | null; error: any }, chart?: ApexCharts, options?: ApexChartEventOpts): void } brush?: { enabled?: boolean autoScaleYaxis?: boolean target?: string targets?: string[] } /** * Linked Views (#4): crossfilter / linked highlighting. Requires the `link` * feature (`import 'apexcharts/features/link'`). Two modes: * * HIGHLIGHT (P1): `enabled` with no `dimension`. Charts sharing a * `chart.group` form a set; brushing a range (needs `chart.selection.enabled`) * on any member dims every member's marks whose x is outside the range, in * place (no re-render). * * FILTER (P2): set `dimension` (its presence selects this path). Each chart * declares a dimension + reduction over a shared record set registered with * `ApexCharts.crossfilter({ id, records })`; clicking a bucket re-aggregates * every other participating chart over the filtered subset. */ link?: { /** @default false */ enabled?: boolean /** Highlight mode (P1) label; filter mode is selected by `dimension`. @default 'highlight' */ mode?: 'highlight' | 'filter' /** Opacity applied to dimmed (unselected / out-of-range) marks. @default 0.2 */ dimOpacity?: number /** FILTER mode: crossfilter coordinator id (defaults to `chart.group`). */ id?: string /** * FILTER mode: `(row) => key`. Its presence selects filter mode. For a * heatmap (matrix) dimension it returns `[xKey, yKey]`. */ dimension?: (row: any) => any /** FILTER mode: reduction over a bucket's rows. @default 'count' */ reduce?: 'count' | { sum?: string; avg?: string; min?: string; max?: string } | ((rows: any[]) => number) /** * FILTER mode: bucket kind. Else inferred: `bins` present => 'range', a * heatmap chart => 'matrix' (2D), otherwise 'category'. */ type?: 'category' | 'range' | 'matrix' /** FILTER mode (range dims): binning spec. */ bins?: { width?: number; count?: number; thresholds?: number[] } /** FILTER mode (category dims): key ordering. @default 'first-seen' */ order?: 'first-seen' | 'asc' | 'desc' | ((a: any, b: any) => number) /** FILTER mode (axis charts): the derived series name. @default 'Count' */ seriesName?: string } /** * Ink Layer (#7): direct-manipulation annotations. When enabled, every point * annotation is draggable (unless it sets `draggable:false`); or opt in per * annotation with `annotations.points[].draggable`. Clicking an ink-managed * annotation opens a floating editor card anchored to it: rename inline, * recolor via accent swatches, toggle bold, step the font size, size/reshape * the marker, or delete the note. Axis-line annotations get separate Label * and Line color rows, so restyling the label chip never touches the stroke. * Requires the `ink` feature (`import 'apexcharts/features/ink'`). Fires the * `annotationDragged`, `annotationEdited`, `annotationStyled` and * `annotationDeleted` events. */ ink?: { /** @default false */ enabled?: boolean /** * Show a minimal "add note" tool palette; clicking it arms create mode (the * next plot click drops an editable, draggable annotation). @default false */ palette?: boolean /** * Snap a dragged point / axis-line annotation to the nearest gridline * (numeric x + linear y). @default false */ snap?: boolean /** * Accent swatches offered by the floating note editor. Defaults to a * built-in 6-color palette when omitted. */ noteColors?: string[] } /** * Measure ruler (#18): a measure/delta ruler. Requires the `measure` * feature (`import 'apexcharts/features/measure'`). Hold `key` and drag * A->B on the plot, or call `chart.startMeasure()`, to read * dx/dy/%change/slope in data space; on release the ruler pins as a * data-anchored overlay that re-projects on zoom/resize. Fires `measured`. */ measure?: { /** @default false */ enabled?: boolean /** * 'span': finance-style vertical band between two x-positions with a * change/%/range readout, endpoints snapped to the first series. 'free': * a diagonal ruler between two arbitrary points. @default 'span' */ mode?: 'span' | 'free' /** Key held to arm a drag when not in sticky mode. @default 'm' */ key?: string /** Pin the ruler as a data-anchored overlay on release. @default true */ pinOnRelease?: boolean /** * Semantic colors. Every element also has a stable CSS class and a * direction class (apexcharts-measure-up|down|flat) for stylesheet theming. */ colors?: { up?: string; down?: string; neutral?: string; guide?: string } /** Span mode: draw the shaded band between the two x-positions. @default true */ band?: boolean /** Span mode: draw the vertical dashed reference lines. @default true */ guides?: boolean /** Draw the endpoint dots on the series line. @default true */ markers?: boolean /** Value formatters for the readout. */ format?: { x?: (x: number) => string y?: (y: number) => string percent?: (pct: number) => string } /** * Full readout override. Receives the measure info and returns a string or * an array of lines. Overrides the default readout text. */ label?: (info: { from: { x: any; y: any } to: { x: any; y: any } dx: number dy: number percentChange: number slope: number mode: 'span' | 'free' }) => string | string[] } /** * Radial Actions (#chrome): right-click / long-press context menu. Requires * the `contextMenu` feature (`import 'apexcharts/features/context-menu'`). * Each action receives the clicked data coordinates, so verbs act at that * point rather than chart-wide. 'measure' is shown only when the measure tool * is enabled. When the ink feature is bundled, 'annotate' drops an * ink-managed note that opens its floating editor (rename, restyle, delete), * and 'xline' / 'yline' drop ink-managed dashed lines the same way ('xline' * vertical at the clicked x, 'yline' horizontal at the clicked y). */ contextMenu?: { /** @default false */ enabled?: boolean /** * Ordered menu items: built-in ids and/or custom entries. @default * ['annotate','xline','yline','measure'] */ items?: Array< | 'annotate' | 'xline' | 'yline' | 'measure' | { id?: string label?: string icon?: string onClick?: ( chart: