Upgrading apexcharts 5 to 6
Breaking5.16.0 → 6.10.0Breaking3Security1New83Changed42Fixed59Other14
SecurityNeutralises CSV export field values starting with a formula character to prevent formula injection.Advisory ↗
BreakingUpgrade verdict
3 breaking changes and a security fix.
In plain terms
- Clicking a legend item on these charts now hides or shows the slice rather than highlighting it.
- Some paid features now need a higher plan; existing pro customers using them will see a watermark.
- If your custom CSS or JavaScript relied on one wrapper element per point in scatter or bubble charts, that no longer works. Selectors that target the marker paths directly still work.
- Exported CSV files can no longer run spreadsheet formulas from chart data.
Must act 4 items need code or config changes
Requires Node.js ^20.19.0 || ^22.12.0 || >=24.0.0 from 6.7.0 (none stated before).
Adds apex-commons ^0.5.0.
Installs 1 package in all (was 0).
What you must change
Breaking3
Legend click on pie, donut and polarArea now toggles the slice in and out instead of darkening and expanding it.
Premium features now require a premium or enterprise plan; a pro key or free tier keeps them in trial mode with a watermark.
unitstoryboardlinkinkmeasurecontextMenuperspectiveshistoryScatter and bubble charts now have a single .apexcharts-series-markers group per series, so selectors that targeted per-point wrapper groups break.
.apexcharts-series-markers.apexcharts-markerSecurity1
Neutralises CSV export field values starting with a formula character to prevent formula injection.
API changes
Generated by DepDelta from published .d.ts files. Not mixed with prose notes.
- removed:
property InteractState.lastWheelExecution: number - changed:
method ChartContext.fastUpdate(options?: any): Promise<any> → method ChartContext.fastUpdate(animate?: boolean, prevAxisScaleSig?: string): Promise<any> - changed:
property ChartGlobals.ancillaryCollapsedSeries: Array<{ index: number; data: number[]; type: string }> → property ChartGlobals.ancillaryCollapsedSeries: Array<{ index: number; data: any; type: string; name?: string }> - changed:
property ChartGlobals.collapsedSeries: Array<{ index: number; data: number[]; type: string }> → property ChartGlobals.collapsedSeries: Array<{ index: number; data: any; type: string; name?: string }> - changed:
property ChartGlobals.delayedElements: Array<{ el: Element; index?: number }> → property ChartGlobals.delayedElements: Array<{ el: Element; index?: number; holdUntilComplete?: boolean }> - added:
interface HistogramData - added:
property ChartContext.contextMenu: any - added:
property ChartContext.history: any - added:
property ChartContext.ink: any - added:
property ChartContext.linkedViews: any - added:
property ChartContext.measure: any - added:
property ChartContext.perspectives: any - added:
property ChartContext.renderer: any - added:
property ChartContext.rendererController: any - added:
property ChartContext.storyboard: any - added:
property ChartContext.weave: any - added:
property ChartGlobals._initialSeriesPeek: ApexOptions['series'] - added:
property ChartGlobals.activeRenderer: any - added:
property ChartGlobals.barCanvasCoords: Record<number, Record<number, any>> | null - added:
property ChartGlobals.histogramRawSeries: Array<{ data: any }> | null - added:
property ChartGlobals.lastResizeSignature: { w: number; h: number; iw?: number } | null - added:
property ChartGlobals.prevChromeFrame: { xLabels: { text: string; display: string; pos: number; transform: string | null }[]; yLabels: { text: string; display: string; pos: number; transform: string | null }[]; vGrid: number[]; hGrid: number[]; xScale: { min: number; max: number; width: number } | null; yAnchors: { min: number; max: number; pLo: number; pHi: number } | null } | null - added:
property ChartGlobals.prevDataLabels: Map<string, { cx: number; cy: number; val: number }> | null - added:
property ChartGlobals.prevPolarAngles: number[] | null - added:
property ChartGlobals.prevStreamFrame: { seriesX: (number | null)[][]; seriesY: (number | null)[][]; xPixels: (number | null)[][]; yPixels: (number | null)[][]; rPixels?: number[][]; labels: any[]; isXNumeric: boolean } | null - added:
property ChartGlobals.radialNeedleRAF: number | null - added:
property ChartGlobals.seriesRangeName: Record<number, Record<number, string>> - added:
property ChartGlobals.tokenSurface: string | undefined - added:
property ChartGlobals.treemapFocusKey: string | null - added:
property ChartGlobals.treemapMaxDepth: number - added:
property ChartGlobals.treemapRawSeries: Array<{ data: any }> | null - added:
property ChartGlobals.treemapRoots: any[] | null - added:
property ChartGlobals.unitExitRAF: number | null - added:
property ChartGlobals.unitGatherRAF: number | null - added:
property ChartStateW.histogramData: HistogramData - added:
property HistogramData.binWidth: number - added:
property HistogramData.capped: boolean - added:
property HistogramData.counts: number[][] - added:
property HistogramData.edges: number[] - added:
property HistogramData.rule: string - added:
property InteractState.measureEnabled: boolean - added:
property InteractState.momentum?: { busy: boolean; pinch: any; panState: any; samples: { x: number; t: number }[]; inertiaRAF: number | null } - added:
property InteractState.shiftWasPressed?: boolean - added:
property InteractState.wheel?: { factor: number; clientX: number; rafId: number | null; endTimer: any } - added:
property LayoutCoords.gridPad: { top: number; right: number; bottom: number; left: number } - added:
property SeriesData._parsedExtrema?: Array<| { ref: Array<number | null>; len: number; maxY: number; lowestY: number; negMinY: number; hasNulls: boolean; yDec: number; xref: any[]; xNumeric: boolean; minX: number; maxX: number; xSorted: boolean; minXDiff: number } | undefined> - added:
property SeriesData.unitData?: any[][]
- added:
method ApexCharts.clearCrossfilter(): void - added:
method ApexCharts.clearDrilldownCache(id?: string | number): ApexCharts - added:
method ApexCharts.clearMeasures(): void - added:
method ApexCharts.getActiveRenderer(): 'svg' | 'canvas' | 'gpu' - added:
method ApexCharts.refreshTokens(): Promise<any> - added:
method ApexCharts.rowSeries(opts?: { maxRows?: number }): ApexUnitRowSeries[] | null - added:
method ApexCharts.startMeasure(): void - added:
method ApexCharts.stopMeasure(): void - added:
property ApexCharts.ApexDrilldown.cache?: boolean - added:
property ApexCharts.ApexDrilldown.loading?: | false | { show?: boolean; text?: string } - added:
property ApexCharts.ApexDrilldown.marker?: { show?: boolean; size?: number; shape?: 'circle' | 'square' | 'rect'; fillColor?: string; strokeColor?: string } - added:
property ApexCharts.ApexDrilldownContext.id: string | number | null - added:
property ApexCharts.ApexOptions.plugins?: ApexPluginActivation[] - added:
property ApexCharts.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[] } - added:
property ApexCharts.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 } - added:
property ApexCharts.storyboard: { bind(opts?: ApexStoryboardBindOptions): number; unbind(): void; goTo(beat: number | string, opts?: { animate?: boolean }): void; current(): { index: number; key: string | null } | null } - added:
static method ApexCharts.crossfilter(opts: { id: string; records?: any[] }): ApexCrossfilter | null - added:
static method ApexCharts.getCrossfilter(id: string): ApexCrossfilter | null - added:
static method ApexCharts.hydrate(el: HTMLElement, clientOptions?: ApexCharts.ApexOptions): ApexCharts - added:
static method ApexCharts.hydrateAll(selector?: string, clientOptions?: ApexCharts.ApexOptions): ApexCharts[] - added:
static method ApexCharts.isHydrated(el: HTMLElement): boolean - added:
static method ApexCharts.registerEasing(name: string, fn: (t: number) => number): typeof ApexCharts - added:
static method ApexCharts.registerPlugin(def: ApexPlugin): typeof ApexCharts - added:
static method ApexCharts.registerRenderer(kind: string, factory: (w: any, ctx: any) => any): void - added:
static method ApexCharts.registerRowSource(name: string, fn: ApexRowSource): typeof ApexCharts - added:
static method ApexCharts.registerSeriesType(name: string, def: ApexSeriesTypeDef): typeof ApexCharts - added:
static method ApexCharts.registerTheme(name: string, def: ApexThemeDef): typeof ApexCharts - added:
static method ApexCharts.registerUnitLayout(name: string, fn: ApexUnitLayout): typeof ApexCharts - added:
static method ApexCharts.renderToHTML(options: ApexCharts.ApexOptions, ssrOptions?: { width?: number; height?: number; scale?: number; className?: string }): Promise<string> - added:
static method ApexCharts.renderToString(options: ApexCharts.ApexOptions, ssrOptions?: { width?: number; height?: number; scale?: number }): Promise<string> - added:
static method ApexCharts.setLicense(key: string): typeof ApexCharts - added:
static method ApexCharts.unregisterPlugin(name: string): typeof ApexCharts - added:
static method ApexCharts.unregisterRenderer(kind: string): void - added:
static method ApexCharts.unregisterRowSource(name: string): typeof ApexCharts - added:
static method ApexCharts.unregisterSeriesType(name: string): typeof ApexCharts - added:
static method ApexCharts.unregisterTheme(name: string): typeof ApexCharts - added:
static method ApexCharts.unregisterUnitLayout(name: string): typeof ApexCharts - added:
static property ApexCharts.perspectives: { decode(str: string): ApexPerspective | null; fromURL(href?: string): ApexPerspective | null }
- added:
call ApexUnitShape(objects: ApexUnitShapeObject[], rect: ApexUnitShapeRect): ApexUnitShapePosition[] - added:
const arrow: ApexUnitShape - added:
const battery: ApexUnitShape - added:
const bolt: ApexUnitShape - added:
const bulb: ApexUnitShape - added:
const car: ApexUnitShape - added:
const catalog: ApexUnitShape[] - added:
const check: ApexUnitShape - added:
const cross: ApexUnitShape - added:
const crown: ApexUnitShape - added:
const droplet: ApexUnitShape - added:
const fish: ApexUnitShape - added:
const flame: ApexUnitShape - added:
const flask: ApexUnitShape - added:
const funnel: ApexUnitShape - added:
const gear: ApexUnitShape - added:
const globe: ApexUnitShape - added:
const group: ApexUnitShape - added:
const heart: ApexUnitShape - added:
const house: ApexUnitShape - added:
const human: ApexUnitShape - added:
const leaf: ApexUnitShape - added:
const moneybag: ApexUnitShape - added:
const mountain: ApexUnitShape - added:
const percent: ApexUnitShape - added:
const pin: ApexUnitShape - added:
const plane: ApexUnitShape - added:
const pulse: ApexUnitShape - added:
const pyramid: ApexUnitShape - added:
const question: ApexUnitShape - added:
const robot: ApexUnitShape - added:
const rocket: ApexUnitShape - added:
const shield: ApexUnitShape - added:
const spiral: ApexUnitShape - added:
const star: ApexUnitShape - added:
const sun: ApexUnitShape - added:
const target: ApexUnitShape - added:
const tree: ApexUnitShape - added:
const trophy: ApexUnitShape - added:
const wifi: ApexUnitShape - added:
const xmark: ApexUnitShape - added:
function digitsPath(text: string | number, gap?: number): string - added:
function glyphs(text: string | number, opts?: Partial<ApexUnitShapeMeta> & { gap?: number }): ApexUnitShape - added:
function outlined(shape: ApexUnitShape, width?: number): ApexUnitShape - added:
function preview(shape: ApexUnitShape, opts?: { count?: number; series?: number[]; width?: number; height?: number; padding?: number; fill?: string | string[]; r?: number; svg?: boolean }): string - added:
function registerShapes(shapes: ApexUnitShape[] | Record<string, ApexUnitShape>): string[] - added:
function registeredShapeNames(): string[] - added:
function rings(meta: ApexUnitShapeMeta): ApexUnitShape - added:
function shapeFrom(path: string, opts?: Partial<ApexUnitShapeMeta>): ApexUnitShape - added:
function silhouette(meta: ApexUnitShapeMeta): ApexUnitShape - added:
function sphere(meta: ApexUnitShapeMeta): ApexUnitShape - added:
function stroke(meta: ApexUnitShapeMeta): ApexUnitShape - added:
function strokeFrom(path: string, opts?: Partial<ApexUnitShapeMeta>): ApexUnitShape - added:
function tiers(meta: ApexUnitShapeMeta): ApexUnitShape - added:
function unregisterShapes(names: string[] | string): void - added:
interface ApexUnitShape - added:
interface ApexUnitShapeMeta - added:
interface ApexUnitShapeObject - added:
interface ApexUnitShapePosition - added:
interface ApexUnitShapeRect - added:
method ApexUnitShape.with(overrides: Partial<ApexUnitShapeMeta>): ApexUnitShape - added:
property ApexUnitShapeMeta.category?: ApexUnitShapeCategory - added:
property ApexUnitShapeMeta.fillRule?: 'nonzero' | 'evenodd' - added:
property ApexUnitShapeMeta.kind?: 'silhouette' | 'stroke' | 'rings' | 'globe' | 'tiers' - added:
property ApexUnitShapeMeta.lint?: { minSeparation?: number } - added:
property ApexUnitShapeMeta.minUnits?: number - added:
property ApexUnitShapeMeta.name: string - added:
property ApexUnitShapeMeta.order?: ApexUnitShapeOrder - added:
property ApexUnitShapeMeta.padding?: number - added:
property ApexUnitShapeMeta.path?: string - added:
property ApexUnitShapeMeta.rowRatio?: number - added:
property ApexUnitShapeMeta.sampling?: number - added:
property ApexUnitShapeMeta.source?: 'original' | 'generated' - added:
property ApexUnitShapeMeta.tilt?: number - added:
property ApexUnitShapeMeta.twist?: number - added:
property ApexUnitShapeMeta.width?: number - added:
property ApexUnitShapeObject.dataPointIndex: number - added:
property ApexUnitShapeObject.datum: any - added:
property ApexUnitShapeObject.id: string - added:
property ApexUnitShapeObject.index: number - added:
property ApexUnitShapeObject.label: string - added:
property ApexUnitShapeObject.r: number - added:
property ApexUnitShapeObject.seriesIndex: number - added:
property ApexUnitShapeObject.value?: number - added:
property ApexUnitShapePosition.id: string - added:
property ApexUnitShapePosition.r?: number - added:
property ApexUnitShapePosition.x: number - added:
property ApexUnitShapePosition.y: number - added:
property ApexUnitShapeRect.height: number - added:
property ApexUnitShapeRect.width: number - added:
property ApexUnitShapeRect.x: number - added:
property ApexUnitShapeRect.y: number - added:
readonly property ApexUnitShape.shape: Readonly<ApexUnitShapeMeta> - added:
type ApexUnitShapeCategory = 'nature' | 'objects' | 'people' | 'business' | 'technology' | 'symbols' | 'geography' - added:
type ApexUnitShapeOrder = 'rows' | 'rowsUp' | 'cols' | 'colsRev' | 'centerOut' | 'centerIn'