ng-apexcharts
Version:
An angular implementation of ApexCharts
1,378 lines (1,369 loc) • 43.9 kB
TypeScript
import * as _angular_core from '@angular/core';
import { OnChanges, OnDestroy, SimpleChanges, OnInit } from '@angular/core';
import ApexChartsType from 'apexcharts';
import * as apexcharts_ssr from 'apexcharts/ssr';
interface ApexOptions {
annotations?: ApexAnnotations;
chart?: ApexChart;
colors?: any[];
dataLabels?: ApexDataLabels;
series?: ApexAxisChartSeries | ApexNonAxisChartSeries;
stroke?: ApexStroke;
labels?: string[];
legend?: ApexLegend;
fill?: ApexFill;
tooltip?: ApexTooltip;
plotOptions?: ApexPlotOptions;
responsive?: ApexResponsive[];
markers?: ApexMarkers;
noData?: ApexNoData;
parsing?: ApexParsing;
xaxis?: ApexXAxis;
yaxis?: ApexYAxis | ApexYAxis[];
forecastDataPoints?: ApexForecastDataPoints;
grid?: ApexGrid;
states?: ApexStates;
title?: ApexTitleSubtitle;
subtitle?: ApexTitleSubtitle;
theme?: ApexTheme;
}
interface ApexDropShadow {
enabled?: boolean;
top?: number;
left?: number;
blur?: number;
opacity?: number;
color?: string;
}
/**
* Main Chart options
* See https://apexcharts.com/docs/options/chart/
*/
interface ApexChart {
width?: string | number;
height?: string | number;
type: ChartType;
foreColor?: string;
fontFamily?: string;
background?: string;
offsetX?: number;
offsetY?: number;
dropShadow?: ApexDropShadow & {
enabledOnSeries?: undefined | number[];
color?: string | string[];
};
events?: {
animationEnd?(chart: any, options?: any): void;
beforeMount?(chart: any, options?: any): void;
mounted?(chart: any, options?: any): void;
updated?(chart: any, options?: any): void;
mouseMove?(e: any, chart?: any, options?: any): void;
mouseLeave?(e: any, chart?: any, options?: any): void;
click?(e: any, chart?: any, options?: any): void;
legendClick?(chart: any, seriesIndex?: number, options?: any): void;
markerClick?(e: any, chart?: any, options?: any): void;
xAxisLabelClick?(e: any, chart?: any, options?: any): void;
selection?(chart: any, options?: any): void;
dataPointSelection?(e: any, chart?: any, options?: any): void;
dataPointMouseEnter?(e: any, chart?: any, options?: any): void;
dataPointMouseLeave?(e: any, chart?: any, options?: any): void;
beforeZoom?(chart: any, options?: any): void;
beforeResetZoom?(chart: any, options?: any): void;
zoomed?(chart: any, options?: any): void;
scrolled?(chart: any, options?: any): void;
brushScrolled?(chart: any, options?: any): void;
keyDown?(e: KeyboardEvent, chart?: any, options?: any): void;
keyUp?(e: KeyboardEvent, chart?: any, options?: any): void;
};
brush?: {
enabled?: boolean;
autoScaleYaxis?: boolean;
target?: string;
targets?: string[];
};
id?: string;
injectStyleSheet?: boolean;
group?: string;
nonce?: string;
locales?: ApexLocale[];
defaultLocale?: string;
parentHeightOffset?: number;
redrawOnParentResize?: boolean;
redrawOnWindowResize?: boolean | Function;
sparkline?: {
enabled?: boolean;
};
stacked?: boolean;
stackOnlyBar?: boolean;
stackType?: "normal" | "100%";
toolbar?: {
show?: boolean;
offsetX?: number;
offsetY?: number;
tools?: {
download?: boolean | string;
selection?: boolean | string;
zoom?: boolean | string;
zoomin?: boolean | string;
zoomout?: boolean | string;
pan?: boolean | string;
reset?: boolean | string;
customIcons?: {
icon?: string;
title?: string;
index?: number;
class?: string;
click?(chart?: any, options?: any, e?: any): any;
}[];
};
export?: {
csv?: {
filename?: undefined | string;
columnDelimiter?: string;
headerCategory?: string;
headerValue?: string;
categoryFormatter?(value?: string | number): any;
valueFormatter?(value?: string | number): any;
};
svg?: {
filename?: undefined | string;
};
png?: {
filename?: undefined | string;
};
width?: number;
scale?: number;
};
autoSelected?: "zoom" | "selection" | "pan";
};
zoom?: {
enabled?: boolean;
type?: "x" | "y" | "xy";
autoScaleYaxis?: boolean;
allowMouseWheelZoom?: boolean;
zoomedArea?: {
fill?: {
color?: string;
opacity?: number;
};
stroke?: {
color?: string;
opacity?: number;
width?: number;
};
};
};
selection?: {
enabled?: boolean;
type?: string;
fill?: {
color?: string;
opacity?: number;
};
stroke?: {
width?: number;
color?: string;
opacity?: number;
dashArray?: number;
};
xaxis?: {
min?: number;
max?: number;
};
yaxis?: {
min?: number;
max?: number;
};
};
animations?: {
enabled?: boolean;
speed?: number;
animateGradually?: {
enabled?: boolean;
delay?: number;
};
dynamicAnimation?: {
enabled?: boolean;
speed?: number;
};
};
accessibility?: {
enabled?: boolean;
description?: string;
announcements?: {
enabled?: boolean;
};
keyboard?: {
enabled?: boolean;
};
};
}
interface ApexStates {
hover?: {
filter?: {
type?: string;
};
};
active?: {
allowMultipleDataPointsSelection?: boolean;
filter?: {
type?: string;
};
};
}
/**
* Chart Title options
* See https://apexcharts.com/docs/options/title/
*/
interface ApexTitleSubtitle {
text?: string;
align?: "left" | "center" | "right";
margin?: number;
offsetX?: number;
offsetY?: number;
floating?: boolean;
style?: {
fontSize?: string;
fontFamily?: string;
fontWeight?: string | number;
color?: string;
};
}
/**
* Chart Series options.
* See https://apexcharts.com/docs/options/series/
*/
type ApexAxisChartSeries = {
name?: string;
type?: string;
color?: string;
group?: string;
hidden?: boolean;
zIndex?: number;
parsing?: ApexParsing;
data: (number | null)[] | {
x: any;
y: any;
fill?: ApexFill;
fillColor?: string;
strokeColor?: string;
meta?: any;
goals?: {
name?: string;
value: number;
strokeHeight?: number;
strokeWidth?: number;
strokeColor?: string;
strokeDashArray?: number;
strokeLineCap?: "butt" | "square" | "round";
}[];
barHeightOffset?: number;
columnWidthOffset?: number;
}[] | [number, number | null][] | [number, (number | null)[]][] | number[][] | Record<string, any>[];
}[];
type ApexNonAxisChartSeries = number[] | ApexAxisChartSeries;
/**
* Options for the line drawn on line and area charts.
* See https://apexcharts.com/docs/options/stroke/
*/
interface ApexStroke {
show?: boolean;
curve?: "smooth" | "straight" | "stepline" | "monotoneCubic" | "linestep" | ("smooth" | "straight" | "stepline" | "monotoneCubic" | "linestep")[];
lineCap?: "butt" | "square" | "round";
colors?: any[];
width?: number | number[];
dashArray?: number | number[];
fill?: ApexFill;
}
interface ApexAnnotations {
yaxis?: YAxisAnnotations[];
xaxis?: XAxisAnnotations[];
points?: PointAnnotations[];
texts?: TextAnnotations[];
images?: ImageAnnotations[];
}
interface AnnotationLabel {
borderColor?: string;
borderWidth?: number;
borderRadius?: number;
text?: string | string[];
textAnchor?: string;
offsetX?: number;
offsetY?: number;
style?: AnnotationStyle;
position?: string;
orientation?: string;
mouseEnter?: Function;
mouseLeave?: Function;
click?: Function;
}
interface AnnotationStyle {
background?: string;
color?: string;
fontSize?: string;
fontFamily?: string;
fontWeight?: string | number;
cssClass?: string;
padding?: {
left?: number;
right?: number;
top?: number;
bottom?: number;
};
}
interface XAxisAnnotations {
id?: number | string;
x?: null | number | string;
x2?: null | number | string;
strokeDashArray?: number;
fillColor?: string;
borderColor?: string;
borderWidth?: number;
opacity?: number;
offsetX?: number;
offsetY?: number;
label?: AnnotationLabel;
}
interface YAxisAnnotations {
id?: number | string;
y?: null | number | string;
y2?: null | number | string;
strokeDashArray?: number;
fillColor?: string;
borderColor?: string;
borderWidth?: number;
opacity?: number;
offsetX?: number;
offsetY?: number;
width?: number | string;
yAxisIndex?: number;
label?: AnnotationLabel;
}
interface PointAnnotations {
id?: number | string;
x?: number | string;
y?: null | number;
yAxisIndex?: number;
seriesIndex?: number;
mouseEnter?: Function;
mouseLeave?: Function;
click?: Function;
marker?: {
size?: number;
fillColor?: string;
strokeColor?: string;
strokeWidth?: number;
shape?: string;
offsetX?: number;
offsetY?: number;
cssClass?: string;
};
label?: AnnotationLabel;
image?: {
path?: string;
width?: number;
height?: number;
offsetX?: number;
offsetY?: number;
};
}
interface ImageAnnotations {
path?: string;
x?: number;
y?: number;
width?: number;
height?: number;
appendTo?: string;
}
interface TextAnnotations {
x?: number;
y?: number;
text?: string;
textAnchor?: string;
foreColor?: string;
fontSize?: string | number;
fontFamily?: undefined | string;
fontWeight?: string | number;
appendTo?: string;
backgroundColor?: string;
borderColor?: string;
borderRadius?: number;
borderWidth?: number;
paddingLeft?: number;
paddingRight?: number;
paddingTop?: number;
paddingBottom?: number;
}
/**
* Options for localization.
* See https://apexcharts.com/docs/options/chart/locales
*/
interface ApexLocale {
name?: string;
options?: {
months?: string[];
shortMonths?: string[];
days?: string[];
shortDays?: string[];
toolbar?: {
download?: string;
selection?: string;
selectionZoom?: string;
zoomIn?: string;
zoomOut?: string;
pan?: string;
reset?: string;
exportToSVG?: string;
exportToPNG?: string;
exportToCSV?: string;
menu?: string;
};
};
}
/**
* PlotOptions for specifying chart-type-specific configuration.
* See https://apexcharts.com/docs/options/plotoptions/bar/
*/
interface ApexPlotOptions {
line?: {
isSlopeChart?: boolean;
colors?: {
threshold?: number;
colorAboveThreshold?: string;
colorBelowThreshold?: string;
};
};
area?: {
fillTo?: "origin" | "end";
};
bar?: {
horizontal?: boolean;
columnWidth?: string | number;
barHeight?: string | number;
distributed?: boolean;
borderRadius?: number;
borderRadiusApplication?: "around" | "end";
borderRadiusWhenStacked?: "all" | "last";
hideZeroBarsWhenGrouped?: boolean;
rangeBarOverlap?: boolean;
rangeBarGroupRows?: boolean;
isDumbbell?: boolean;
dumbbellColors?: string[][];
isFunnel?: boolean;
isFunnel3d?: boolean;
colors?: {
ranges?: {
from?: number;
to?: number;
color?: string;
}[];
backgroundBarColors?: string[];
backgroundBarOpacity?: number;
backgroundBarRadius?: number;
};
dataLabels?: {
maxItems?: number;
hideOverflowingLabels?: boolean;
position?: string;
orientation?: "horizontal" | "vertical";
total?: {
enabled?: boolean;
formatter?(val?: string, opts?: any): string;
offsetX?: number;
offsetY?: number;
style?: {
color?: string;
fontSize?: string;
fontFamily?: string;
fontWeight?: number | string;
};
};
};
};
bubble?: {
zScaling?: boolean;
minBubbleRadius?: number;
maxBubbleRadius?: number;
};
candlestick?: {
type?: string;
colors?: {
upward?: string | string[];
downward?: string | string[];
};
wick?: {
useFillColor?: boolean;
};
};
boxPlot?: {
colors?: {
upper?: string | string[];
lower?: string | string[];
};
};
heatmap?: {
radius?: number;
enableShades?: boolean;
shadeIntensity?: number;
reverseNegativeShade?: boolean;
distributed?: boolean;
useFillColorAsStroke?: boolean;
colorScale?: {
ranges?: {
from?: number;
to?: number;
color?: string;
foreColor?: string;
name?: string;
}[];
inverse?: boolean;
min?: number;
max?: number;
};
};
treemap?: {
enableShades?: boolean;
shadeIntensity?: number;
distributed?: boolean;
reverseNegativeShade?: boolean;
useFillColorAsStroke?: boolean;
dataLabels?: {
format?: "scale" | "truncate";
};
borderRadius?: number;
colorScale?: {
inverse?: boolean;
ranges?: {
from?: number;
to?: number;
color?: string;
foreColor?: string;
name?: string;
}[];
min?: number;
max?: number;
};
seriesTitle?: {
show?: boolean;
offsetY?: number;
offsetX?: number;
borderColor?: string;
borderWidth?: number;
borderRadius?: number;
style?: {
background?: string;
color?: string;
fontSize?: string;
fontFamily?: string;
fontWeight?: number | string;
cssClass?: string;
padding?: {
left?: number;
right?: number;
top?: number;
bottom?: number;
};
};
};
};
pie?: {
startAngle?: number;
endAngle?: number;
customScale?: number;
offsetX?: number;
offsetY?: number;
expandOnClick?: boolean;
dataLabels?: {
offset?: number;
minAngleToShowLabel?: number;
};
donut?: {
size?: string;
background?: string;
labels?: {
show?: boolean;
name?: {
show?: boolean;
fontSize?: string;
fontFamily?: string;
fontWeight?: string | number;
color?: string;
offsetY?: number;
formatter?(val: string): string;
};
value?: {
show?: boolean;
fontSize?: string;
fontFamily?: string;
fontWeight?: string | number;
color?: string;
offsetY?: number;
formatter?(val: string | number): string;
};
total?: {
show?: boolean;
showAlways?: boolean;
fontFamily?: string;
fontSize?: string;
fontWeight?: string | number;
label?: string;
color?: string;
formatter?(w: any): string;
};
};
};
};
polarArea?: {
rings?: {
strokeWidth?: number;
strokeColor?: string;
};
spokes?: {
strokeWidth?: number;
connectorColors?: string | string[];
};
};
radar?: {
size?: number;
offsetX?: number;
offsetY?: number;
polygons?: {
strokeColors?: string | string[];
strokeWidth?: string | string[];
connectorColors?: string | string[];
fill?: {
colors?: string[];
};
};
};
radialBar?: {
inverseOrder?: boolean;
startAngle?: number;
endAngle?: number;
offsetX?: number;
offsetY?: number;
hollow?: {
margin?: number;
size?: string;
background?: string;
image?: string;
imageWidth?: number;
imageHeight?: number;
imageOffsetX?: number;
imageOffsetY?: number;
imageClipped?: boolean;
position?: "front" | "back";
dropShadow?: ApexDropShadow;
};
track?: {
show?: boolean;
startAngle?: number;
endAngle?: number;
background?: string | string[];
strokeWidth?: string;
opacity?: number;
margin?: number;
dropShadow?: ApexDropShadow;
};
dataLabels?: {
show?: boolean;
name?: {
show?: boolean;
fontSize?: string;
fontFamily?: string;
fontWeight?: string | number;
color?: string;
offsetY?: number;
};
value?: {
show?: boolean;
fontSize?: string;
fontFamily?: string;
fontWeight?: string | number;
color?: string;
offsetY?: number;
formatter?(val: number): string;
};
total?: {
show?: boolean;
label?: string;
fontFamily?: string;
fontSize?: string;
fontWeight?: string | number;
color?: string;
formatter?(opts: any): string;
};
};
barLabels?: {
enabled?: boolean;
offsetX?: number;
offsetY?: number;
useSeriesColors?: boolean;
fontFamily?: string;
fontWeight?: string | number;
fontSize?: string;
formatter?: (barName: string, opts?: any) => string;
onClick?: (barName: string, opts?: any) => void;
};
};
}
type ApexColorStop = {
offset: number;
color: string;
opacity: number;
};
interface ApexFill {
colors?: any[];
opacity?: number | number[];
type?: string | string[];
gradient?: {
shade?: string;
type?: string;
shadeIntensity?: number;
gradientToColors?: string[];
inverseColors?: boolean;
opacityFrom?: number | number[];
opacityTo?: number | number[];
stops?: number[];
colorStops?: ApexColorStop[][] | ApexColorStop[];
};
image?: {
src?: string | string[];
width?: number;
height?: number;
};
pattern?: {
style?: string | string[];
width?: number;
height?: number;
strokeWidth?: number;
};
}
/**
* Chart Legend configuration options.
* See https://apexcharts.com/docs/options/legend/
*/
interface ApexLegend {
show?: boolean;
showForSingleSeries?: boolean;
showForNullSeries?: boolean;
showForZeroSeries?: boolean;
floating?: boolean;
inverseOrder?: boolean;
position?: "top" | "right" | "bottom" | "left";
horizontalAlign?: "left" | "center" | "right";
fontSize?: string;
fontFamily?: string;
fontWeight?: string | number;
width?: number;
height?: number;
offsetX?: number;
offsetY?: number;
customLegendItems?: string[];
clusterGroupedSeries?: boolean;
clusterGroupedSeriesOrientation?: string;
labels?: {
colors?: string | string[];
useSeriesColors?: boolean;
};
markers?: {
size?: number;
strokeWidth?: number;
fillColors?: string[];
shape?: ApexMarkerShape;
offsetX?: number;
offsetY?: number;
customHTML?(): any;
onClick?(): void;
};
itemMargin?: {
horizontal?: number;
vertical?: number;
};
onItemClick?: {
toggleDataSeries?: boolean;
};
onItemHover?: {
highlightDataSeries?: boolean;
};
formatter?(legendName: string, opts?: any): string;
tooltipHoverFormatter?(legendName: string, opts?: any): string;
}
/**
* Chart Datalabels options
* See https://apexcharts.com/docs/options/datalabels/
*/
interface ApexDataLabels {
enabled?: boolean;
enabledOnSeries?: undefined | number[];
textAnchor?: "start" | "middle" | "end";
distributed?: boolean;
offsetX?: number;
offsetY?: number;
style?: {
fontSize?: string;
fontFamily?: string;
fontWeight?: string | number;
colors?: any[];
};
background?: {
enabled?: boolean;
foreColor?: string;
backgroundColor?: string;
borderRadius?: number;
padding?: number;
opacity?: number;
borderWidth?: number;
borderColor?: string;
dropShadow?: ApexDropShadow;
};
dropShadow?: ApexDropShadow;
formatter?(val: string | number | number[], opts?: any): string | number | (string | number)[];
}
interface ApexResponsive {
breakpoint?: number;
options?: any;
}
type ApexTooltipY = {
title?: {
formatter?(seriesName: string, opts?: any): string;
};
formatter?(val: number, opts?: any): string;
};
/**
* Chart Tooltip options
* See https://apexcharts.com/docs/options/tooltip/
*/
interface ApexTooltip {
enabled?: boolean;
enabledOnSeries?: undefined | number[];
shared?: boolean;
followCursor?: boolean;
intersect?: boolean;
inverseOrder?: boolean;
custom?: ((options: any) => any) | ((options: any) => any)[];
fillSeriesColor?: boolean;
theme?: string;
cssClass?: string;
hideEmptySeries?: boolean;
style?: {
fontSize?: string;
fontFamily?: string;
};
onDatasetHover?: {
highlightDataSeries?: boolean;
};
x?: {
show?: boolean;
format?: string;
formatter?(val: string | number, opts?: any): string;
};
y?: ApexTooltipY | ApexTooltipY[];
z?: {
title?: string;
formatter?(val: number): string;
};
marker?: {
show?: boolean;
fillColors?: string[];
};
items?: {
display?: string;
};
fixed?: {
enabled?: boolean;
position?: string;
offsetX?: number;
offsetY?: number;
};
}
/**
* X Axis options
* See https://apexcharts.com/docs/options/xaxis/
*/
interface ApexXAxis {
type?: "category" | "datetime" | "numeric";
categories?: any;
overwriteCategories?: number[] | string[] | undefined;
offsetX?: number;
offsetY?: number;
sorted?: boolean;
labels?: {
show?: boolean;
rotate?: number;
rotateAlways?: boolean;
hideOverlappingLabels?: boolean;
showDuplicates?: boolean;
trim?: boolean;
minHeight?: number;
maxHeight?: number;
style?: {
colors?: string | string[];
fontSize?: string;
fontWeight?: string | number;
fontFamily?: string;
cssClass?: string;
};
offsetX?: number;
offsetY?: number;
format?: string;
datetimeUTC?: boolean;
datetimeFormatter?: {
year?: string;
month?: string;
day?: string;
hour?: string;
minute?: string;
second?: string;
};
formatter?(value: string | number, timestamp?: number, opts?: any): string | string[];
};
group?: {
groups?: {
title: string;
cols: number;
}[];
style?: {
colors?: string | string[];
fontSize?: string;
fontFamily?: string;
fontWeight?: string | number;
cssClass?: string;
};
};
axisBorder?: {
show?: boolean;
color?: string;
height?: number;
offsetX?: number;
offsetY?: number;
strokeWidth?: number;
};
axisTicks?: {
show?: boolean;
borderType?: string;
color?: string;
height?: number;
offsetX?: number;
offsetY?: number;
};
tickPlacement?: string;
stepSize?: number;
tickAmount?: number | "dataPoints";
min?: number;
max?: number;
range?: number;
floating?: boolean;
decimalsInFloat?: number;
position?: string;
title?: {
text?: string;
offsetX?: number;
offsetY?: number;
style?: {
color?: string;
fontFamily?: string;
fontWeight?: string | number;
fontSize?: string;
cssClass?: string;
};
};
crosshairs?: {
show?: boolean;
width?: number | string;
position?: string;
opacity?: number;
stroke?: {
color?: string;
width?: number;
dashArray?: number;
};
fill?: {
type?: string;
color?: string;
gradient?: {
colorFrom?: string;
colorTo?: string;
stops?: number[];
opacityFrom?: number;
opacityTo?: number;
};
};
dropShadow?: ApexDropShadow;
};
tooltip?: {
enabled?: boolean;
offsetY?: number;
style?: {
fontSize?: string;
fontFamily?: string;
};
formatter?(value: string | number, opts?: object): string;
};
}
/**
* Y Axis options
* See https://apexcharts.com/docs/options/yaxis/
*/
interface ApexYAxis {
show?: boolean;
showAlways?: boolean;
showForNullSeries?: boolean;
seriesName?: string | string[];
opposite?: boolean;
reversed?: boolean;
logarithmic?: boolean;
logBase?: number;
tickAmount?: number;
stepSize?: number;
forceNiceScale?: boolean;
min?: number | ((min: number) => number);
max?: number | ((max: number) => number);
floating?: boolean;
decimalsInFloat?: number;
labels?: {
show?: boolean;
showDuplicates?: boolean;
minWidth?: number;
maxWidth?: number;
offsetX?: number;
offsetY?: number;
rotate?: number;
align?: "left" | "center" | "right";
padding?: number;
style?: {
colors?: string | string[];
fontSize?: string;
fontFamily?: string;
fontWeight?: string | number;
cssClass?: string;
};
formatter?(val: number, opts?: any): string | string[];
};
axisBorder?: {
show?: boolean;
color?: string;
width?: number;
offsetX?: number;
offsetY?: number;
};
axisTicks?: {
show?: boolean;
color?: string;
width?: number;
offsetX?: number;
offsetY?: number;
};
title?: {
text?: string;
rotate?: number;
offsetX?: number;
offsetY?: number;
style?: {
color?: string;
fontSize?: string;
fontFamily?: string;
fontWeight?: string | number;
cssClass?: string;
};
};
crosshairs?: {
show?: boolean;
position?: string;
stroke?: {
color?: string;
width?: number;
dashArray?: number;
};
};
tooltip?: {
enabled?: boolean;
offsetX?: number;
};
}
interface ApexForecastDataPoints {
count?: number;
fillOpacity?: number;
strokeWidth?: undefined | number;
dashArray?: number;
}
/**
* Plot X and Y grid options
* See https://apexcharts.com/docs/options/grid/
*/
interface ApexGrid {
show?: boolean;
borderColor?: string;
strokeDashArray?: number;
position?: "front" | "back";
xaxis?: {
lines?: {
show?: boolean;
offsetX?: number;
offsetY?: number;
};
};
yaxis?: {
lines?: {
show?: boolean;
offsetX?: number;
offsetY?: number;
};
};
row?: {
colors?: string[];
opacity?: number;
};
column?: {
colors?: string[];
opacity?: number;
};
padding?: {
top?: number;
right?: number;
bottom?: number;
left?: number;
};
}
interface ApexTheme {
mode?: "light" | "dark";
palette?: string;
monochrome?: {
enabled?: boolean;
color?: string;
shadeTo?: "light" | "dark";
shadeIntensity?: number;
};
}
type MarkerShapeOptions = "circle" | "square" | "rect" | "line" | "cross" | "plus" | "star" | "sparkle" | "diamond" | "triangle";
type ApexMarkerShape = MarkerShapeOptions | MarkerShapeOptions[];
interface ApexDiscretePoint {
seriesIndex?: number;
dataPointIndex?: number;
fillColor?: string;
strokeColor?: string;
size?: number;
shape?: ApexMarkerShape;
}
interface ApexMarkers {
size?: number | number[];
colors?: string | string[];
strokeColors?: string | string[];
strokeWidth?: number | number[];
strokeOpacity?: number | number[];
strokeDashArray?: number | number[];
fillOpacity?: number | number[];
discrete?: ApexDiscretePoint[];
shape?: ApexMarkerShape;
offsetX?: number;
offsetY?: number;
showNullDataPoints?: boolean;
hover?: {
size?: number;
sizeOffset?: number;
};
onClick?(e?: any): void;
onDblClick?(e?: any): void;
}
interface ApexNoData {
text?: string;
align?: "left" | "right" | "center";
verticalAlign?: "top" | "middle" | "bottom";
offsetX?: number;
offsetY?: number;
style?: {
color?: string;
fontSize?: string;
fontFamily?: string;
};
}
interface ApexParsing {
x?: string;
y?: string | string[];
z?: string;
}
type ChartType = "line" | "area" | "bar" | "pie" | "donut" | "radialBar" | "scatter" | "bubble" | "heatmap" | "candlestick" | "boxPlot" | "radar" | "polarArea" | "rangeBar" | "rangeArea" | "treemap";
declare class ChartComponent implements OnChanges, OnDestroy {
readonly chart: _angular_core.InputSignal<ApexChart>;
readonly annotations: _angular_core.InputSignal<ApexAnnotations>;
readonly colors: _angular_core.InputSignal<any[]>;
readonly dataLabels: _angular_core.InputSignal<ApexDataLabels>;
readonly series: _angular_core.InputSignal<ApexNonAxisChartSeries>;
readonly stroke: _angular_core.InputSignal<ApexStroke>;
readonly labels: _angular_core.InputSignal<string[]>;
readonly legend: _angular_core.InputSignal<ApexLegend>;
readonly markers: _angular_core.InputSignal<ApexMarkers>;
readonly noData: _angular_core.InputSignal<ApexNoData>;
readonly parsing: _angular_core.InputSignal<ApexParsing>;
readonly fill: _angular_core.InputSignal<ApexFill>;
readonly tooltip: _angular_core.InputSignal<ApexTooltip>;
readonly plotOptions: _angular_core.InputSignal<ApexPlotOptions>;
readonly responsive: _angular_core.InputSignal<ApexResponsive[]>;
readonly xaxis: _angular_core.InputSignal<ApexXAxis>;
readonly yaxis: _angular_core.InputSignal<ApexYAxis | ApexYAxis[]>;
readonly forecastDataPoints: _angular_core.InputSignal<ApexForecastDataPoints>;
readonly grid: _angular_core.InputSignal<ApexGrid>;
readonly states: _angular_core.InputSignal<ApexStates>;
readonly title: _angular_core.InputSignal<ApexTitleSubtitle>;
readonly subtitle: _angular_core.InputSignal<ApexTitleSubtitle>;
readonly theme: _angular_core.InputSignal<ApexTheme>;
readonly autoUpdateSeries: _angular_core.InputSignal<boolean>;
readonly chartReady: _angular_core.OutputEmitterRef<{
chartObj: ApexChartsType;
}>;
readonly chartInstance: _angular_core.WritableSignal<ApexChartsType>;
private readonly chartElement;
private ngZone;
private isBrowser;
private _destroyed;
private readonly _injector;
private waitingForConnectedRef;
ngOnChanges(changes: SimpleChanges): void;
ngOnDestroy(): void;
/** Determine if the host element is connected to the document */
private get isConnected();
private hydrate;
/** @internal Extracted to allow subclasses and tests to swap the ApexCharts bundle. */
protected importApexCharts(): Promise<{
default: typeof ApexChartsType;
}>;
private createElement;
render(): Promise<ApexChartsType>;
updateOptions(options: any, redrawPaths?: boolean, animate?: boolean, updateSyncedCharts?: boolean): Promise<ApexChartsType>;
updateSeries(newSeries: ApexAxisChartSeries | ApexNonAxisChartSeries, animate?: boolean): Promise<ApexChartsType>;
appendSeries(newSeries: ApexAxisChartSeries | ApexNonAxisChartSeries, animate?: boolean): void;
appendData(newData: any[]): void;
highlightSeries(seriesName: string): any;
toggleSeries(seriesName: string): any;
showSeries(seriesName: string): void;
hideSeries(seriesName: string): void;
resetSeries(): void;
zoomX(min: number, max: number): void;
toggleDataPointSelection(seriesIndex: number, dataPointIndex?: number): void;
destroy(): void;
setLocale(localeName: string): void;
paper(): void;
addXaxisAnnotation(options: any, pushToMemory?: boolean, context?: any): void;
addYaxisAnnotation(options: any, pushToMemory?: boolean, context?: any): void;
addPointAnnotation(options: any, pushToMemory?: boolean, context?: any): void;
removeAnnotation(id: string, options?: any): void;
clearAnnotations(options?: any): void;
dataURI(options?: any): Promise<{
imgURI: string;
} | {
blob: Blob;
}>;
private waitForConnected;
static ɵfac: _angular_core.ɵɵFactoryDeclaration<ChartComponent, never>;
static ɵcmp: _angular_core.ɵɵComponentDeclaration<ChartComponent, "apx-chart", never, { "chart": { "alias": "chart"; "required": false; "isSignal": true; }; "annotations": { "alias": "annotations"; "required": false; "isSignal": true; }; "colors": { "alias": "colors"; "required": false; "isSignal": true; }; "dataLabels": { "alias": "dataLabels"; "required": false; "isSignal": true; }; "series": { "alias": "series"; "required": false; "isSignal": true; }; "stroke": { "alias": "stroke"; "required": false; "isSignal": true; }; "labels": { "alias": "labels"; "required": false; "isSignal": true; }; "legend": { "alias": "legend"; "required": false; "isSignal": true; }; "markers": { "alias": "markers"; "required": false; "isSignal": true; }; "noData": { "alias": "noData"; "required": false; "isSignal": true; }; "parsing": { "alias": "parsing"; "required": false; "isSignal": true; }; "fill": { "alias": "fill"; "required": false; "isSignal": true; }; "tooltip": { "alias": "tooltip"; "required": false; "isSignal": true; }; "plotOptions": { "alias": "plotOptions"; "required": false; "isSignal": true; }; "responsive": { "alias": "responsive"; "required": false; "isSignal": true; }; "xaxis": { "alias": "xaxis"; "required": false; "isSignal": true; }; "yaxis": { "alias": "yaxis"; "required": false; "isSignal": true; }; "forecastDataPoints": { "alias": "forecastDataPoints"; "required": false; "isSignal": true; }; "grid": { "alias": "grid"; "required": false; "isSignal": true; }; "states": { "alias": "states"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "subtitle": { "alias": "subtitle"; "required": false; "isSignal": true; }; "theme": { "alias": "theme"; "required": false; "isSignal": true; }; "autoUpdateSeries": { "alias": "autoUpdateSeries"; "required": false; "isSignal": true; }; }, { "chartReady": "chartReady"; }, never, never, true, never>;
}
/**
* Tree-shakeable variant of `<apx-chart>`.
*
* Loads `apexcharts/core` (~611 KB) instead of the full `apexcharts/client`
* bundle (~942 KB). To register chart types and features, add side-effect
* imports **before** this component is rendered — typically in `app.config.ts`
* or at the top of the component that bootstraps the charts:
*
* ```ts
* import "apexcharts/line"; // line, area, scatter, bubble
* import "apexcharts/bar"; // bar, column, rangeBar
* import "apexcharts/features/legend"; // opt-in legend
* import "apexcharts/features/toolbar"; // opt-in toolbar
* ```
*
* All inputs/outputs/methods are identical to `<apx-chart>`.
*/
declare class ChartCoreComponent extends ChartComponent {
protected importApexCharts(): Promise<{
default: typeof ApexChartsType;
}>;
static ɵfac: _angular_core.ɵɵFactoryDeclaration<ChartCoreComponent, never>;
static ɵcmp: _angular_core.ɵɵComponentDeclaration<ChartCoreComponent, "apx-chart-core", never, {}, {}, never, never, true, never>;
}
/**
* Server-side rendering component for ApexCharts.
*
* On the server: renders SVG imperatively into the host element, stores HTML in TransferState.
* On the client: ngSkipHydration tells Angular to leave the host DOM alone.
* afterNextRender then injects the HTML from TransferState into the host imperatively
* (as a fallback if ngSkipHydration stripped the content, which it does with empty templates).
* ChartHydrateComponent also uses afterNextRender so it runs after this, guaranteeing
* [data-apexcharts-hydrate] is present when Pattern B calls hydrate().
*
* @example
* <apx-chart-ssr [options]="chartOptions" [width]="500" [height]="300" />
*/
declare class ChartSSRComponent implements OnInit {
readonly options: _angular_core.InputSignal<ApexOptions>;
readonly width: _angular_core.InputSignal<number>;
readonly height: _angular_core.InputSignal<number>;
private readonly chartSSRService;
private readonly pendingTasks;
private readonly el;
private readonly transferState;
private readonly stateKey;
private readonly isServer;
constructor(platformId: object);
ngOnInit(): Promise<void>;
static ɵfac: _angular_core.ɵɵFactoryDeclaration<ChartSSRComponent, never>;
static ɵcmp: _angular_core.ɵɵComponentDeclaration<ChartSSRComponent, "apx-chart-ssr", never, { "options": { "alias": "options"; "required": true; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
}
/**
* Client-side hydration component for ApexCharts SSR output.
*
* Must be placed immediately after `<apx-chart-ssr>` in the DOM. It finds
* the server-rendered `[data-apexcharts-hydrate]` element in the preceding
* `<apx-chart-ssr>` sibling and calls `ApexCharts.hydrate()` on it to
* attach full interactivity (animations, tooltips, zoom, etc.).
*
* Uses afterNextRender so it runs after ChartSSRComponent has injected the
* server HTML into the DOM (which also happens in afterNextRender).
*
* On the server this component does nothing.
*
* @example
* <apx-chart-ssr [options]="chartOptions" />
* <apx-chart-hydrate [clientOptions]="{ chart: { animations: { enabled: true } } }" />
*/
declare class ChartHydrateComponent implements OnInit, OnDestroy {
readonly clientOptions: _angular_core.InputSignal<Partial<ApexOptions>>;
private readonly el;
private readonly ngZone;
private readonly injector;
private readonly isBrowser;
private chartObj;
constructor(platformId: object);
ngOnInit(): void;
/** @internal Extracted to allow spying in unit tests without importing actual SSR/hydrate bundle. */
protected importClientModule(): Promise<{
default: typeof ApexChartsType;
}>;
ngOnDestroy(): void;
static ɵfac: _angular_core.ɵɵFactoryDeclaration<ChartHydrateComponent, never>;
static ɵcmp: _angular_core.ɵɵComponentDeclaration<ChartHydrateComponent, "apx-chart-hydrate", never, { "clientOptions": { "alias": "clientOptions"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
}
declare class NgApexchartsModule {
static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgApexchartsModule, never>;
static ɵmod: _angular_core.ɵɵNgModuleDeclaration<NgApexchartsModule, never, [typeof ChartComponent, typeof ChartCoreComponent, typeof ChartSSRComponent, typeof ChartHydrateComponent], [typeof ChartComponent, typeof ChartCoreComponent, typeof ChartSSRComponent, typeof ChartHydrateComponent]>;
static ɵinj: _angular_core.ɵɵInjectorDeclaration<NgApexchartsModule>;
}
interface ApexSSROptions {
width?: number;
height?: number;
}
declare class ChartSSRService {
/** Per-app-instance counter for stable TransferState keys. Resets on each server bootstrap. */
private instanceCounter;
nextInstanceId(): number;
/** @internal Extracted to allow spying in unit tests without importing actual SSR bundle. */
protected importSSRModule(): Promise<{
default: typeof apexcharts_ssr;
}>;
renderToHTML(options: ApexOptions, ssrOptions?: ApexSSROptions): Promise<string>;
renderToString(options: ApexOptions, ssrOptions?: ApexSSROptions): Promise<string>;
static ɵfac: _angular_core.ɵɵFactoryDeclaration<ChartSSRService, never>;
static ɵprov: _angular_core.ɵɵInjectableDeclaration<ChartSSRService>;
}
export { ChartComponent, ChartCoreComponent, ChartHydrateComponent, ChartSSRComponent, ChartSSRService, NgApexchartsModule };
export type { AnnotationLabel, AnnotationStyle, ApexAnnotations, ApexAxisChartSeries, ApexChart, ApexDataLabels, ApexFill, ApexForecastDataPoints, ApexGrid, ApexLegend, ApexLocale, ApexMarkers, ApexNoData, ApexNonAxisChartSeries, ApexOptions, ApexParsing, ApexPlotOptions, ApexResponsive, ApexSSROptions, ApexStates, ApexStroke, ApexTheme, ApexTitleSubtitle, ApexTooltip, ApexXAxis, ApexYAxis, ChartType, ImageAnnotations, PointAnnotations, TextAnnotations, XAxisAnnotations, YAxisAnnotations };