Untitled diff
6 removals
939 lines
17 additions
934 lines
// Typescript declarations for Apex class and module.
// Typescript declarations for Apex class and module.
// Note: When you have a class and a module with the same name; the module is merged
// Note: When you have a class and a module with the same name; the module is merged
// with the class. This is necessary since apexcharts exports the main ApexCharts class only.
// with the class. This is necessary since apexcharts exports the main ApexCharts class only.
//
//
// This is a sparse typed declarations of chart interfaces. See Apex Chart documentation
// This is a sparse typed declarations of chart interfaces. See Apex Chart documentation
// for comprehensive API: https://apexcharts.com/docs/options
// for comprehensive API: https://apexcharts.com/docs/options
//
//
// There is on-going work to provide a comprehensive typed definition for this component.
// There is on-going work to provide a comprehensive typed definition for this component.
// See https://github.com/DefinitelyTyped/DefinitelyTyped/pull/28733
// See https://github.com/DefinitelyTyped/DefinitelyTyped/pull/28733
declare class ApexCharts {
declare module 'apexcharts' {
constructor(el: any, options: any);
export default class ApexCharts {
render(): Promise<void>;
constructor(el: any, options: any);
updateOptions(options: any, redrawPaths?: boolean, animate?: boolean): Promise<void>;
render(): Promise<void>;
updateSeries(newSeries: ApexAxisChartSeries | ApexNonAxisChartSeries, animate?: boolean): void;
updateOptions(options: any, redrawPaths?: boolean, animate?: boolean): Promise<void>;
appendSeries(newSeries: ApexAxisChartSeries | ApexNonAxisChartSeries, animate?: boolean): void;
updateSeries(newSeries: ApexAxisChartSeries | ApexNonAxisChartSeries, animate?: boolean): void;
toggleSeries(seriesName: string): void;
appendSeries(newSeries: ApexAxisChartSeries | ApexNonAxisChartSeries, animate?: boolean): void;
destroy(): void;
toggleSeries(seriesName: string): void;
addXaxisAnnotation(options: any, pushToMemory?: boolean, context?: any): void;
destroy(): void;
addYaxisAnnotation(options: any, pushToMemory?: boolean, context?: any): void;
addXaxisAnnotation(options: any, pushToMemory?: boolean, context?: any): void;
addPointAnnotation(options: any, pushToMemory?: boolean, context?: any): void;
addYaxisAnnotation(options: any, pushToMemory?: boolean, context?: any): void;
addText(options: any, pushToMemory?: boolean, context?: any): void;
addPointAnnotation(options: any, pushToMemory?: boolean, context?: any): void;
dataURI(): Promise<void>;
addText(options: any, pushToMemory?: boolean, context?: any): void;
static exec(chartID: string, fn: () => void, options: any): any;
dataURI(): Promise<void>;
static initOnLoad(): void;
static exec(chartID: string, fn: () => void, options: any): any;
}
static initOnLoad(): void;
}
declare module ApexCharts {
export interface ApexOptions {
export interface ApexOptions {
annotations?: ApexAnnotations;
annotations?: ApexAnnotations;
chart?: ApexChart;
chart?: ApexChart;
colors?: any[];
colors?: any[];
dataLabels?: ApexDataLabels;
dataLabels?: ApexDataLabels;
fill?: ApexFill;
fill?: ApexFill;
grid?: ApexGrid;
grid?: ApexGrid;
labels?: string[];
labels?: string[];
legend?: ApexLegend;
legend?: ApexLegend;
markers?: ApexMarkers;
markers?: ApexMarkers;
noData?: ApexNoData;
noData?: ApexNoData;
plotOptions?: ApexPlotOptions;
plotOptions?: ApexPlotOptions;
responsive?: ApexResponsive[];
responsive?: ApexResponsive[];
series?: ApexAxisChartSeries | ApexNonAxisChartSeries;
series?: ApexAxisChartSeries | ApexNonAxisChartSeries;
states?: ApexStates;
states?: ApexStates;
stroke?: ApexStroke;
stroke?: ApexStroke;
subtitle?: ApexTitleSubtitle;
subtitle?: ApexTitleSubtitle;
theme?: ApexTheme;
theme?: ApexTheme;
title?: ApexTitleSubtitle;
title?: ApexTitleSubtitle;
tooltip?: ApexTooltip;
tooltip?: ApexTooltip;
xaxis?: ApexXAxis;
xaxis?: ApexXAxis;
yaxis?: ApexYAxis | ApexYAxis[];
yaxis?: ApexYAxis | ApexYAxis[];
}
}
}
}
/**
/**
* Main Chart options
* Main Chart options
* See https://apexcharts.com/docs/options/chart/
* See https://apexcharts.com/docs/options/chart/
*/
*/
type ApexChart = {
type ApexChart = {
width?: string | number;
width?: string | number;
height?: string | number;
height?: string | number;
type?: "line" | "area" | "bar" | "histogram" | "pie" | "donut" |
type?: "line" | "area" | "bar" | "histogram" | "pie" | "donut" |
"radialBar" | "scatter" | "bubble" | "heatmap" | "candlestick" | "radar" | "rangeBar";
"radialBar" | "scatter" | "bubble" | "heatmap" | "candlestick" | "radar" | "rangeBar";
foreColor?: string;
foreColor?: string;
fontFamily?: string;
fontFamily?: string;
background?: string;
background?: string;
offsetX?: number;
offsetX?: number;
offsetY?: number;
offsetY?: number;
dropShadow?: {
dropShadow?: {
enabled?: boolean;
enabled?: boolean;
top?: number;
top?: number;
left?: number;
left?: number;
blur?: number;
blur?: number;
opacity?: number;
opacity?: number;
};
};
events?: {
events?: {
animationEnd?(chart: any, options: any): void;
animationEnd?(chart: any, options: any): void;
beforeMount?(chart: any, options: any): void;
beforeMount?(chart: any, options: any): void;
mounted?(chart: any, options: any): void;
mounted?(chart: any, options: any): void;
updated?(chart: any, options: any): void;
updated?(chart: any, options: any): void;
click?(e: any, chart: any, options: any): void;
click?(e: any, chart: any, options: any): void;
legendClick?(chart: any, seriesIndex: number, options: any): void;
legendClick?(chart: any, seriesIndex: number, options: any): void;
markerClick?(e: any, chart: any, options: any): void;
markerClick?(e: any, chart: any, options: any): void;
selection?(chart: any, options: any): void;
selection?(chart: any, options: any): void;
dataPointSelection?(e: any, chart: any, options: any): void;
dataPointSelection?(e: any, chart: any, options: any): void;
dataPointMouseEnter?(e: any, chart: any, options: any): void;
dataPointMouseEnter?(e: any, chart: any, options: any): void;
dataPointMouseLeave?(e: any, chart: any, options: any): void;
dataPointMouseLeave?(e: any, chart: any, options: any): void;
beforeZoom?(chart: any, options: any): void;
beforeZoom?(chart: any, options: any): void;
zoomed?(chart: any, options: any): void;
zoomed?(chart: any, options: any): void;
scrolled?(chart: any, options: any): void;
scrolled?(chart: any, options: any): void;
};
};
brush?: {
brush?: {
enabled?: boolean;
enabled?: boolean;
autoScaleYaxis?: boolean,
autoScaleYaxis?: boolean,
target?: string;
target?: string;
};
};
id?: string;
id?: string;
locales?: ApexLocale[];
locales?: ApexLocale[];
defaultLocale?: string;
defaultLocale?: string;
parentHeightOffset?: number;
parentHeightOffset?: number;
sparkline?: {
sparkline?: {
enabled?: boolean;
enabled?: boolean;
};
};
stacked?: boolean;
stacked?: boolean;
stackType?: "normal" | "100%";
stackType?: "normal" | "100%";
toolbar?: {
toolbar?: {
show?: boolean;
show?: boolean;
tools?: {
tools?: {
download?: boolean | string;
download?: boolean | string;
selection?: boolean | string;
selection?: boolean | string;
zoom?: boolean | string;
zoom?: boolean | string;
zoomin?: boolean | string;
zoomin?: boolean | string;
zoomout?: boolean | string;
zoomout?: boolean | string;
pan?: boolean | string;
pan?: boolean | string;
reset?: boolean | string;
reset?: boolean | string;
};
};
autoSelected?: "zoom" | "selection" | "pan";
autoSelected?: "zoom" | "selection" | "pan";
};
};
zoom?: {
zoom?: {
enabled?: boolean;
enabled?: boolean;
type?: "x" | "y" | "xy";
type?: "x" | "y" | "xy";
zoomedArea?: {
zoomedArea?: {
fill?: {
fill?: {
color?: string;
color?: string;
opacity?: number
opacity?: number
};
};
stroke?: {
stroke?: {
color?: string;
color?: string;
opacity?: number;
opacity?: number;
width?: number
width?: number
}
}
}
}
};
};
selection?: {
selection?: {
enabled?: boolean;
enabled?: boolean;
type?: string;
type?: string;
fill?: {
fill?: {
color?: string;
color?: string;
opacity?: number;
opacity?: number;
};
};
stroke?: {
stroke?: {
width?: number;
width?: number;
color?: string;
color?: string;
opacity?: number;
opacity?: number;
dashArray?: number
dashArray?: number
};
};
xaxis?: {
xaxis?: {
min?: number;
min?: number;
max?: number;
max?: number;
};
};
yaxis?: {
yaxis?: {
min?: number;
min?: number;
max?: number
max?: number
};
};
};
};
animations?: {
animations?: {
enabled?: boolean;
enabled?: boolean;
easing?: "linear" | "easein" | "easeout" | "easeinout";
easing?: "linear" | "easein" | "easeout" | "easeinout";
speed?: number;
speed?: number;
animateGradually?: {
animateGradually?: {
enabled?: boolean;
enabled?: boolean;
delay?: number;
delay?: number;
}
}
dynamicAnimation?: {
dynamicAnimation?: {
enabled?: boolean;
enabled?: boolean;
speed?: number;
speed?: number;
}
}
};
};
};
};
type ApexStates = {
type ApexStates = {
normal?: {
normal?: {
filter?: {
filter?: {
type?: string,
type?: string,
value?: number
value?: number
}
}
},
},
hover?: {
hover?: {
filter?: {
filter?: {
type?: string,
type?: string,
value?: number
value?: number
}
}
},
},
active?: {
active?: {
allowMultipleDataPointsSelection?: boolean,
allowMultipleDataPointsSelection?: boolean,
filter?: {
filter?: {
type?: string,
type?: string,
value?: number
value?: number
}
}
}
}
};
};
/**
/**
* Chart Title options
* Chart Title options
* See https://apexcharts.com/docs/options/title/
* See https://apexcharts.com/docs/options/title/
*/
*/
type ApexTitleSubtitle = {
type ApexTitleSubtitle = {
text?: string;
text?: string;
align?: "left" | "center" | "right";
align?: "left" | "center" | "right";
margin?: number;
margin?: number;
offsetX?: number;
offsetX?: number;
offsetY?: number;
offsetY?: number;
floating?: number;
floating?: number;
style?: {
style?: {
fontSize?: string;
fontSize?: string;
color?: string;
color?: string;
};
};
};
};
/**
/**
* Chart Series options.
* Chart Series options.
* Use ApexNonAxisChartSeries for Pie and Donut charts.
* Use ApexNonAxisChartSeries for Pie and Donut charts.
* See https://apexcharts.com/docs/options/series/
* See https://apexcharts.com/docs/options/series/
*
*
* According to the documentation at
* According to the documentation at
* https://apexcharts.com/docs/series/
* https://apexcharts.com/docs/series/
* Section 1: data can be a list of single numbers
* Section 1: data can be a list of single numbers
* Sections 2.1 and 3.1: data can be a list of tuples of two numbers
* Sections 2.1 and 3.1: data can be a list of tuples of two numbers
* Sections 2.2 and 3.2: data can be a list of objects where x is a string
* Sections 2.2 and 3.2: data can be a list of objects where x is a string
* and y is a number
* and y is a number
*/
*/
export type ApexAxisChartSeries = {
export type ApexAxisChartSeries = {
name: string;
name: string;
data: number[] | { x: any; y: any }[] | [number, number][] | [number, number[]][];
data: number[] | { x: any; y: any }[] | [number, number][] | [number, number[]][];
}[];
}[];
export type ApexNonAxisChartSeries = number[];
export type ApexNonAxisChartSeries = number[];
/**
/**
* Options for the line drawn on line and area charts.
* Options for the line drawn on line and area charts.
* See https://apexcharts.com/docs/options/stroke/
* See https://apexcharts.com/docs/options/stroke/
*/
*/
type ApexStroke = {
type ApexStroke = {
show?: boolean;
show?: boolean;
curve?: "smooth" | "straight" | "stepline";
curve?: "smooth" | "straight" | "stepline";
lineCap?: "butt" | "square" | "round";
lineCap?: "butt" | "square" | "round";
colors?: string;
colors?: string;
width?: number;
width?: number;
dashArray?: number | number[]
dashArray?: number | number[]
};
};
type ApexAnnotations = {
type ApexAnnotations = {
position?: string;
position?: string;
yaxis?: YAxisAnnotations[];
yaxis?: YAxisAnnotations[];
xaxis?: XAxisAnnotations[];
xaxis?: XAxisAnnotations[];
points?: PointAnnotations[];
points?: PointAnnotations[];
};
};
type AnnotationLabel = {
type AnnotationLabel = {
borderColor?: string;
borderColor?: string;
borderWidth?: number;
borderWidth?: number;
text?: string;
text?: string;
textAnchor?: string;
textAnchor?: string;
offsetX?: number;
offsetX?: number;
offsetY?: number;
offsetY?: number;
style?: AnnotationStyle;
style?: AnnotationStyle;
position?: string;
position?: string;
orientation?: string;
orientation?: string;
};
};
type AnnotationStyle = {
type AnnotationStyle = {
background?: string;
background?: string;
color?: string;
color?: string;
fontSize?: string;
fontSize?: string;
cssClass?: string;
cssClass?: string;
padding?: {
padding?: {
left?: number;
left?: number;
right?: number;
right?: number;
top?: number;
top?: number;
bottom?: number;
bottom?: number;
};
};
};
};
type XAxisAnnotations = {
type XAxisAnnotations = {
x?: number;
x?: number;
x2?: number;
x2?: number;
strokeDashArray?: number;
strokeDashArray?: number;
fillColor?: string,
fillColor?: string,
borderColor?: string;
borderColor?: string;
opacity?: number;
opacity?: number;
offsetX?: number;
offsetX?: number;
offsetY?: number;
offsetY?: number;
label?: {
label?: {
borderColor?: string;
borderColor?: string;
borderWidth?: number;
borderWidth?: number;
text?: string;
text?: string;
textAnchor?: string;
textAnchor?: string;
position?: string;
position?: string;
orientation?: string;
orientation?: string;
offsetX?: number;
offsetX?: number;
offsetY?: number;
offsetY?: number;
style?: AnnotationStyle;
style?: AnnotationStyle;
};
};
};
};
type YAxisAnnotations = {
type YAxisAnnotations = {
y?: number;
y?: number;
y2?: number,
y2?: number,
strokeDashArray?: number;
strokeDashArray?: number;
fillColor?: string,
fillColor?: string,
borderColor?: string;
borderColor?: string;
opacity?: number;
opacity?: number;
offsetX?: number;
offsetX?: number;
offsetY?: number;
offsetY?: number;
yAxisIndex?: number;
yAxisIndex?: number;
label?: AnnotationLabel;
label?: AnnotationLabel;
};
};
type PointAnnotations = {
type PointAnnotations = {
x?: number;
x?: number;
y?: null;
y?: null;
yAxisIndex?: number;
yAxisIndex?: number;
seriesIndex?: number;
seriesIndex?: number;
marker?: {
marker?: {
size?: number;
size?: number;
fillColor?: string;
fillColor?: string;
strokeColor?: string;
strokeColor?: string;
strokeWidth?: number;
strokeWidth?: number;
shape?: string;
shape?: string;
offsetX?: number;
offsetX?: number;
offsetY?: number;
offsetY?: number;
radius?: number;
radius?: number;
cssClass?: string;
cssClass?: string;
};
};
label?: AnnotationLabel;
label?: AnnotationLabel;
};
};
/**
/**
* Options for localization.
* Options for localization.
* See https://apexcharts.com/docs/options/chart/locales
* See https://apexcharts.com/docs/options/chart/locales
*/
*/
type ApexLocale = {
type ApexLocale = {
name?: string;
name?: string;
options?: {
options?: {
months?: string[];
months?: string[];
shortMonths?: string[];
shortMonths?: string[];
days?: string[];
days?: string[];
shortDays?: string[];
shortDays?: string[];
toolbar?: {
toolbar?: {
download?: string;
download?: string;
selection?: string;
selection?: string;
selectionZoom?: string;
selectionZoom?: string;
zoomIn?: string;
zoomIn?: string;
zoomOut?: string;
zoomOut?: string;
pan?: string;
pan?: string;
reset?: string;
reset?: string;
}
}
}
}
}
}
/**
/**
* PlotOptions for specifying chart-type-specific configuration.
* PlotOptions for specifying chart-type-specific configuration.
* See https://apexcharts.com/docs/options/plotoptions/bar/
* See https://apexcharts.com/docs/options/plotoptions/bar/
*/
*/
type ApexPlotOptions = {
type ApexPlotOptions = {
bar?: {
bar?: {
horizontal?: boolean;
horizontal?: boolean;
columnWidth?: string;
columnWidth?: string;
barHeight?: string;
barHeight?: string;
distributed?: boolean;
distributed?: boolean;
colors?: {
colors?: {
ranges?: {
ranges?: {
from?: number;
from?: number;
to?: number;
to?: number;
color?: string;
color?: string;
}[];
}[];
backgroundBarColors?: string[];
backgroundBarColors?: string[];
backgroundBarOpacity?: number;
backgroundBarOpacity?: number;
};
};
dataLabels?: {
dataLabels?: {
maxItems?: number;
maxItems?: number;
hideOverflowingLabels?: boolean;
hideOverflowingLabels?: boolean;
position?: string;
position?: string;
}
}
};
};
candlestick?: {
candlestick?: {
colors?: {
colors?: {
upward?: string;
upward?: string;
downward?: string;
downward?: string;
};
};
wick?: {
wick?: {
useFillColor?: boolean
useFillColor?: boolean
}
}
};
};
heatmap?: {
heatmap?: {
radius?: number;
radius?: number;
enableShades?: boolean;
enableShades?: boolean;
shadeIntensity?: number;
shadeIntensity?: number;
distributed?: boolean;
distributed?: boolean;
colorScale?: {
colorScale?: {
ranges?: {
ranges?: {
from?: number;
from?: number;
to?: number;
to?: number;
color?: string;
color?: string;
name?: string;
name?: string;
}[];
}[];
inverse?: boolean;
inverse?: boolean;
min?: number;
min?: number;
max?: number;
max?: number;
}
}
};
};
pie?: {
pie?: {
size?: number;
size?: number;
customScale?: number;
customScale?: number;
offsetX?: number;
offsetX?: number;
offsetY?: number;
offsetY?: number;
expandOnClick?: boolean;
expandOnClick?: boolean;
dataLabels?: {
dataLabels?: {
offset?: number;
offset?: number;
minAngleToShowLabel?: number;
minAngleToShowLabel?: number;
};
};
donut?: {
donut?: {
size?: string;
size?: string;
background?: string;
background?: string;
labels: {
labels: {
show?: boolean;
show?: boolean;
name?: {
name?: {
show?: boolean;
show?: boolean;
fontSize?: string;
fontSize?: string;
fontFamily?: string;
fontFamily?: string;
color?: string;
color?: string;
offsetY?: number
offsetY?: number
};
};
value?: {
value?: {
show?: boolean;
show?: boolean;
fontSize?: string;
fontSize?: string;
fontFamily?: string;
fontFamily?: string;
color?: string;
color?: string;
offsetY?: number;
offsetY?: number;
formatter?(val: string): string;
formatter?(val: string): string;
};
};
total?: {
total?: {
show?: boolean;
show?: boolean;
label?: string;
label?: string;
color?: string;
color?: string;
formatter?(w: any): string;
formatter?(w: any): string;
}
}
}
}
};
};
};
};
radar?: {
radar?: {
size?: number;
size?: number;
offsetX?: number;
offsetX?: number;
offsetY?: number;
offsetY?: number;
polygons?: {
polygons?: {
strokeColor?: string | string[];
strokeColor?: string | string[];
connectorColors?: string | string[];
connectorColors?: string | string[];
fill?: {
fill?: {
colors?: string[]
colors?: string[]
}
}
}
}
};
};
radialBar?: {
radialBar?: {
size?: number;
size?: number;
inverseOrder?: boolean;
inverseOrder?: boolean;
startAngle?: number;
startAngle?: number;
endAngle?: number;
endAngle?: number;
offsetX?: number;
offsetX?: number;
offsetY?: number;
offsetY?: number;
hollow?: {
hollow?: {
margin?: number;
margin?: number;
size?: string;
size?: string;
background?: string;
background?: string;
image?: string;
image?: string;
width?: number;
width?: number;
height?: number;
height?: number;
offsetX?: number;
offsetX?: number;
offsetY?: number;
offsetY?: number;
clipped?: boolean;
clipped?: boolean;
position?: "front" | "back";
position?: "front" | "back";
};
};
track?: {
track?: {
show?: boolean;
show?: boolean;
startAngle?: number;
startAngle?: number;
endAngle?: number;
endAngle?: number;
background?: string;
background?: string;
strokeWidth?: string;
strokeWidth?: string;
opacity?: number;
opacity?: number;
margin?: number;
margin?: number;
dropShadow?: {
dropShadow?: {
enabled?: boolean;
enabled?: boolean;
top?: number;
top?: number;
left?: number;
left?: number;
blur?: number;
blur?: number;
opacity?: number
opacity?: number
}
}
};
};
dataLabels?: {
dataLabels?: {
show?: boolean;
show?: boolean;
name?: {
name?: {
show?: boolean;
show?: boolean;
fontSize?: string;
fontSize?: string;
color?: string;
color?: string;
offsetY?: number;
offsetY?: number;
};
};
value?: {
value?: {
show?: boolean;
show?: boolean;
fontSize?: string;
fontSize?: string;
color?: string;
color?: string;
offsetY?: number;
offsetY?: number;
formatter?(val: number): string;
formatter?(val: number): string;
};
};
total?: {
total?: {
show?: boolean;
show?: boolean;
label?: string;
label?: string;
color?: string;
color?: string;
formatter?(opts: any): string;
formatter?(opts: any): string;
};
};
}
}
}
}
};
};
type ApexFill = {
type ApexFill = {
colors?: any[];
colors?: any[];
opacity?: number;
opacity?: number;
type?: string;
type?: string;
gradient?: {
gradient?: {
shade?: string;
shade?: string;
type?: string;
type?: string;
shadeIntensity?: number;
shadeIntensity?: number;
gradientToColors?: string[];
gradientToColors?: string[];
inverseColors?: boolean;
inverseColors?: boolean;
opacityFrom?: number;
opacityFrom?: number;
opacityTo?: number;
opacityTo?: number;
stops?: number[]
stops?: number[]
};
};
image?: {
image?: {
src?: string[];
src?: string[];
width?: number;
width?: number;
height?: number
height?: number
};
};
pattern?: {
pattern?: {
style?: string;
style?: string;
width?: number;
width?: number;
height?: number;
height?: number;
strokeWidth?: number;
strokeWidth?: number;
};
};
};
};
/**
/**
* Chart Legend configuration options.
* Chart Legend configuration options.
* See https://apexcharts.com/docs/options/legend/
* See https://apexcharts.com/docs/options/legend/
*/
*/
type ApexLegend = {
type ApexLegend = {
show?: boolean;
show?: boolean;
showForSingleSeries?: boolean;
showForSingleSeries?: boolean;
showForNullSeries?: boolean;
showForNullSeries?: boolean;
showForZeroSeries?: boolean;
showForZeroSeries?: boolean;
floating?: boolean;
floating?: boolean;
position?: "top" | "right" | "bottom" | "left";
position?: "top" | "right" | "bottom" | "left";
horizontalAlign?: "left" | "center" | "right";
horizontalAlign?: "left" | "center" | "right";
fontSize?: string;
fontSize?: string;
fontFamily?: string;
fontFamily?: string;
width?: number;
width?: number;
height?: number;
height?: number;
offsetX?: number;
offsetX?: number;
offsetY?: number;
offsetY?: number;
formatter?(val: string, opts: any): string;
formatter?(val: string, opts: any): string;
textAnchor?: string;
textAnchor?: string;
labels?: {
labels?: {
color?: string
color?: string
useSeriesColors?: boolean;
useSeriesColors?: boolean;
};
};
markers?: {
markers?: {
width?: number;
width?: number;
height?: number;
height?: number;
strokeColor?: string
strokeColor?: string
strokeWidth?: number;
strokeWidth?: number;
offsetX?: number;
offsetX?: number;
offsetY?: number;
offsetY?: number;
radius?: number;
radius?: number;
shape?: "circle" | "square";
shape?: "circle" | "square";
customHTML?(): string;
customHTML?(): string;
onClick?(): void;
onClick?(): void;
};
};
itemMargin?: {
itemMargin?: {
horizontal?: number;
horizontal?: number;
vertical?: number;
vertical?: number;
};
};
containerMargin?: {
containerMargin?: {
left?: number;
left?: number;
top?: number;
top?: number;
};
};
onItemClick?: {
onItemClick?: {
toggleDataSeries?: boolean;
toggleDataSeries?: boolean;
};
};
onItemHover?: {
onItemHover?: {
highlightDataSeries?: boolean;
highlightDataSeries?: boolean;
}
}
};
};
type ApexDiscretePoint = {
type ApexDiscretePoint = {
seriesIndex?: number;
seriesIndex?: number;
dataPointIndex?: number;
dataPointIndex?: number;
fillColor?: string;
fillColor?: string;
strokeColor?: string;
strokeColor?: string;
size?: number;
size?: number;
}
}
type ApexMarkers = {
type ApexMarkers = {
size?: number;
size?: number;
colors?: string[];
colors?: string[];
strokeColor?: string;
strokeColor?: string;
strokeWidth?: number;
strokeWidth?: number;
strokeOpacity?: number;
strokeOpacity?: number;
fillOpacity?: number;
fillOpacity?: number;
discrete?: ApexDiscretePoint[];
discrete?: ApexDiscretePoint[];
shape?: 'circle' | 'square';
shape?: 'circle' | 'square';
radius?: number;
radius?: number;
offsetX?: number;
offsetX?: number;
offsetY?: number;
offsetY?: number;
hover?: {
hover?: {
size?: number;
size?: number;
sizeOffset?: number;
sizeOffset?: number;
};
};
}
}
type ApexNoData = {
type ApexNoData = {
text?: string,
text?: string,
align?: 'left' | 'right' | 'center',
align?: 'left' | 'right' | 'center',
verticalAlign?: 'top' | 'middle' | 'bottom',
verticalAlign?: 'top' | 'middle' | 'bottom',
offsetX?: number,
offsetX?: number,
offsetY?: number,
offsetY?: number,
style?: {
style?: {
color?: string,
color?: string,
fontSize?: string,
fontSize?: string,
fontFamily?: string
fontFamily?: string
}
}
}
}
/**
/**
* Chart Datalabels options
* Chart Datalabels options
* See https://apexcharts.com/docs/options/datalabels/
* See https://apexcharts.com/docs/options/datalabels/
*/
*/
type ApexDataLabels = {
type ApexDataLabels = {
enabled?: boolean;
enabled?: boolean;
enabledOnSeries?: number[];
enabledOnSeries?: number[];
formatter?(val: number, opts: any): string;
formatter?(val: number, opts: any): string;
textAnchor?: "start" | "middle" | "end";
textAnchor?: "start" | "middle" | "end";
offsetX?: number;
offsetX?: number;
offsetY?: number;
offsetY?: number;
style?: {
style?: {
fontSize?: string;
fontSize?: string;
fontFamily?: string;
fontFamily?: string;
colors?: string[];
colors?: string[];
};
};
dropShadow?: {
dropShadow?: {
enabled: boolean;
enabled: boolean;
top?: number;
top?: number;
left?: number;
left?: number;
blur?: number;
blur?: number;
opacity?: number;
opacity?: number;
}
}
};
};
type ApexResponsive = {
type ApexResponsive = {
breakpoint?: number;
breakpoint?: number;
options?: any;
options?: any;
};
};
/**
/**
* Chart Tooltip options
* Chart Tooltip options
* See https://apexcharts.com/docs/options/tooltip/
* See https://apexcharts.com/docs/options/tooltip/
*/
*/
type ApexTooltip = {
type ApexTooltip = {
enabled?: boolean;
enabled?: boolean;
shared?: boolean;
shared?: boolean;
followCursor?: boolean;
followCursor?: boolean;
intersect?: boolean;
intersect?: boolean;
inverseOrder?: boolean;
inverseOrder?: boolean;
custom?(options: any): void;
custom?(options: any): void;
fillSeriesColor?: boolean;
fillSeriesColor?: boolean;
theme?: string;
theme?: string;
style?: {
style?: {
fontSize?: string;
fontSize?: string;
fontFamily?: string;
fontFamily?: string;
};
};
onDatasetHover?: {
onDatasetHover?: {
highlightDAtaSeries?: boolean;
highlightDAtaSeries?: boolean;
};
};
x?: {
x?: {
show?: boolean;
show?: boolean;
format?: string;
format?: string;
formatter?(val: number): string;
formatter?(val: number): string;
}
}
y?: {
y?: {
formatter?(val: number): string;
formatter?(val: number): string;
title?: {
title?: {
formatter?(seriesName: string): string;
formatter?(seriesName: string): string;
}
}
};
};
z?: {
z?: {
formatter?(val: number): string;
formatter?(val: number): string;
title?: string
title?: string
};
};
marker?: {
marker?: {
show?: boolean
show?: boolean
};
};
items?: {
items?: {
display?: string
display?: string
};
};
fixed?: {
fixed?: {
enabled?: boolean;
enabled?: boolean;
position?: string; // topRight; topLeft; bottomRight; bottomLeft
position?: string; // topRight; topLeft; bottomRight; bottomLeft
offsetX?: number;
offsetX?: number;
offsetY?: number
offsetY?: number
}
}
};
};
/**
/**
* X Axis options
* X Axis options
* See https://apexcharts.com/docs/options/xaxis/
* See https://apexcharts.com/docs/options/xaxis/
*/
*/
type ApexXAxis = {
type ApexXAxis = {
type?: "categories" | "datetime" | "numeric";
type?: "categories" | "datetime" | "numeric";
categories?: string[] | number[];
categories?: string[] | number[];
labels?: {
labels?: {
show?: boolean;
show?: boolean;
rotate?: number;
rotate?: number;
rotateAlways?: boolean;
rotateAlways?: boolean;
hideOverlappingLabels?: boolean;
hideOverlappingLabels?: boolean;
showDuplicates?: boolean;
showDuplicates?: boolean;
trim?: boolean;
trim?: boolean;
minHeight?: number;
minHeight?: number;
maxHeight?: number;
maxHeight?: number;
style?: {
style?: {
colors?: string[];
colors?: string[];
fontSize?: string;
fontSize?: string;
fontFamily?: string;
fontFamily?: string;
cssClass?: string;
cssClass?: string;
};
};
offsetX?: number;
offsetX?: number;
offsetY?: number;
offsetY?: number;
format?: string;
format?: string;
formatter?(value: string, timestamp: number): string;
formatter?(value: string, timestamp: number): string;
datetimeFormatter?: {
datetimeFormatter?: {
year?: string;
year?: string;
month?: string;
month?: string;
day?: string;
day?: string;
hour?: string;
hour?: string;
minute?: string;
minute?: string;
};
};
};
};
axisBorder?: {
axisBorder?: {
show?: boolean;
show?: boolean;
color?: string;
color?: string;
offsetX?: number;
offsetX?: number;
offsetY?: number;
offsetY?: number;
strokeWidth?: number;
strokeWidth?: number;
};
};
axisTicks?: {
axisTicks?: {
show?: boolean;
show?: boolean;
borderType?: string;
borderType?: string;
color?: string;
color?: string;
height?: number;
height?: number;
offsetX?: number;
offsetX?: number;
offsetY?: number;
offsetY?: number;
};
};
tickAmount?: number;
tickAmount?: number;
min?: number;
min?: number;
max?: number;
max?: number;
range?: number;
range?: number;
floating?: boolean;
floating?: boolean;
position?: string;
position?: string;
title?: {
title?: {
text?: string;
text?: string;
offsetX?: number;
offsetX?: number;
offsetY?: number;
offsetY?: number;
style?: {
style?: {
color?: string;
color?: string;
fontSize?: string;
fontSize?: string;
cssClass?: string;
cssClass?: string;
};
};
};
};
crosshairs?: {
crosshairs?: {
show?: boolean;
show?: boolean;
width?: number | string;
width?: number | string;
position?: string;
position?: string;
opacity?: number;
opacity?: number;
stroke?: {
stroke?: {
color?: string;
color?: string;
width?: number;
width?: number;
dashArray?: number;
dashArray?: number;
};
};
fill?: {
fill?: {
type?: string;
type?: string;
color?: string;
color?: string;
gradient?: {
gradient?: {
colorFrom?: string;
colorFrom?: string;
colorTo?: string;
colorTo?: string;
stops?: number[];
stops?: number[];
opacityFrom?: number;
opacityFrom?: number;
opacityTo?: number;
opacityTo?: number;
};
};
};
};
dropShadow?: {
dropShadow?: {
enabled?: boolean;
enabled?: boolean;
top?: number;
top?: number;
left?: number;
left?: number;
blur?: number;
blur?: number;
opacity?: number;
opacity?: number;
};
};
};
};
tooltip?: {
tooltip?: {
enabled?: boolean;
enabled?: boolean;
offsetY?: number;
offsetY?: number;
};
};
};
};
/**
/**
* Y Axis options
* Y Axis options
* See https://apexcharts.com/docs/options/yaxis/
* See https://apexcharts.com/docs/options/yaxis/
*/
*/
type ApexYAxis = {
type ApexYAxis = {
show?: boolean;
show?: boolean;
showAlways?: boolean;
showAlways?: boolean;
seriesName?: string;
seriesName?: string;
opposite?: boolean;
opposite?: boolean;
logarithmic?: boolean;
logarithmic?: boolean;
tickAmount?: number;
tickAmount?: number;
forceNiceScale?: boolean,
forceNiceScale?: boolean,
min?: number;
min?: number;
max?: number;
max?: number;
floating?: boolean;
floating?: boolean;
decimalsInFloat?: number;
decimalsInFloat?: number;
labels?: {
labels?: {
show?: boolean;
show?: boolean;
minWidth?: number;
minWidth?: number;
maxWidth?: number;
maxWidth?: number;
offsetX?: number;
offsetX?: number;
offsetY?: number;
offsetY?: number;
rotate?: number;
rotate?: number;
align?: 'left' | 'center' | 'right';
align?: 'left' | 'center' | 'right';
padding?: number,
padding?: number,
style?: {
style?: {
color?: string;
color?: string;
fontSize?: string;
fontSize?: string;
fontFamily?: string;
fontFamily?: string;
cssClass?: string;
cssClass?: string;
};
};
formatter?(val: number): string;
formatter?(val: number): string;
};
};
axisBorder?: {
axisBorder?: {
show?: boolean;
show?: boolean;
color?: string;
color?: string;
offsetX?: number;
offsetX?: number;
offsetY?: number
offsetY?: number
};
};
axisTicks?: {
axisTicks?: {
show?: boolean;
show?: boolean;
color?: string;
color?: string;
width?: number;
width?: number;
offsetX?: number;
offsetX?: number;
offsetY?: number
offsetY?: number
};
};
title?: {
title?: {
text?: string;
text?: string;
rotate?: number;
rotate?: number;
offsetX?: number;
offsetX?: number;
offsetY?: number;
offsetY?: number;
style?: {
style?: {
color?: string;
color?: string;
fontSize?: string;
fontSize?: string;
fontFamily?: string;
fontFamily?: string;
cssClass?: string;
cssClass?: string;
};
};
};
};
crosshairs?: {
crosshairs?: {
show?: boolean;
show?: boolean;
position?: string;
position?: string;
stroke?: {
stroke?: {
color?: string;
color?: string;
width?: number;
width?: number;
dashArray?: number
dashArray?: number
};
};
};
};
tooltip?: {
tooltip?: {
enabled?: boolean;
enabled?: boolean;
offsetX?: number;
offsetX?: number;
};
};
};
};
/**
/**
* Plot X and Y grid options
* Plot X and Y grid options
* See https://apexcharts.com/docs/options/grid/
* See https://apexcharts.com/docs/options/grid/
*/
*/
type ApexGrid = {
type ApexGrid = {
show?: boolean;
show?: boolean;
borderColor?: string;
borderColor?: string;
strokeDashArray?: number;
strokeDashArray?: number;
position?: "front" | "back";
position?: "front" | "back";
xaxis?: {
xaxis?: {
lines?: {
lines?: {
show?: boolean;
show?: boolean;
offsetX?: number;
offsetX?: number;
offsetY?: number;
offsetY?: number;
}
}
};
};
yaxis?: {
yaxis?: {
lines?: {
lines?: {
show?: boolean;
show?: boolean;
offsetX?: number;
offsetX?: number;
offsetY?: number;
offsetY?: number;
}
}
};
};
row?: {
row?: {
colors?: string[];
colors?: string[];
opacity?: number
opacity?: number
};
};
column?: {
column?: {
colors?: string[];
colors?: string[];
opacity?: number;
opacity?: number;
};
};
padding?: {
padding?: {
top?: number;
top?: number;
right?: number;
right?: number;
bottom?: number;
bottom?: number;
left?: number;
left?: number;
};
};
};
};
type ApexTheme = {
type ApexTheme = {
mode?: "light" | "dark";
mode?: "light" | "dark";
palette?: string;
palette?: string;
monochrome?: {
monochrome?: {
enabled?: boolean,
enabled?: boolean,
color?: string;
color?: string;
shadeTo?: "light" | "dark";
shadeTo?: "light" | "dark";
shadeIntensity?: number
shadeIntensity?: number
}
}
}
}
declare module "apexcharts" {
export = ApexCharts;
}