Upgrading apexcharts 2 to 3
Breaking2.6.0 → 3.54.1Breaking25Security1New200Changed17Fixed537Other69
BreakingUpgrade verdict
25 breaking changes and a security fix.
In plain terms
- CSV Export categoryFormatter and valueFormatter (breaking change as CSV export dateFormatter is replaced by categoryFormatter).
- Remove declared but unused variables.
- Remove "monotoneCubic" curve logic and apply the same algorithm for "smooth" curve.
- Remove style injection as attribute in bar charts (csp style-src fix).
Must act Top 4 of 26 that need code or config changes
Adds @yr/monotone-cubic-spline ^1.0.3.
Drops babel-polyfill, core-js, es6-promise-promise, svg.js.
Installs 9 packages in all (was 14).
What you must change
Breaking25
CSV Export categoryFormatter and valueFormatter (breaking change as CSV export dateFormatter is replaced by categoryFormatter).
Remove declared but unused variables.
Remove "monotoneCubic" curve logic and apply the same algorithm for "smooth" curve.
Remove style injection as attribute in bar charts (csp style-src fix).
Removed public methods - addText(), addImage() and addRect().
addText()addImage()addRect()Direct IE11 support dropped.
Removed unused code in SVG.js to bring down the bundle size.
Remove pie.size and radialbar.size in next versions - fixes.
pie.sizeradialbar.sizeUnused SVG.js code removed to bring down bundle size.
Removed IE11 polyfills and added lists of polyfills to add for IE11 support.
In radar chart, renamed the outer data labels as xaxis labels.
Removed endingShape setting from bars/columns.
Removed customShapes on bars/columns as the code got really complex and bug-prone causing a lot of maintenance cost.
customShapesrevert xaxis.tickPlacement to 'between' by default - fixes.
xaxis.tickPlacementsamples - unnecessary props removed.
Pie/Radar charts samples updated (removed invalid properties in those samples).
New Annotation types added annotations.texts, annotations.images and annotations.shapes.
annotations.textsannotations.imagesannotations.shapesXaxis labels - timezone improvement.
Heavy refactoring in all the modules.
The pie/donut/radialBar charts will have their heights recalculated to prevent additional spacings at the bottom.
Added endingShape property again until borderRadius in bars is implemented.
radar chart - radar.polygons.strokeColors added which accepts array of colors. radar.polygons.strokeColor will be deprecated in favor of this new property.
radar.polygons.strokeColorsradar.polygons.strokeColorAllow markers.strokeColors to accept array. markers.strokeColor will be deprecated in 4.0.
markers.strokeColorsmarkers.strokeColorIE11 support restored.
svgURL() method is replaced with dataURI() for generating base64 image which can be used in other tools like jsPDF - fixes.
svgURL()dataURI()Security1
XSS in apexcharts
Moderate · CVSS 6.3API changes
Generated by DepDelta from published .d.ts files. Not mixed with prose notes.
- removed:
class ApexCharts - removed:
constructor ApexCharts(el: any, options: any) - removed:
declare module 'apexcharts' - removed:
interface ApexCharts.ApexOptions - removed:
method ApexCharts.addPointAnnotation(options: any, pushToMemory?: boolean, context?: any): void - removed:
method ApexCharts.addText(options: any, pushToMemory?: boolean, context?: any): void - removed:
method ApexCharts.addXaxisAnnotation(options: any, pushToMemory?: boolean, context?: any): void - removed:
method ApexCharts.addYaxisAnnotation(options: any, pushToMemory?: boolean, context?: any): void - removed:
method ApexCharts.destroy(): void - removed:
method ApexCharts.render(): Promise<void> - removed:
method ApexCharts.toggleSeries(seriesName: string): void - removed:
method ApexCharts.updateOptions(options: any, redrawPaths: boolean, animate: boolean): Promise<void> - removed:
method ApexCharts.updateSeries(newSeries: ApexAxisChartSeries | ApexNonAxisChartSeries, animate: boolean): void - removed:
namespace ApexCharts - removed:
property ApexCharts.ApexOptions.annotations?: ApexAnnotations - removed:
property ApexCharts.ApexOptions.chart?: ApexChart - removed:
property ApexCharts.ApexOptions.colors?: string[] - removed:
property ApexCharts.ApexOptions.dataLabels?: ApexDataLabels - removed:
property ApexCharts.ApexOptions.grid?: ApexGrid - removed:
property ApexCharts.ApexOptions.labels?: string[] - removed:
property ApexCharts.ApexOptions.legend?: ApexLegend - removed:
property ApexCharts.ApexOptions.plotOptions?: ApexPlotOptions - removed:
property ApexCharts.ApexOptions.series?: ApexAxisChartSeries | ApexNonAxisChartSeries - removed:
property ApexCharts.ApexOptions.stroke?: ApexStroke - removed:
property ApexCharts.ApexOptions.title?: ApexTitle - removed:
property ApexCharts.ApexOptions.tooltip?: ApexTooltip - removed:
property ApexCharts.ApexOptions.xaxis?: ApexXAxis - removed:
property ApexCharts.ApexOptions.yaxis?: ApexYAxis | ApexYAxis[] - removed:
static method ApexCharts.exec(chartID: string, fn: () => void, options: any): any - removed:
static method ApexCharts.initOnLoad(): void - removed:
type AnnotationLabel = { borderColor: string; borderWidth: number; text: string; textAnchor: string; offsetX: number; offsetY: number; style: AnnotationStyle; position?: string } - removed:
type AnnotationStyle = { background: string; color: string; fontSize: string; cssClass: string; padding?: { left?: number; right?: number; top?: number; bottom?: number } } - removed:
type ApexAnnotations = { position: string; yaxis: YAxisAnnotations[]; xaxis: XAxisAnnotations[]; points: PointAnnotations[] } - removed:
type ApexAxisChartSeries = { name: string; data: number[] | { x: string; y: number }[] }[] - removed:
type ApexChart = { width?: string | number; height?: string | number; type: 'line' | 'area' | 'bar' | 'histogram' | 'pie' | 'donut' | 'radialBar' | 'scatter' | 'bubble' | 'heat… - removed:
type ApexDataLabels = { enabled?: boolean; formatter?(val: number): string; textAnchor?: 'start' | 'middle' | 'end'; offsetX?: number; offsetY?: number; style?: { fontSize?: string;… - removed:
type ApexGrid = { show?: boolean; borderColor?: string; strokeDashArray?: number; position?: 'front' | 'back'; xaxis?: { lines?: { show?: boolean; offsetX?: number; offsetY?:… - removed:
type ApexLegend = { show?: boolean; position?: 'top' | 'right' | 'bottom' | 'left'; horizontalAlign?: 'left' | 'center' | 'right'; verticalAlign?: 'top' | 'middle' | 'bottom'; f… - removed:
type ApexLocale = { name?: string; options?: { months?: string[]; shortMonths?: string[]; days?: string[]; shortDays?: string[]; toolbar?: { download?: string; selection?: strin… - removed:
type ApexNonAxisChartSeries = number[] - removed:
type ApexPlotOptions = { bar?: { horizontal?: boolean; endingShape?: 'flat' | 'rounded' | 'arrow'; columnWidth?: string; barHeight?: string; distributed?: boolean; colors?: { ranges?… - removed:
type ApexStroke = { show?: boolean; curve?: 'smooth' | 'straight' | 'stepline'; lineCap?: 'butt' | 'square' | 'round'; colors?: string; width?: number; dashArray?: number | numb… - removed:
type ApexTitle = { text: string; align?: 'left' | 'center' | 'right'; margin?: number; offsetX?: number; offsetY?: number; floating?: number; style?: { fontSize?: string; color… - removed:
type ApexTooltip = { enabled?: boolean; shared: true; followCursor?: boolean; intersect?: boolean; inverseOrder?: boolean; custom?(options: any): void; theme?: string; fillSeries… - removed:
type ApexXAxis = { type?: 'categories' | 'datetime' | 'numeric'; categories?: string[] | number[]; labels?: { show?: boolean; rotate?: number; rotateAlways?: boolean; hideOverl… - removed:
type ApexYAxis = { seriesName?: string; opposite?: boolean; tickAmount?: number; min?: number; max?: number; floating?: boolean; decimalsInFloat?: number; labels?: { show?: boo… - removed:
type PointAnnotations = { x: number; y: null; yAxisIndex: number; seriesIndex: number; marker: { size: number; fillColor: string; strokeColor: string; strokeWidth: number; shape: stri… - removed:
type XAxisAnnotations = { x: number; strokeDashArray: number; borderColor: string; offsetX: number; offsetY: number; label: { borderColor: string; borderWidth: number; text: string; t… - removed:
type YAxisAnnotations = { y: number; strokeDashArray: number; borderColor: string; offsetX: number; offsetY: number; yAxisIndex: number; label: AnnotationLabel }
- added:
class ApexCharts - added:
constructor ApexCharts(el: any, options: any) - added:
declare module 'apexcharts' - added:
interface ApexCharts.ApexOptions - added:
method ApexCharts.addPointAnnotation(options: any, pushToMemory?: boolean, context?: any): void - added:
method ApexCharts.addXaxisAnnotation(options: any, pushToMemory?: boolean, context?: any): void - added:
method ApexCharts.addYaxisAnnotation(options: any, pushToMemory?: boolean, context?: any): void - added:
method ApexCharts.appendData(data: any[], overwriteInitialSeries?: boolean): void - added:
method ApexCharts.appendSeries(newSeries: ApexAxisChartSeries | ApexNonAxisChartSeries, animate?: boolean): Promise<void> - added:
method ApexCharts.clearAnnotations(options?: any): void - added:
method ApexCharts.dataURI(options?: { scale?: number, width?: number }): Promise<{ imgURI: string } | { blob: Blob }> - added:
method ApexCharts.destroy(): void - added:
method ApexCharts.hideSeries(seriesName: string): void - added:
method ApexCharts.highlightSeries(seriesName: string): any - added:
method ApexCharts.paper(): void - added:
method ApexCharts.removeAnnotation(id: string, options?: any): void - added:
method ApexCharts.render(): Promise<void> - added:
method ApexCharts.resetSeries(): void - added:
method ApexCharts.setLocale(localeName: string): void - added:
method ApexCharts.showSeries(seriesName: string): void - added:
method ApexCharts.toggleDataPointSelection(seriesIndex: number, dataPointIndex?: number): any - added:
method ApexCharts.toggleSeries(seriesName: string): any - added:
method ApexCharts.updateOptions(options: any, redrawPaths?: boolean, animate?: boolean, updateSyncedCharts?: boolean): Promise<void> - added:
method ApexCharts.updateSeries(newSeries: ApexAxisChartSeries | ApexNonAxisChartSeries, animate?: boolean): Promise<void> - added:
method ApexCharts.zoomX(min: number, max: number): void - added:
namespace ApexCharts - added:
property ApexCharts.ApexOptions.annotations?: ApexAnnotations - added:
property ApexCharts.ApexOptions.chart?: ApexChart - added:
property ApexCharts.ApexOptions.colors?: any[] - added:
property ApexCharts.ApexOptions.dataLabels?: ApexDataLabels - added:
property ApexCharts.ApexOptions.fill?: ApexFill - added:
property ApexCharts.ApexOptions.forecastDataPoints?: ApexForecastDataPoints - added:
property ApexCharts.ApexOptions.grid?: ApexGrid - added:
property ApexCharts.ApexOptions.labels?: string[] - added:
property ApexCharts.ApexOptions.legend?: ApexLegend - added:
property ApexCharts.ApexOptions.markers?: ApexMarkers - added:
property ApexCharts.ApexOptions.noData?: ApexNoData - added:
property ApexCharts.ApexOptions.plotOptions?: ApexPlotOptions - added:
property ApexCharts.ApexOptions.responsive?: ApexResponsive[] - added:
property ApexCharts.ApexOptions.series?: ApexAxisChartSeries | ApexNonAxisChartSeries - added:
property ApexCharts.ApexOptions.states?: ApexStates - added:
property ApexCharts.ApexOptions.stroke?: ApexStroke - added:
property ApexCharts.ApexOptions.subtitle?: ApexTitleSubtitle - added:
property ApexCharts.ApexOptions.theme?: ApexTheme - added:
property ApexCharts.ApexOptions.title?: ApexTitleSubtitle - added:
property ApexCharts.ApexOptions.tooltip?: ApexTooltip - added:
property ApexCharts.ApexOptions.xaxis?: ApexXAxis - added:
property ApexCharts.ApexOptions.yaxis?: ApexYAxis | ApexYAxis[] - added:
property ApexCharts.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, filena… - added:
static method ApexCharts.exec(chartID: string, fn: string, ...args: Array<any>): any - added:
static method ApexCharts.getChartByID(chartID: string): ApexCharts|undefined - added:
static method ApexCharts.initOnLoad(): void - added:
type AnnotationLabel = { borderColor?: string; borderWidth?: number; borderRadius?: number; text?: string; textAnchor?: string; offsetX?: number; offsetY?: number; style?: Annotation… - added:
type AnnotationStyle = { background?: string; color?: string; fontFamily?: string; fontWeight?: string | number; fontSize?: string; cssClass?: string; padding?: { left?: number; righ… - added:
type ApexAnnotations = { yaxis?: YAxisAnnotations[]; xaxis?: XAxisAnnotations[]; points?: PointAnnotations[]; texts?: TextAnnotations[]; images?: ImageAnnotations[] } - added:
type ApexAxisChartSeries = { name?: string; type?: string; color?: string; group?: string; hidden?: boolean; zIndex?: number; data: | (number | null)[] | { x: any; y: any; fill?: ApexFil… - added:
type ApexChart = { width?: string | number; height?: string | number; type?: | 'line' | 'area' | 'bar' | 'pie' | 'donut' | 'radialBar' | 'scatter' | 'bubble' | 'heatmap' | 'can… - added:
type ApexColorStop = { offset: number; color: string; opacity: number } - added:
type ApexDataLabels = { enabled?: boolean; enabledOnSeries?: undefined | number[]; textAnchor?: 'start' | 'middle' | 'end'; distributed?: boolean; offsetX?: number; offsetY?: number… - added:
type ApexDiscretePoint = { seriesIndex?: number; dataPointIndex?: number; fillColor?: string; strokeColor?: string; size?: number; shape?: ApexMarkerShape } - added:
type ApexDropShadow = { enabled?: boolean; top?: number; left?: number; blur?: number; opacity?: number; color?: string } - added:
type ApexFill = { colors?: any[]; opacity?: number | number[]; type?: string | string[]; gradient?: { shade?: string; type?: string; shadeIntensity?: number; gradientToColors?… - added:
type ApexForecastDataPoints = { count?: number; fillOpacity?: number; strokeWidth?: undefined | number; dashArray?: number } - added:
type ApexGrid = { show?: boolean; borderColor?: string; strokeDashArray?: number; position?: 'front' | 'back'; xaxis?: { lines?: { show?: boolean; offsetX?: number; offsetY?:… - added:
type ApexLegend = { show?: boolean; showForSingleSeries?: boolean; showForNullSeries?: boolean; showForZeroSeries?: boolean; floating?: boolean; inverseOrder?: boolean; position… - added:
type ApexLocale = { name?: string; options?: { months?: string[]; shortMonths?: string[]; days?: string[]; shortDays?: string[]; toolbar?: { download?: string; selection?: strin… - added:
type ApexMarkerShape = MarkerShapeOptions | MarkerShapeOptions[] - added:
type ApexMarkers = { size?: number | number[]; colors?: string | string[]; strokeColors?: string | string[]; strokeWidth?: number | number[]; strokeOpacity?: number | number[]; s… - added:
type ApexNoData = { text?: string; align?: 'left' | 'right' | 'center'; verticalAlign?: 'top' | 'middle' | 'bottom'; offsetX?: number; offsetY?: number; style?: { color?: string… - added:
type ApexNonAxisChartSeries = number[] - added:
type ApexPlotOptions = { line?: { isSlopeChart?: boolean }; area?: { fillTo?: 'origin' | 'end' }; bar?: { horizontal?: boolean; columnWidth?: string | number; barHeight?: string | nu… - added:
type ApexResponsive = { breakpoint?: number; options?: any } - added:
type ApexStates = { normal?: { filter?: { type?: string; value?: number } }; hover?: { filter?: { type?: string; value?: number } }; active?: { allowMultipleDataPointsSelection?… - added:
type ApexStroke = { show?: boolean; curve?: 'smooth' | 'straight' | 'stepline' | 'linestep' | 'monotoneCubic' | ('smooth' | 'straight' | 'stepline' | 'linestep' | 'monotoneCubic… - added:
type ApexTheme = { mode?: 'light' | 'dark'; palette?: string; monochrome?: { enabled?: boolean; color?: string; shadeTo?: 'light' | 'dark'; shadeIntensity?: number } } - added:
type ApexTitleSubtitle = { text?: string; align?: 'left' | 'center' | 'right'; margin?: number; offsetX?: number; offsetY?: number; floating?: boolean; style?: { fontSize?: string; fon… - added:
type ApexTooltip = { enabled?: boolean; enabledOnSeries?: undefined | number[]; shared?: boolean; followCursor?: boolean; intersect?: boolean; inverseOrder?: boolean; custom?: ((… - added:
type ApexTooltipY = { title?: { formatter?(seriesName: string): string }; formatter?(val: number, opts?: any): string } - added:
type ApexXAxis = { type?: 'category' | 'datetime' | 'numeric'; categories?: any; overwriteCategories?: number[] | string[] | undefined; offsetX?: number; offsetY?: number; sort… - added:
type ApexYAxis = { show?: boolean; showAlways?: boolean; showForNullSeries?: boolean; seriesName?: string | string[]; opposite?: boolean; reversed?: boolean; logarithmic?: bool… - added:
type ImageAnnotations = { path?: string; x?: number, y?: number, width?: number, height?: number } - added:
type MarkerShapeOptions = 'circle' | 'square' | 'rect' | 'line' | 'cross' | 'plus' | 'star' | 'sparkle' | 'diamond' | 'triangle' - added:
type PointAnnotations = { id?: number | string; x?: number | string; y?: null | number; yAxisIndex?: number; seriesIndex?: number; mouseEnter?: Function; mouseLeave?: Function; click?… - added:
type TextAnnotations = { x?: number; y?: number; text?: string; textAnchor?: string; foreColor?: string; fontSize?: string | number; fontFamily?: undefined | string; fontWeight?: str… - added:
type XAxisAnnotations = { id?: number | string; x?: null | number | string; x2?: null | number | string; strokeDashArray?: number; fillColor?: string; borderColor?: string; borderWidt… - added:
type YAxisAnnotations = { id?: number | string; y?: null | number | string; y2?: null | number | string; strokeDashArray?: number; fillColor?: string; borderColor?: string; borderWidt…