Upgrading apexcharts 6 to 7
Breaking6.10.0 → 7.9.1Breaking6New37Changed28Fixed117Other22
BreakingUpgrade verdict
6 breaking changes.
In plain terms
- Clicking a small trellis panel's title used to make it fill the whole chart area. Now it does nothing unless you turn that on with a new setting.
- Clicking a panel header no longer takes over the whole grid by default; you must turn that on with an option.
- Some chart features no longer come with the main package. If you use one of them, you now add one extra import line; if you use none, nothing changes for you.
- The setting for rounded corners on stacked bars is gone. Corners are now rounded automatically based on the outside edge of the stack.
Must act Top 3 of 6 that need code or config changes
apexcharts publishes an official migration guide for version 7. It covers more than the release notes do.
Migration guide ↗What you must change
Breaking6
Clicking a trellis panel header no longer expands that panel over the grid; promotion is now opt-in via trellis.promote.
trellis.promotechart.promotePanel(key)chart.restorePanels()Makes trellis.promote default to false so header clicks no longer expand panels unless explicitly enabled.
trellis.promotechart.promotePanel()chart.restorePanels()Nine features are now opt-in and must be imported separately from apexcharts/features/*, reducing the default bundle by 13.6%.
features/trellisfeatures/storyboardfeatures/perspectivesfeatures/inkfeatures/renderer-canvasfeatures/linkfeatures/measurefeatures/historyRemoves plotOptions.bar.borderRadiusWhenStacked; stacked bar corner rounding now follows the outer edge of the stack.
plotOptions.bar.borderRadiusWhenStackedUnknown chart.type now throws in the constructor and updateOptions() instead of failing later in render().
ApexChartsupdateOptions()render()chart.typeTypeScript types for getState().seriesNames, getState().labels and a series' name are now string | number.
getState()seriesNameslabelsnameAPI changes
Generated by DepDelta from published .d.ts files. Not mixed with prose notes.
- changed:
method ChartContext.update(options?: any): Promise<any> → method ChartContext.update(options?: any, overwriteInitialSeries?: boolean): Promise<any> - changed:
property ChartGlobals.markers: { colors: string[]; size: number[]; largestSize: number } → property ChartGlobals.markers: { colors: string[]; size: number[]; largestSize: number; batched: boolean } - changed:
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 → 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; layout?: { rect: { x:… - added:
interface DumbbellData - added:
interface StreamgraphData - added:
interface WaterfallData - added:
property ChartContext.highlightFilter: any - added:
property ChartGlobals.chromeTweens: Set<() => void> | null - added:
property ChartGlobals.circleGeometry: { node: Element; cx: number; cy: number; r: number } | null - added:
property ChartGlobals.circleTween: { node: Element; circle: { cx: number; cy: number; r: number }; target: { cx: number; cy: number; r: number }; done: boolean; finish(): void } | null - added:
property ChartGlobals.collapsingSeriesIndices: number[] - added:
property ChartGlobals.dumbbellRawSeries: Array<{ data: any }> | null - added:
property ChartGlobals.exitLabels: Array<{ realIndex: number; node: Element; key: string | null; oldX: Array<number | null>; oldY: Array<number | null> }> | null - added:
property ChartGlobals.fadeRevealEls: Element[] - added:
property ChartGlobals.highlightTween?: { finish(): void } | null - added:
property ChartGlobals.layoutTween: { graphical: Element; rect: { x: number; y: number; w: number; h: number }; done: boolean; finish(): void } | null - added:
property ChartGlobals.morphBatch: { pending: number; onDone: (() => void) | null; series: Map<number, { pending: number; onDone: (() => void) | null }> } - added:
property ChartGlobals.pendingCapture: (Record<string, any> & { pending: boolean }) | null - added:
property ChartGlobals.prevCircleFrame: { type: string; circle: { cx: number; cy: number; r: number }; rendered: { cx: number; cy: number; r: number }; origin: { x: number; y: number }; drawn: { l: number; t: number; r: number; b: number; W: number; H: number } | null; layout: { rect: { x: number; y: number; w: number; h: number }; shifts: Record<string, [number, number]>; ends: Record<string, num… - added:
property ChartGlobals.prevPolarSizes: number[] | null - added:
property ChartGlobals.prevTreemapParents: Map<string, { x: number; y: number; width: number; height: number; fill?: string | null; header?: { x: number; y: number; width: number; height: number; fill: string | null; look: string } | null }> | null - added:
property ChartGlobals.prevTreemapView: Element | null - added:
property ChartGlobals.reducedMotionLatch: { enabled: boolean; dynamicEnabled: boolean | undefined } | null - added:
property ChartGlobals.riseLabels: Map<number, { oldX: Array<number | null>; oldY: Array<number | null> }> | null - added:
property ChartGlobals.streamScrolled: boolean - added:
property ChartGlobals.streamgraphRawSeries: Array<{ data: any }> | null - added:
property ChartGlobals.streamgraphWarnedNegative?: boolean - added:
property ChartGlobals.treemapZoom: { from: string | null; to: string | null } | null - added:
property ChartGlobals.waterfallRawSeries: Array<{ data: any }> | null - added:
property ChartStateW.dumbbellData: DumbbellData | null - added:
property ChartStateW.highlightData: { active: boolean; parts: (number | null)[][]; ext: (number | null)[][] | null; capture(): void } | null - added:
property ChartStateW.streamgraphData: StreamgraphData | null - added:
property ChartStateW.waterfallData: WaterfallData - added:
property DumbbellData.carrier: number - added:
property DumbbellData.form: 'series' | 'pairs' - added:
property DumbbellData.hidden: number[] - added:
property DumbbellData.names: string[] - added:
property DumbbellData.order: Array<[number, number] | null> - added:
property DumbbellData.values: Array<Array<number | null>> - added:
property StreamgraphData.hidden: number[] - added:
property StreamgraphData.highs: Array<number[] | null> - added:
property StreamgraphData.lows: Array<number[] | null> - added:
property StreamgraphData.names: string[] - added:
property StreamgraphData.offset: 'wiggle' | 'silhouette' | 'zero' | 'expand' - added:
property StreamgraphData.order: number[] - added:
property StreamgraphData.values: number[][] - added:
property StreamgraphData.xs: any[] - added:
property ViolinData.seriesViolinSummary: Array<Array<number[] | null>> - added:
property WaterfallData.cumulative: number[][] - added:
property WaterfallData.geometry: Array<Array<{ slotStart: number; slotEnd: number; levelStart: number; levelEnd: number; horizontal: boolean }>> | null - added:
property WaterfallData.kinds: Array<Array<string | null>> - added:
property WaterfallData.values: Array<Array<number | null>>
- changed:
property ApexCharts.ChartState.labels: string[] → property ApexCharts.ChartState.labels: (string | number)[] - changed:
property ApexCharts.ChartState.seriesNames: string[] → property ApexCharts.ChartState.seriesNames: (string | number)[] - added:
method ApexCharts.getPanel(key: string): ApexCharts | null - added:
method ApexCharts.getPanels(): ApexCharts.ApexTrellisPanel[] - added:
method ApexCharts.promotePanel(key: string): Promise<void> - added:
method ApexCharts.restorePanels(): Promise<void> - added:
property ApexCharts.ApexOptions.highlightFilter?: ApexHighlightFilter - added:
property ApexCharts.ApexOptions.trellis?: ApexTrellis - added:
property ApexCharts.ChartState.config: ApexOptions - added:
property ApexCharts.highlightFilter: { isActive(): boolean; valueAt(seriesIndex: number, dataPointIndex?: number): number | null; set(parts: ApexHighlightParts, opts?: { animate?: boolean; series?: ApexAxisChartSeries }): Promise<ApexCharts>; clear(opts?: { animate?: boolean }): Promise<ApexCharts> } | null - added:
static method ApexCharts.registerUnitMark(name: string, def: string | ApexUnitMarkDef): typeof ApexCharts - added:
static method ApexCharts.trellis(el: HTMLElement, options: ApexCharts.ApexOptions): ApexCharts | null - added:
static method ApexCharts.unregisterUnitMark(name: string): typeof ApexCharts
- added:
const bag: ApexPictogram - added:
const book: ApexPictogram - added:
const bulb: ApexPictogram - added:
const car: ApexPictogram - added:
const catalog: ApexPictogram[] - added:
const cup: ApexPictogram - added:
const droplet: ApexPictogram - added:
const heart: ApexPictogram - added:
const house: ApexPictogram - added:
const person: ApexPictogram - added:
const plane: ApexPictogram - added:
const star: ApexPictogram - added:
const tree: ApexPictogram - added:
function definePictogram(meta: { name: string; path: string; viewBox?: [number, number, number, number]; fillRule?: 'nonzero' | 'evenodd'; category?: ApexPictogramCategory; source?: 'original' | 'generated' }): ApexPictogram - added:
function registerMarks(defs: ApexPictogram[] | Record<string, ApexPictogram>): string[] - added:
function registeredMarkNames(): string[] - added:
function unregisterMarks(names: string[] | string): void - added:
interface ApexPictogram - added:
method ApexPictogram.with(overrides: Partial<Omit<ApexPictogram, 'with'>>): ApexPictogram - added:
readonly property ApexPictogram.category?: ApexPictogramCategory - added:
readonly property ApexPictogram.fillRule?: 'nonzero' | 'evenodd' - added:
readonly property ApexPictogram.name: string - added:
readonly property ApexPictogram.path: string - added:
readonly property ApexPictogram.source?: 'original' | 'generated' - added:
readonly property ApexPictogram.viewBox: readonly [number, number, number, number] - added:
type ApexPictogramCategory = 'people' | 'nature' | 'objects' | 'transport' | 'symbols'