# Methods reference
> WestCoast Charts 1.1.5, release, public Core release, on npm. HTML: https://westcoast-charts.com/docs/reference/methods/ · Index for agents: https://westcoast-charts.com/llms.txt · Source: library guide, commit 95f093ba
Methods of the chart class, as declared in the type definitions. `WestCoastCharts` and `ApexCharts`
are the same class, so every method is available under both names.
## Instance methods
| Method | Signature | Description |
| --- | --- | --- |
| `new WestCoastCharts` | new WestCoastCharts(el: any, options: any) | Creates a chart for the element (or selector result) `el` with the given options; nothing is drawn until `render()`. |
| `render` | render(): Promise<void> | Draws the chart into its element; resolves when the first render is done. A chart with `chart.id` is registered for `getChartByID` and `exec`. |
| `updateOptions` | updateOptions( options: any, redrawPaths?: boolean, animate?: boolean, updateSyncedCharts?: boolean ): Promise<void> | Merges `options` into the current config and redraws. `redrawPaths` (default `false`) redraws from scratch instead of morphing; `animate` (default `true`); `updateSyncedCharts` (default `true`) applies the change to charts in the same `chart.group`. An update identical to the previous one is skipped. |
| `updateSeries` | updateSeries( newSeries: ApexAxisChartSeries \| ApexNonAxisChartSeries \| WccSeries[], animate?: boolean ): Promise<void> | Replaces all series and redraws; `animate` defaults to `true`. Series are normalised for the chart type first. |
| `appendSeries` | appendSeries( newSeries: ApexAxisChartSeries \| ApexNonAxisChartSeries \| WccSeries[], animate?: boolean ): Promise<void> | Adds one series after the existing ones and redraws; `animate` defaults to `true`. |
| `appendData` | appendData(data: any[], overwriteInitialSeries?: boolean): void | Appends points: `data[i].data` is added to the end of series `i`; entries that are `null` or missing leave that series unchanged. `overwriteInitialSeries` (default `true`) also stores the result as the initial series used by reset. |
| `toggleSeries` | toggleSeries(seriesName: string): any | Hides the named series if visible, shows it if hidden, as a legend click does. |
| `isSeriesHidden` | isSeriesHidden(seriesName: string): boolean | `true` when the named series is hidden (legend or `hideSeries`); `false` when visible or unknown. |
| `highlightSeries` | highlightSeries(seriesName: string): any | Emphasises the named series and dims the others, as hovering its legend item does. |
| `showSeries` | showSeries(seriesName: string): void | Shows the named series if it is hidden. |
| `hideSeries` | hideSeries(seriesName: string): void | Hides the named series. |
| `resetSeries` | resetSeries(shouldUpdateChart?: boolean, shouldResetZoom?: boolean): void | Restores the initial series and shows hidden series. `shouldUpdateChart` (default `true`) redraws; `shouldResetZoom` (default `true`) also resets the zoom of that redraw. |
| `zoomX` | zoomX(min: number, max: number): void | Zooms the x axis to `min`..`max` (timestamps on datetime axes). |
| `toggleDataPointSelection` | toggleDataPointSelection(seriesIndex: number, dataPointIndex?: number): any | Selects or deselects a data point as a click does; pie-like charts take the slice index as `seriesIndex`. Returns the element, or `null` with a warning when it is not found. |
| `destroy` | destroy(): void | Removes the chart, its listeners and its feature state from the page. |
| `setLocale` | setLocale(localeName: string): void | Switches to a locale from `chart.locales` (or the global `Apex.chart.locales`); throws when the name is not found. Text drawn already changes on the next update. |
| `paper` | paper(): void | Returns the internal SVG drawing surface of the chart (for low-level drawing). |
| `addXaxisAnnotation` | addXaxisAnnotation(options: any, pushToMemory?: boolean, context?: any): void | Adds an x-axis annotation (same fields as `annotations.xaxis[]`). `pushToMemory` (default `true`) keeps it across redraws. |
| `addYaxisAnnotation` | addYaxisAnnotation(options: any, pushToMemory?: boolean, context?: any): void | Adds a y-axis annotation (same fields as `annotations.yaxis[]`). `pushToMemory` (default `true`) keeps it across redraws. |
| `addPointAnnotation` | addPointAnnotation(options: any, pushToMemory?: boolean, context?: any): void | Adds a point annotation (same fields as `annotations.points[]`). `pushToMemory` (default `true`) keeps it across redraws. |
| `removeAnnotation` | removeAnnotation(id: string, options?: any): void | Removes the annotation with this `id`. |
| `clearAnnotations` | clearAnnotations(options?: any): void | Removes the drawn annotations and forgets those added through the add*Annotation methods. |
| `dataURI` | dataURI(options?: { scale?: number, width?: number }): Promise<{ imgURI: string } \| { blob: Blob }> | Renders the chart to a PNG and resolves `{ imgURI }` (a data URL). `scale` multiplies the size; `width` sets the pixel width instead. Rejects under a Content-Security-Policy without `blob:`/`data:` image sources. |
| `refreshTokens` | refreshTokens(): Promise<void> | Re-reads the CSS design tokens (`--wcc-*`) after a CSS change and re-themes the chart without animation. |
| `exports` | exports: { cleanup(): string svgUrl(): string dataURI(options?: { scale?: number, width?: number }): Promise<{ imgURI: string } \| { blob: Blob }> exportToSVG(): void exportToPng(): void exportToCSV(options?: { series?: any, fileName?: string, columnDelimiter?: string, lineDelimiter?: string }): void getSvgString(scale?: number): void triggerDownload(href: string, filename?: string, ext?: string): void } | Export helpers used by the toolbar menu (SVG, PNG, CSV and the image data URL). |
## Static methods
| Method | Signature | Description |
| --- | --- | --- |
| `exec` | exec(chartID: string, fn: string, ...args: Array<any>): any | Calls the public method `fn` with `args` on the chart registered under `chartID`; returns its result, or nothing when the chart or method is unknown. |
| `getChartByID` | getChartByID(chartID: string): ApexCharts \| undefined | The rendered chart whose `chart.id` is `chartID`, or `undefined`. |
| `escapeHtml` | escapeHtml(value: any): string | West Coast Charts: escape a value for use inside formatter / tooltip.custom HTML |
| `sanitizeHtml` | sanitizeHtml(html: string): string | West Coast Charts: run markup through the built-in sanitizer |
| `themePresets` | themePresets: string[] | West Coast Charts: names of the built-in theme presets |
| `merge` | merge<T = any, S = any>(target: T, source: S): T & S | deep-merge `source` into a copy of `target` the way chart options are merged (arrays are replaced, plain objects merged) and return the result |
| `registerEasing` | registerEasing( name: string, fn: ((t: number) => number) \| [number, number, number, number] ): boolean | West Coast Charts: register a named easing for chart.animations.easing: a function of t (0..1) or cubic-bezier control points. Returns false when the name or curve is invalid. |
| `registerTheme` | registerTheme( name: string, def: { palette?: string[] mode?: 'light' \| 'dark' preset?: string tokens?: WccThemeTokens & { accent?: string fore?: string series?: string[] } } ): boolean | Registers a named theme for `theme.name`: a palette, mode, base preset and design tokens. Returns `true` when registered. |
| `unregisterTheme` | unregisterTheme(name: string): boolean | Removes a theme registered with `registerTheme`; returns the result of the removal. |
| `getThemeTokens` | getThemeTokens( preset?: string, mode?: 'light' \| 'dark', overrides?: WccThemeTokens ): WccThemeTokens | West Coast Charts: resolved design tokens of a preset in a mode, with optional overrides |
| `initOnLoad` | initOnLoad(): void | Renders a chart into every element with a `data-apexcharts` attribute, using the JSON in its `data-options` attribute. |
| `crossfilter` | crossfilter?: (opts: { id?: string \| number; records?: any[]; key?: string; [key: string]: any }) => any | link feature: creates the crossfilter record set shared by the charts whose `chart.link.id` (or `chart.group`) equals `opts.id`; called again with the same id it replaces the records. `key` names the record id field. |
| `getCrossfilter` | getCrossfilter?: (id: string \| number) => any | link feature: the crossfilter record set with that id, or `null` |
| `perspectives` | perspectives?: { fromURL(url?: string): any } | perspectives feature: read a perspective encoded in a URL (default location.href) |
| `validate` | validate?: (options: ApexCharts.ApexOptions \| any, opts?: { premium?: boolean; maxIssues?: number }) => { ok: boolean errors: number warnings: number exitCode: number schemaVersion: string issues: { kind: string; severity: 'error' \| 'warning'; path: string; pointer: string; message: string; hint: string \| null; suggestion: any; alternatives: any[]; fix: any; exitCode: number }[] } | validator module (west-coast-charts/agent/validate): structured option issues, docs/errors.md |
| `applyFixes` | applyFixes?: <T = any>(options: T, issues: any[]) => T | validator module: a copy of the options with the issues' fixes applied |
| `validateMode` | validateMode?: 'warn' \| 'error' \| 'off' | validator module: default of chart.validate. Default: `'warn'`. |
| `registerMap` | registerMap(name: string, data: object): boolean | West Coast Charts: register TopoJSON / GeoJSON for chart.type 'map' (west-coast-charts/premium) |
| `getMapMetadata` | getMapMetadata?: (source: string \| object, objectName?: string \| null) => { name: string; ids: string[]; keys: string[] } \| null | Premium map registry metadata for validation; null when no map is registered. |
| `setLicenseKey` | setLicenseKey?: (key: string) => Promise<ApexCharts.WestCoastChartsLicense \| null> | West Coast Charts premium (present once west-coast-charts/premium is installed): the licence key for every premium chart without its own chart.licenseKey. Checked offline; resolves to the payload or null. Without a valid key premium charts still render in full, with a small watermark (never on localhost, 127.0.0.1, *.local). docs/spec/06-premium-types.md §10. |
| `headless` | headless: boolean | Headless mode (CLI, MCP, snapshot jobs): every chart renders deterministically (`chart.deterministic`) unless it sets `deterministic: false`. Same as `globalThis.WCC_HEADLESS = true`. Default: `false`. |
| `use` | use( plugin: \| ApexCharts.WestCoastChartsPlugin \| ReadonlyArray<ApexCharts.WestCoastChartsPlugin> \| { readonly [key: string]: ApexCharts.WestCoastChartsPlugin } ): typeof ApexCharts | West Coast Charts: install a plugin, an array of plugins or an object of plugins: `WestCoastCharts.use(types)` from 'west-coast-charts/types', premium, features. Idempotent per plugin and plugin name. |
## Methods added by features
Present once the feature is installed (`west-coast-charts/features/` or `west-coast-charts/full`), so they
are optional in the typings: check before calling, e.g. `chart.history && chart.history.undo()`.
| Member | Signature | Description |
| --- | --- | --- |
| `drillDown` | drillDown?(id: string \| number): Promise<any> | drilldown: open the level with this drilldown.series id |
| `drillUp` | drillUp?(): Promise<any> | drilldown: back one level |
| `drillToRoot` | drillToRoot?(): Promise<any> | drilldown: back to the top level |
| `clearDrilldownCache` | clearDrilldownCache?(id?: string): void | drilldown: forget loaded levels (one id, or all) |
| `clearCrossfilter` | clearCrossfilter?(): void | link: clear this chart's crossfilter selection |
| `describe` | describe?(opts?: { format?: 'json'; maxRows?: number }): WccDescribeResult | agent/describe ('west-coast-charts/agent/describe'): what the chart drew, from the same code as the accessible description and data table. `'json'` (default): WccDescribeResult (dist/schema/wcc-describe.schema.json); `'table'`: the data table; `'markdown'`: a string. |
| `describe` | describe?(opts: { format: 'table'; maxRows?: number }): WccDescribeTable | |
| `describe` | describe?(opts: { format: 'markdown'; maxRows?: number }): string | |
| `promotePanel` | promotePanel?(key: any): Promise<any> | trellis: show one panel at full size (null when there is no such panel) |
| `restorePanels` | restorePanels?(): Promise<any> | trellis: back to the grid |
| `restorePanel` | restorePanel?(): Promise<any> | trellis: alias of restorePanels |
| `getPromotedPanel` | getPromotedPanel?(): any | trellis: key of the promoted panel, or null |
| `getPanels` | getPanels?(): any[] | trellis: the panels in display order |
| `getPanel` | getPanel?(key: any): any | trellis: one panel by key |
| `highlightFilter` | object | highlight-filter feature |
| `highlightFilter.set()` | set(rows: any, opts?: any): Promise<any> | Sets the parts: an array per series, or a function `(seriesIndex, dataPointIndex, seriesName, x, value, datum, w)` returning the part of each point; `null` clears. `opts.series` limits it to some series; `opts.animate: false` skips the animation. |
| `highlightFilter.clear()` | clear(opts?: any): Promise<any> | Removes all parts and redraws the wholes. |
| `highlightFilter.valueAt()` | valueAt(seriesIndex: number, dataPointIndex: number): number \| null \| undefined | The part of a point: a number, `null` (point without part) or `undefined` (no parts). |
| `highlightFilter.isActive()` | isActive(): boolean | `true` when the feature is enabled, the chart type is supported and at least one part is set. |
| `perspectives` | object | perspectives feature: saved views |
| `perspectives.capture()` | capture(opts?: any): any | The current view state as plain JSON; `opts.only` limits it to some slices. |
| `perspectives.apply()` | apply(perspective: any, opts?: any): Promise<any> | Brings the chart to a state, a token or a saved name; resolves `{ state }` when landed, or `{ superseded: true }` when a newer apply started. `opts.animate: false` jumps. |
| `perspectives.toURL()` | toURL(perspective?: any, base?: string): string | URL with `#wcc=<token>` for a state (default: the current one); `base` defaults to the page URL. |
| `perspectives.encode()` | encode(perspective: any): string | Compact URL-safe token of a state (default: the current one). |
| `perspectives.decode()` | decode(text: string): any | The state of a token. |
| `perspectives.save()` | save(name: string, perspective?: any): any | Saves a state (default: the current one) under a name, in localStorage per chart id; returns the state. |
| `perspectives.list()` | list(): any[] | Saved perspectives, oldest first: `[{ name, at, state }]`. |
| `perspectives.load()` | load(name: string, opts?: any): Promise<any> | Applies a saved perspective (same result as `apply`). |
| `perspectives.delete()` | delete(name: string): boolean | Deletes a saved perspective; `false` when there was none. |
| `storyboard` | object | storyboard feature |
| `storyboard.bind()` | bind(config?: { [key: string]: any }): any | Binds scroll beats `{ beats: [{ selector \| element, view?, options?, key? }], wcc: { offset, scrub, nav, initial, describe } }`, replacing an earlier binding; resolves when the initial beat has landed. |
| `storyboard.goTo()` | goTo(step: number, opts?: any): Promise<any> | Goes to beat `step`; resolves `{ index }` when landed or `{ superseded: true }`. |
| `storyboard.current()` | current(): any | The current beat `{ index, key, element }`, or `null`. |
| `storyboard.unbind()` | unbind(): void | Stops observing the beats. |
| `history` | object | history feature |
| `history.undo()` | undo(): Promise<{ index: number }> | Reverts the last applied entry; resolves with the new index. |
| `history.redo()` | redo(): Promise<{ index: number }> | Re-applies the next entry; resolves with the new index. |
| `history.canUndo()` | canUndo(): boolean | `true` when an entry can be undone. |
| `history.canRedo()` | canRedo(): boolean | `true` when an undone entry can be redone. |
| `history.jump()` | jump(index: number): Promise<{ index: number }> | Moves to `index` applied entries (0 = everything undone). |
| `history.clear()` | clear(): void | Forgets all entries; the current view becomes the starting point. |
| `history.entries()` | entries(): any[] | Copies of the entries: `{ id, label, kind, at, before, after, applied, chartId }`. |
| `history.transaction()` | transaction<T>(label: string, fn: () => T \| Promise<T>): Promise<T> | one undo entry for everything fn changes |
| `history.index` | readonly index: number | Number of entries currently applied (0 = everything undone). |
| `history.size` | readonly size: number | Number of entries. |
| `orient` | object | orient feature ("Ansicht ausrichten"): turning radial charts |
| `orient.rotateBy()` | rotateBy(by: number \| { steps: number }, opts?: { animate?: boolean; snap?: boolean; announce?: boolean }): Promise<WccOrientState> | Turns by degrees (snapped to whole segments) or `{ steps }` (time windows, see `chart.orient.step`); positive = clockwise. |
| `orient.rotateTo()` | rotateTo(segment: number \| string \| Date \| { segment: number \| string }, position?: 'top' \| 'right' \| 'bottom' \| 'left' \| number, opts?: { animate?: boolean; align?: 'start' \| 'center' \| 'end'; announce?: boolean }): Promise<WccOrientState & { missed?: boolean }> | Turns a segment to a position: an index, a category or layer segment name, a time `'HH:MM'` / `Date` (its window on a clock ring). Times align their window start, goal arcs their end, anything else its middle (`opts.align`). |
| `orient.set()` | set(degrees: number, opts?: { animate?: boolean; announce?: boolean }): Promise<WccOrientState> | Turns to an absolute angle (the short way round). |
| `orient.reset()` | reset(opts?: { animate?: boolean; announce?: boolean }): Promise<WccOrientState> | Back to the default orientation. |
| `orient.get()` | get(): WccOrientState | The current turn. |
| `orient.segmentAt()` | segmentAt(position?: 'top' \| 'right' \| 'bottom' \| 'left' \| number): string \| null | Name of the segment at a position (default `'top'`), or `null`. |
| `orient.describe()` | describe(): string | The sentence `describe()` and the accessible description add while the chart is turned; `''` otherwise. |
| `wcc` | object | narrative feature (wcc.narrative) and other per-chart West Coast Charts runtimes |
| `wcc.narrative` | object | narrative feature: player of the wcc.narrative frames |
| `wcc.narrative.play()` | play(): Promise<void> | Starts playback (from the start when at the last frame of a frames source). |
| `wcc.narrative.pause()` | pause(): void | Stops playback. |
| `wcc.narrative.seek()` | seek(target: number \| { t: any }, opts?: { animate?: boolean; [key: string]: any }): Promise<any> | Goes to frame `target` (fractional = interpolated) or to `{ t }`. |
| `wcc.narrative.step()` | step(d: number): Promise<any> | Pauses and moves one frame back (`d < 0`) or forward. |
| `wcc.narrative.live()` | live(): Promise<any> | Record source: back to the newest data. |
| `wcc.narrative.frames()` | frames(): any[] | Copies of the frames `{ t, series, label?, caption? }`. |
| `wcc.narrative.current()` | current(): any | `{ index, position, t, label, playing, live }` of the frame shown, or `null`. |
| `wcc.narrative.record()` | record(on?: boolean): boolean | Record source: pauses (`false`) or resumes recording; returns the new state. |
| `wcc.narrative.clear()` | clear(): void | Removes the frames (record source: keeps the current data as the first frame). |
| `wcc.narrative.setSpeed()` | setSpeed(speed: number): void | Playback speed: `0.5`, `1` or `2` (other values use `1`). |