Download Core

Methods reference

Chart instance and static methods with signatures.

View .md Agent setup

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/<name> 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=&lt;token&gt; 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 &lt; 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).

WestCoast Charts 1.1.5 · generated from the library guide at commit 95f093ba. Code examples in the guide are executed by the library's docs check.