Upgrading apexcharts 7 to 8
Breaking7.9.1 → 8.7.0Breaking4Security4New12Changed25Fixed345Other1
Fetching 12 releases from GitHub…11 / 12
SecurityFixes script execution via HTML in series names, categories or goal names in legend, tooltip and server-rendered HTML; such data now renders as text.Advisory ↗
BreakingUpgrade verdict
4 breaking changes and 4 security fixes.
In plain terms
- Code that read the group off a series object will no longer find it.
- Some chart types and features are no longer included by default, so pages download less, but charts that use them stop drawing until you import them separately.
- If you load ApexCharts with a script tag, add the extra script files for the chart types and features you use.
- If you use the small core build, some charts need extra modules, and the console now tells you when one is missing.
Must act Top 5 of 8 that need code or config changes
What you must change
Breaking4
Series objects no longer receive a group property, so reads of series.group return undefined.
series.groupMoves unit (with waffle and beeswarm), sunburst, violin, drilldown, waterfall, dumbbell and streamgraph out of the default bundle.
apexcharts/unitapexcharts/sunburstapexcharts/violinapexcharts/features/drilldownapexcharts/features/waterfallapexcharts/features/dumbbellapexcharts/features/streamgraphScript-tag users must add dist/unit.js, dist/sunburst.js, dist/violin.js or dist/features/<name>.js for the moved charts and features.
dist/unit.jsdist/sunburst.jsdist/violin.jsdist/features/raincloud.jsapexcharts.full.min.jsapexcharts/fullOn the lean core, violin and raincloud also need apexcharts/bar, and raw boxPlot or violin data needs apexcharts/features/stats.
apexcharts/coreapexcharts/barapexcharts/features/statsSecurity4
Fixes script execution via HTML in series names, categories or goal names in legend, tooltip and server-rendered HTML; such data now renders as text.
Escapes node names in treemap, sunburst and icicle tooltips so HTML in a node name cannot run script.
Escapes node names in treemap, sunburst and icicle tooltips to prevent script execution.
Escapes text and attribute values in server output so series names or labels cannot inject markup.
API changes
Generated by DepDelta from published .d.ts files. Not mixed with prose notes.
- removed:
property ChartContext.fill: any - removed:
property ChartGlobals.originalSeries: ApexOptions['series'] | null - removed:
property WaterfallData.cumulative: number[][] - removed:
property WaterfallData.kinds: Array<Array<string | null>> - changed:
property ChartGlobals.areaGroups: string[] → property ChartGlobals.areaGroups: number[] - changed:
property ChartGlobals.barGroups: string[] → property ChartGlobals.barGroups: number[] - changed:
property ChartGlobals.circleGeometry: { node: Element; cx: number; cy: number; r: number } | null → property ChartGlobals.circleGeometry: { node: Element; cx: number; cy: number; r: number; y?: number[] | false } | null - changed:
property ChartGlobals.lineGroups: string[] → property ChartGlobals.lineGroups: number[] - changed:
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… → property ChartGlobals.prevCircleFrame: { type: string; circle: { cx: number; cy: number; r: number }; rendered: { cx: number; cy: number; r: 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, number[]> } | null; texts: Map<string… - changed:
property StreamgraphData.values: number[][] → property StreamgraphData.values: Array<Array<number | null>> - added:
interface RadialGeometry - added:
method RadialGeometry.angle(value: any): number - added:
method RadialGeometry.point(value: any, radius?: number): { x: number; y: number } - added:
property ChartContext.panelTopBand?: (dims: any) => void - added:
property ChartGlobals.icicleFocusKey?: string | null - added:
property ChartGlobals.namedThemeApplied: | { mode?: string; accessibility?: string; monochrome?: any } | undefined - added:
property ChartGlobals.radialNeedleAngle: number | undefined - added:
property ChartGlobals.radialScales: RadialGeometry | null - added:
property ChartGlobals.radialTargetRAF: number | null - added:
property ChartGlobals.radialTickTimer: ReturnType<typeof setTimeout> | null - added:
property ChartGlobals.sunburstFocusKey?: string | null - added:
property ChartGlobals.themePaletteExplicit: boolean - added:
property ChartGlobals.tokenChrome: { fore?: string; grid?: string } | undefined - added:
property ChartStateW.seriesObservations: Array<{ values: number[]; byPoint: Array<number[] | null> } | null> | null - added:
property InteractState.keyNav?: [number, number, boolean, boolean] | null - added:
property InteractState.wasDragged?: boolean - added:
property InteractState.wheelHintTimer?: any - added:
property LabelData.seriesGroupIndex: number[] - added:
property StreamgraphData.lines: number[] - added:
readonly property RadialGeometry.bands: { readonly radius: number; readonly thickness: number } | null - added:
readonly property RadialGeometry.cx: number - added:
readonly property RadialGeometry.cy: number - added:
readonly property RadialGeometry.endAngle: number - added:
readonly property RadialGeometry.hollow: { readonly radius: number } - added:
readonly property RadialGeometry.max: number - added:
readonly property RadialGeometry.min: number - added:
readonly property RadialGeometry.needle: { readonly cx: number; readonly cy: number; readonly length: number } | null - added:
readonly property RadialGeometry.outerRadius: number - added:
readonly property RadialGeometry.radius: number - added:
readonly property RadialGeometry.rings: ReadonlyArray<{ readonly seriesIndex: number; readonly radius: number; readonly thickness: number; readonly trackThickness: number }> - added:
readonly property RadialGeometry.startAngle: number - added:
readonly property RadialGeometry.thickness: number
- changed:
method ApexCharts.ApexDrilldown.onDrillDown?(ctx: ApexDrilldownContext): ApexDrilldownSeries | Promise<ApexDrilldownSeries> → method ApexCharts.ApexDrilldown.onDrillDown?(ctx: ApexDrilldownContext): | (Omit<ApexDrilldownSeries, 'id'> & { id?: string | number }) | Promise<Omit<ApexDrilldownSeries, 'id'> & { id?: string | number }> - changed:
method ApexCharts.getHighestValueInSeries(seriesIndex?: number): number → method ApexCharts.getHighestValueInSeries(seriesIndex?: number): number | undefined - changed:
method ApexCharts.getLowestValueInSeries(seriesIndex?: number): number → method ApexCharts.getLowestValueInSeries(seriesIndex?: number): number | undefined - changed:
property ApexCharts.ApexOptions.trellis?: ApexTrellis → property ApexCharts.ApexOptions.trellis?: ApexTrellis | null - changed:
static property ApexCharts.perspectives: { decode(str: string): ApexPerspective | null; fromURL(href?: string): ApexPerspective | null } → static readonly property ApexCharts.perspectives: { decode(str: string): ApexPerspective | null; fromURL(href?: string): ApexPerspective | null } - added:
method ApexCharts.getRadialScales(): ApexCharts.ApexRadialScales | null