devextreme-angular
Version:
Angular UI and visualization components based on DevExtreme widgets
1,588 lines (1,497 loc) • 92.6 kB
TypeScript
/*!
* devextreme-angular
* Version: 24.2.6
* Build date: Mon Mar 17 2025
*
* Copyright (c) 2012 - 2025 Developer Express Inc. ALL RIGHTS RESERVED
*
* This software may be modified and distributed under the terms
* of the MIT license. See the LICENSE file in the root of the project for details.
*
* https://github.com/DevExpress/devextreme-angular
*/
import { TransferState, ElementRef, NgZone, OnDestroy, EventEmitter, OnChanges, DoCheck, SimpleChanges, QueryList } from '@angular/core';
import DataSource from 'devextreme/data/data_source';
import * as CommonChartTypes from 'devextreme/common/charts';
import { AnimationEaseMode, ChartsDataType, DashStyle, Font, DiscreteAxisDivisionMode, ArgumentAxisHoverMode, LabelOverlap, TimeInterval, AxisScaleType, ChartsColor, SeriesHoverMode, HatchDirection, RelativePosition, PointInteractionMode, PointSymbol, SeriesSelectionMode, ValueErrorBarDisplayMode, ValueErrorBarType, SeriesLabel, SeriesPoint, LegendItem, LegendHoverMode, Palette, PaletteExtensionMode, Theme, TextOverflow, WordWrap } from 'devextreme/common/charts';
import { dxPolarChartAnnotationConfig, dxPolarChartCommonAnnotationConfig, PolarChartSeriesType, ArgumentAxisClickEvent, DisposingEvent, DoneEvent, DrawnEvent, ExportedEvent, ExportingEvent, FileSavingEvent, IncidentOccurredEvent, InitializedEvent, LegendClickEvent, OptionChangedEvent, PointClickEvent, PointHoverChangedEvent, PointSelectionChangedEvent, SeriesClickEvent, SeriesHoverChangedEvent, SeriesSelectionChangedEvent, TooltipHiddenEvent, TooltipShownEvent, ZoomEndEvent, ZoomStartEvent, PolarChartSeries, ValueAxisVisualRangeUpdateMode } from 'devextreme/viz/polar_chart';
import { Format } from 'devextreme/common/core/localization';
import { DataSourceOptions } from 'devextreme/data/data_source';
import { Store } from 'devextreme/data/store';
import { ExportFormat, HorizontalAlignment, Position, Orientation, VerticalEdge, SingleOrMultiple } from 'devextreme/common';
import DxPolarChart from 'devextreme/viz/polar_chart';
import { DxComponent, DxTemplateHost, NestedOptionHost, IterableDifferHelper, WatcherHelper } from 'devextreme-angular/core';
import { DxiAnnotationComponent } from 'devextreme-angular/ui/nested';
import { DxiSeriesComponent } from 'devextreme-angular/ui/nested';
import { DxiPolarChartAnnotationComponent } from 'devextreme-angular/ui/polar-chart/nested';
import { DxiPolarChartSeriesComponent } from 'devextreme-angular/ui/polar-chart/nested';
import type * as DxPolarChartTypes from "devextreme/viz/polar_chart_types";
import * as i0 from "@angular/core";
import * as i1 from "devextreme-angular/ui/nested";
import * as i2 from "devextreme-angular/ui/polar-chart/nested";
import * as i3 from "devextreme-angular/core";
/**
* The PolarChart is a UI component that visualizes data in a polar coordinate system.
*/
export declare class DxPolarChartComponent extends DxComponent implements OnDestroy, OnChanges, DoCheck {
private _watcherHelper;
private _idh;
instance: DxPolarChart;
/**
* Specifies adaptive layout properties.
*/
get adaptiveLayout(): {
height?: number;
keepLabels?: boolean;
width?: number;
};
set adaptiveLayout(value: {
height?: number;
keepLabels?: boolean;
width?: number;
});
/**
* Specifies animation properties.
*/
get animation(): boolean | {
duration?: number;
easing?: AnimationEaseMode;
enabled?: boolean;
maxPointCountSupported?: number;
};
set animation(value: boolean | {
duration?: number;
easing?: AnimationEaseMode;
enabled?: boolean;
maxPointCountSupported?: number;
});
/**
* Specifies the annotation collection.
*/
get annotations(): Array<any | dxPolarChartAnnotationConfig>;
set annotations(value: Array<any | dxPolarChartAnnotationConfig>);
/**
* Specifies argument axis properties for the PolarChart UI component.
*/
get argumentAxis(): {
allowDecimals?: boolean | undefined;
argumentType?: ChartsDataType | undefined;
axisDivisionFactor?: number;
categories?: Array<Date | number | string>;
color?: string;
constantLines?: {
color?: string;
dashStyle?: DashStyle;
displayBehindSeries?: boolean;
extendAxis?: boolean;
label?: {
font?: Font;
text?: string | undefined;
visible?: boolean;
};
value?: Date | number | string | undefined;
width?: number;
}[];
constantLineStyle?: {
color?: string;
dashStyle?: DashStyle;
label?: {
font?: Font;
visible?: boolean;
};
width?: number;
};
discreteAxisDivisionMode?: DiscreteAxisDivisionMode;
endOnTick?: boolean | undefined;
firstPointOnStartAngle?: boolean;
grid?: {
color?: string;
opacity?: number | undefined;
visible?: boolean;
width?: number;
};
hoverMode?: ArgumentAxisHoverMode;
inverted?: boolean;
label?: {
customizeHint?: ((argument: {
value: Date | number | string;
valueText: string;
}) => string);
customizeText?: ((argument: {
value: Date | number | string;
valueText: string;
}) => string);
font?: Font;
format?: Format | undefined;
indentFromAxis?: number;
overlappingBehavior?: LabelOverlap;
visible?: boolean;
};
linearThreshold?: number | undefined;
logarithmBase?: number;
minorGrid?: {
color?: string;
opacity?: number | undefined;
visible?: boolean;
width?: number;
};
minorTick?: {
color?: string;
length?: number;
opacity?: number;
shift?: number;
visible?: boolean;
width?: number;
};
minorTickCount?: number | undefined;
minorTickInterval?: number | TimeInterval | {
days?: number;
hours?: number;
milliseconds?: number;
minutes?: number;
months?: number;
quarters?: number;
seconds?: number;
weeks?: number;
years?: number;
};
opacity?: number | undefined;
originValue?: number | undefined;
period?: number | undefined;
startAngle?: number;
strips?: {
color?: string | undefined;
endValue?: Date | number | string | undefined;
label?: {
font?: Font;
text?: string | undefined;
};
startValue?: Date | number | string | undefined;
}[];
stripStyle?: {
label?: {
font?: Font;
};
};
tick?: {
color?: string;
length?: number;
opacity?: number | undefined;
shift?: number;
visible?: boolean;
width?: number;
};
tickInterval?: number | TimeInterval | {
days?: number;
hours?: number;
milliseconds?: number;
minutes?: number;
months?: number;
quarters?: number;
seconds?: number;
weeks?: number;
years?: number;
};
type?: AxisScaleType | undefined;
visible?: boolean;
width?: number;
};
set argumentAxis(value: {
allowDecimals?: boolean | undefined;
argumentType?: ChartsDataType | undefined;
axisDivisionFactor?: number;
categories?: Array<Date | number | string>;
color?: string;
constantLines?: {
color?: string;
dashStyle?: DashStyle;
displayBehindSeries?: boolean;
extendAxis?: boolean;
label?: {
font?: Font;
text?: string | undefined;
visible?: boolean;
};
value?: Date | number | string | undefined;
width?: number;
}[];
constantLineStyle?: {
color?: string;
dashStyle?: DashStyle;
label?: {
font?: Font;
visible?: boolean;
};
width?: number;
};
discreteAxisDivisionMode?: DiscreteAxisDivisionMode;
endOnTick?: boolean | undefined;
firstPointOnStartAngle?: boolean;
grid?: {
color?: string;
opacity?: number | undefined;
visible?: boolean;
width?: number;
};
hoverMode?: ArgumentAxisHoverMode;
inverted?: boolean;
label?: {
customizeHint?: ((argument: {
value: Date | number | string;
valueText: string;
}) => string);
customizeText?: ((argument: {
value: Date | number | string;
valueText: string;
}) => string);
font?: Font;
format?: Format | undefined;
indentFromAxis?: number;
overlappingBehavior?: LabelOverlap;
visible?: boolean;
};
linearThreshold?: number | undefined;
logarithmBase?: number;
minorGrid?: {
color?: string;
opacity?: number | undefined;
visible?: boolean;
width?: number;
};
minorTick?: {
color?: string;
length?: number;
opacity?: number;
shift?: number;
visible?: boolean;
width?: number;
};
minorTickCount?: number | undefined;
minorTickInterval?: number | TimeInterval | {
days?: number;
hours?: number;
milliseconds?: number;
minutes?: number;
months?: number;
quarters?: number;
seconds?: number;
weeks?: number;
years?: number;
};
opacity?: number | undefined;
originValue?: number | undefined;
period?: number | undefined;
startAngle?: number;
strips?: {
color?: string | undefined;
endValue?: Date | number | string | undefined;
label?: {
font?: Font;
text?: string | undefined;
};
startValue?: Date | number | string | undefined;
}[];
stripStyle?: {
label?: {
font?: Font;
};
};
tick?: {
color?: string;
length?: number;
opacity?: number | undefined;
shift?: number;
visible?: boolean;
width?: number;
};
tickInterval?: number | TimeInterval | {
days?: number;
hours?: number;
milliseconds?: number;
minutes?: number;
months?: number;
quarters?: number;
seconds?: number;
weeks?: number;
years?: number;
};
type?: AxisScaleType | undefined;
visible?: boolean;
width?: number;
});
/**
* Controls the padding and consequently the angular width of a group of bars with the same argument using relative units. Ignored if the barGroupWidth property is set.
*/
get barGroupPadding(): number;
set barGroupPadding(value: number);
/**
* Specifies a fixed angular width for groups of bars with the same argument, measured in degrees. Takes precedence over the barGroupPadding property.
*/
get barGroupWidth(): number | undefined;
set barGroupWidth(value: number | undefined);
/**
* Specifies settings common for all annotations in the PolarChart.
*/
get commonAnnotationSettings(): dxPolarChartCommonAnnotationConfig;
set commonAnnotationSettings(value: dxPolarChartCommonAnnotationConfig);
/**
* An object defining the configuration properties that are common for all axes of the PolarChart UI component.
*/
get commonAxisSettings(): {
allowDecimals?: boolean | undefined;
color?: string;
constantLineStyle?: {
color?: string;
dashStyle?: DashStyle;
label?: {
font?: Font;
visible?: boolean;
};
width?: number;
};
discreteAxisDivisionMode?: DiscreteAxisDivisionMode;
endOnTick?: boolean | undefined;
grid?: {
color?: string;
opacity?: number | undefined;
visible?: boolean;
width?: number;
};
inverted?: boolean;
label?: {
font?: Font;
indentFromAxis?: number;
overlappingBehavior?: LabelOverlap;
visible?: boolean;
};
minorGrid?: {
color?: string;
opacity?: number | undefined;
visible?: boolean;
width?: number;
};
minorTick?: {
color?: string;
length?: number;
opacity?: number;
visible?: boolean;
width?: number;
};
opacity?: number | undefined;
stripStyle?: {
label?: {
font?: Font;
};
};
tick?: {
color?: string;
length?: number;
opacity?: number | undefined;
visible?: boolean;
width?: number;
};
visible?: boolean;
width?: number;
};
set commonAxisSettings(value: {
allowDecimals?: boolean | undefined;
color?: string;
constantLineStyle?: {
color?: string;
dashStyle?: DashStyle;
label?: {
font?: Font;
visible?: boolean;
};
width?: number;
};
discreteAxisDivisionMode?: DiscreteAxisDivisionMode;
endOnTick?: boolean | undefined;
grid?: {
color?: string;
opacity?: number | undefined;
visible?: boolean;
width?: number;
};
inverted?: boolean;
label?: {
font?: Font;
indentFromAxis?: number;
overlappingBehavior?: LabelOverlap;
visible?: boolean;
};
minorGrid?: {
color?: string;
opacity?: number | undefined;
visible?: boolean;
width?: number;
};
minorTick?: {
color?: string;
length?: number;
opacity?: number;
visible?: boolean;
width?: number;
};
opacity?: number | undefined;
stripStyle?: {
label?: {
font?: Font;
};
};
tick?: {
color?: string;
length?: number;
opacity?: number | undefined;
visible?: boolean;
width?: number;
};
visible?: boolean;
width?: number;
});
/**
* An object defining the configuration properties that are common for all series of the PolarChart UI component.
*/
get commonSeriesSettings(): {
area?: any;
argumentField?: string;
bar?: any;
barPadding?: number | undefined;
barWidth?: number | undefined;
border?: {
color?: string | undefined;
dashStyle?: DashStyle | undefined;
visible?: boolean;
width?: number;
};
closed?: boolean;
color?: ChartsColor | string | undefined;
dashStyle?: DashStyle;
hoverMode?: SeriesHoverMode;
hoverStyle?: {
border?: {
color?: string | undefined;
dashStyle?: DashStyle | undefined;
visible?: boolean;
width?: number;
};
color?: ChartsColor | string | undefined;
dashStyle?: DashStyle;
hatching?: {
direction?: HatchDirection;
opacity?: number;
step?: number;
width?: number;
};
highlight?: boolean;
width?: number;
};
ignoreEmptyPoints?: boolean;
label?: {
argumentFormat?: Format | undefined;
backgroundColor?: string | undefined;
border?: {
color?: string | undefined;
dashStyle?: DashStyle | undefined;
visible?: boolean;
width?: number;
};
connector?: {
color?: string | undefined;
visible?: boolean;
width?: number;
};
customizeText?: ((pointInfo: any) => string);
displayFormat?: string | undefined;
font?: Font;
format?: Format | undefined;
position?: RelativePosition;
rotationAngle?: number;
showForZeroValues?: boolean;
visible?: boolean;
};
line?: any;
maxLabelCount?: number | undefined;
minBarSize?: number | undefined;
opacity?: number;
point?: {
border?: {
color?: string | undefined;
visible?: boolean;
width?: number;
};
color?: ChartsColor | string | undefined;
hoverMode?: PointInteractionMode;
hoverStyle?: {
border?: {
color?: string | undefined;
visible?: boolean;
width?: number;
};
color?: ChartsColor | string | undefined;
size?: number;
};
image?: string | undefined | {
height?: number;
url?: string | undefined;
width?: number;
};
selectionMode?: PointInteractionMode;
selectionStyle?: {
border?: {
color?: string | undefined;
visible?: boolean;
width?: number;
};
color?: ChartsColor | string | undefined;
size?: number;
};
size?: number;
symbol?: PointSymbol;
visible?: boolean;
};
scatter?: any;
selectionMode?: SeriesSelectionMode;
selectionStyle?: {
border?: {
color?: string | undefined;
dashStyle?: DashStyle | undefined;
visible?: boolean;
width?: number;
};
color?: ChartsColor | string | undefined;
dashStyle?: DashStyle;
hatching?: {
direction?: HatchDirection;
opacity?: number;
step?: number;
width?: number;
};
highlight?: boolean;
width?: number;
};
showInLegend?: boolean;
stack?: string;
stackedbar?: any;
tagField?: string;
type?: PolarChartSeriesType;
valueErrorBar?: {
color?: string;
displayMode?: ValueErrorBarDisplayMode;
edgeLength?: number;
highValueField?: string | undefined;
lineWidth?: number;
lowValueField?: string | undefined;
opacity?: number | undefined;
type?: undefined | ValueErrorBarType;
value?: number;
};
valueField?: string;
visible?: boolean;
width?: number;
};
set commonSeriesSettings(value: {
area?: any;
argumentField?: string;
bar?: any;
barPadding?: number | undefined;
barWidth?: number | undefined;
border?: {
color?: string | undefined;
dashStyle?: DashStyle | undefined;
visible?: boolean;
width?: number;
};
closed?: boolean;
color?: ChartsColor | string | undefined;
dashStyle?: DashStyle;
hoverMode?: SeriesHoverMode;
hoverStyle?: {
border?: {
color?: string | undefined;
dashStyle?: DashStyle | undefined;
visible?: boolean;
width?: number;
};
color?: ChartsColor | string | undefined;
dashStyle?: DashStyle;
hatching?: {
direction?: HatchDirection;
opacity?: number;
step?: number;
width?: number;
};
highlight?: boolean;
width?: number;
};
ignoreEmptyPoints?: boolean;
label?: {
argumentFormat?: Format | undefined;
backgroundColor?: string | undefined;
border?: {
color?: string | undefined;
dashStyle?: DashStyle | undefined;
visible?: boolean;
width?: number;
};
connector?: {
color?: string | undefined;
visible?: boolean;
width?: number;
};
customizeText?: ((pointInfo: any) => string);
displayFormat?: string | undefined;
font?: Font;
format?: Format | undefined;
position?: RelativePosition;
rotationAngle?: number;
showForZeroValues?: boolean;
visible?: boolean;
};
line?: any;
maxLabelCount?: number | undefined;
minBarSize?: number | undefined;
opacity?: number;
point?: {
border?: {
color?: string | undefined;
visible?: boolean;
width?: number;
};
color?: ChartsColor | string | undefined;
hoverMode?: PointInteractionMode;
hoverStyle?: {
border?: {
color?: string | undefined;
visible?: boolean;
width?: number;
};
color?: ChartsColor | string | undefined;
size?: number;
};
image?: string | undefined | {
height?: number;
url?: string | undefined;
width?: number;
};
selectionMode?: PointInteractionMode;
selectionStyle?: {
border?: {
color?: string | undefined;
visible?: boolean;
width?: number;
};
color?: ChartsColor | string | undefined;
size?: number;
};
size?: number;
symbol?: PointSymbol;
visible?: boolean;
};
scatter?: any;
selectionMode?: SeriesSelectionMode;
selectionStyle?: {
border?: {
color?: string | undefined;
dashStyle?: DashStyle | undefined;
visible?: boolean;
width?: number;
};
color?: ChartsColor | string | undefined;
dashStyle?: DashStyle;
hatching?: {
direction?: HatchDirection;
opacity?: number;
step?: number;
width?: number;
};
highlight?: boolean;
width?: number;
};
showInLegend?: boolean;
stack?: string;
stackedbar?: any;
tagField?: string;
type?: PolarChartSeriesType;
valueErrorBar?: {
color?: string;
displayMode?: ValueErrorBarDisplayMode;
edgeLength?: number;
highValueField?: string | undefined;
lineWidth?: number;
lowValueField?: string | undefined;
opacity?: number | undefined;
type?: undefined | ValueErrorBarType;
value?: number;
};
valueField?: string;
visible?: boolean;
width?: number;
});
/**
* Specifies the color of the parent page element.
*/
get containerBackgroundColor(): string;
set containerBackgroundColor(value: string);
/**
* Customizes an individual annotation.
*/
get customizeAnnotation(): ((annotation: dxPolarChartAnnotationConfig | any) => dxPolarChartAnnotationConfig) | undefined;
set customizeAnnotation(value: ((annotation: dxPolarChartAnnotationConfig | any) => dxPolarChartAnnotationConfig) | undefined);
/**
* Customizes the appearance of an individual point label.
*/
get customizeLabel(): ((pointInfo: any) => SeriesLabel);
set customizeLabel(value: ((pointInfo: any) => SeriesLabel));
/**
* Customizes the appearance of an individual series point.
*/
get customizePoint(): ((pointInfo: any) => SeriesPoint);
set customizePoint(value: ((pointInfo: any) => SeriesPoint));
/**
* An object providing properties for managing data from a data source.
*/
get dataPrepareSettings(): {
checkTypeForAllData?: boolean;
convertToAxisDataType?: boolean;
sortingMethod?: boolean | ((a: {
arg: Date | number | string;
val: Date | number | string;
}, b: {
arg: Date | number | string;
val: Date | number | string;
}) => number);
};
set dataPrepareSettings(value: {
checkTypeForAllData?: boolean;
convertToAxisDataType?: boolean;
sortingMethod?: boolean | ((a: {
arg: Date | number | string;
val: Date | number | string;
}, b: {
arg: Date | number | string;
val: Date | number | string;
}) => number);
});
/**
* Binds the UI component to data.
*/
get dataSource(): Array<any> | DataSource | DataSourceOptions | null | Store | string;
set dataSource(value: Array<any> | DataSource | DataSourceOptions | null | Store | string);
/**
* Specifies whether the UI component responds to user interaction.
*/
get disabled(): boolean;
set disabled(value: boolean);
/**
* Specifies the global attributes to be attached to the UI component's container element.
*/
get elementAttr(): Record<string, any>;
set elementAttr(value: Record<string, any>);
/**
* Configures the exporting and printing features.
*/
get export(): {
backgroundColor?: string;
enabled?: boolean;
fileName?: string;
formats?: Array<ExportFormat>;
margin?: number;
printingEnabled?: boolean;
svgToCanvas?: ((svg: any, canvas: any) => any) | undefined;
};
set export(value: {
backgroundColor?: string;
enabled?: boolean;
fileName?: string;
formats?: Array<ExportFormat>;
margin?: number;
printingEnabled?: boolean;
svgToCanvas?: ((svg: any, canvas: any) => any) | undefined;
});
/**
* Specifies the properties of a chart's legend.
*/
get legend(): {
backgroundColor?: string | undefined;
border?: {
color?: string;
cornerRadius?: number;
dashStyle?: DashStyle;
opacity?: number | undefined;
visible?: boolean;
width?: number;
};
columnCount?: number;
columnItemSpacing?: number;
customizeHint?: ((seriesInfo: {
seriesColor: string;
seriesIndex: number;
seriesName: any;
}) => string);
customizeItems?: ((items: Array<LegendItem>) => Array<LegendItem>);
customizeText?: ((seriesInfo: {
seriesColor: string;
seriesIndex: number;
seriesName: any;
}) => string);
font?: Font;
horizontalAlignment?: HorizontalAlignment;
hoverMode?: LegendHoverMode;
itemsAlignment?: HorizontalAlignment | undefined;
itemTextPosition?: Position | undefined;
margin?: number | {
bottom?: number;
left?: number;
right?: number;
top?: number;
};
markerSize?: number;
markerTemplate?: any;
orientation?: Orientation | undefined;
paddingLeftRight?: number;
paddingTopBottom?: number;
rowCount?: number;
rowItemSpacing?: number;
title?: string | {
font?: Font;
horizontalAlignment?: HorizontalAlignment | undefined;
margin?: {
bottom?: number;
left?: number;
right?: number;
top?: number;
};
placeholderSize?: number | undefined;
subtitle?: string | {
font?: Font;
offset?: number;
text?: string;
};
text?: string;
verticalAlignment?: VerticalEdge;
};
verticalAlignment?: VerticalEdge;
visible?: boolean;
};
set legend(value: {
backgroundColor?: string | undefined;
border?: {
color?: string;
cornerRadius?: number;
dashStyle?: DashStyle;
opacity?: number | undefined;
visible?: boolean;
width?: number;
};
columnCount?: number;
columnItemSpacing?: number;
customizeHint?: ((seriesInfo: {
seriesColor: string;
seriesIndex: number;
seriesName: any;
}) => string);
customizeItems?: ((items: Array<LegendItem>) => Array<LegendItem>);
customizeText?: ((seriesInfo: {
seriesColor: string;
seriesIndex: number;
seriesName: any;
}) => string);
font?: Font;
horizontalAlignment?: HorizontalAlignment;
hoverMode?: LegendHoverMode;
itemsAlignment?: HorizontalAlignment | undefined;
itemTextPosition?: Position | undefined;
margin?: number | {
bottom?: number;
left?: number;
right?: number;
top?: number;
};
markerSize?: number;
markerTemplate?: any;
orientation?: Orientation | undefined;
paddingLeftRight?: number;
paddingTopBottom?: number;
rowCount?: number;
rowItemSpacing?: number;
title?: string | {
font?: Font;
horizontalAlignment?: HorizontalAlignment | undefined;
margin?: {
bottom?: number;
left?: number;
right?: number;
top?: number;
};
placeholderSize?: number | undefined;
subtitle?: string | {
font?: Font;
offset?: number;
text?: string;
};
text?: string;
verticalAlignment?: VerticalEdge;
};
verticalAlignment?: VerticalEdge;
visible?: boolean;
});
/**
* Configures the loading indicator.
*/
get loadingIndicator(): {
backgroundColor?: string;
enabled?: boolean;
font?: Font;
show?: boolean;
text?: string;
};
set loadingIndicator(value: {
backgroundColor?: string;
enabled?: boolean;
font?: Font;
show?: boolean;
text?: string;
});
/**
* Generates space around the UI component.
*/
get margin(): {
bottom?: number;
left?: number;
right?: number;
top?: number;
};
set margin(value: {
bottom?: number;
left?: number;
right?: number;
top?: number;
});
/**
* Forces the UI component to treat negative values as zeroes. Applies to stacked-like series only.
*/
get negativesAsZeroes(): boolean;
set negativesAsZeroes(value: boolean);
/**
* Sets the palette to be used for colorizing series and their elements.
*/
get palette(): Array<string> | Palette;
set palette(value: Array<string> | Palette);
/**
* Specifies what to do with colors in the palette when their number is less than the number of series (in the Chart UI component) or points in a series (in the PieChart UI component).
*/
get paletteExtensionMode(): PaletteExtensionMode;
set paletteExtensionMode(value: PaletteExtensionMode);
/**
* Notifies the UI component that it is embedded into an HTML page that uses a tag modifying the path.
*/
get pathModified(): boolean;
set pathModified(value: boolean);
/**
* Specifies whether a single point or multiple points can be selected in the chart.
*/
get pointSelectionMode(): SingleOrMultiple;
set pointSelectionMode(value: SingleOrMultiple);
/**
* Specifies whether to redraw the UI component when the size of the container changes or a mobile device rotates.
*/
get redrawOnResize(): boolean;
set redrawOnResize(value: boolean);
/**
* Specifies how the chart must behave when series point labels overlap.
*/
get resolveLabelOverlapping(): LabelOverlap;
set resolveLabelOverlapping(value: LabelOverlap);
/**
* Switches the UI component to a right-to-left representation.
*/
get rtlEnabled(): boolean;
set rtlEnabled(value: boolean);
/**
* Specifies properties for PolarChart UI component series.
*/
get series(): Array<PolarChartSeries> | PolarChartSeries | undefined;
set series(value: Array<PolarChartSeries> | PolarChartSeries | undefined);
/**
* Specifies whether a single series or multiple series can be selected in the chart.
*/
get seriesSelectionMode(): SingleOrMultiple;
set seriesSelectionMode(value: SingleOrMultiple);
/**
* Defines properties for the series template.
*/
get seriesTemplate(): any;
set seriesTemplate(value: any);
/**
* Specifies the UI component's size in pixels.
*/
get size(): {
height?: number | undefined;
width?: number | undefined;
};
set size(value: {
height?: number | undefined;
width?: number | undefined;
});
/**
* Sets the name of the theme the UI component uses.
*/
get theme(): Theme;
set theme(value: Theme);
/**
* Configures the UI component's title.
*/
get title(): string | {
font?: Font;
horizontalAlignment?: HorizontalAlignment;
margin?: number | {
bottom?: number;
left?: number;
right?: number;
top?: number;
};
placeholderSize?: number | undefined;
subtitle?: string | {
font?: Font;
offset?: number;
text?: string;
textOverflow?: TextOverflow;
wordWrap?: WordWrap;
};
text?: string;
textOverflow?: TextOverflow;
verticalAlignment?: VerticalEdge;
wordWrap?: WordWrap;
};
set title(value: string | {
font?: Font;
horizontalAlignment?: HorizontalAlignment;
margin?: number | {
bottom?: number;
left?: number;
right?: number;
top?: number;
};
placeholderSize?: number | undefined;
subtitle?: string | {
font?: Font;
offset?: number;
text?: string;
textOverflow?: TextOverflow;
wordWrap?: WordWrap;
};
text?: string;
textOverflow?: TextOverflow;
verticalAlignment?: VerticalEdge;
wordWrap?: WordWrap;
});
/**
* Configures tooltips.
*/
get tooltip(): {
argumentFormat?: Format | undefined;
arrowLength?: number;
border?: {
color?: string;
dashStyle?: DashStyle;
opacity?: number | undefined;
visible?: boolean;
width?: number;
};
color?: string;
container?: any | string | undefined;
contentTemplate?: any;
cornerRadius?: number;
customizeTooltip?: ((pointInfo: any) => Record<string, any>) | undefined;
enabled?: boolean;
font?: Font;
format?: Format | undefined;
interactive?: boolean;
opacity?: number | undefined;
paddingLeftRight?: number;
paddingTopBottom?: number;
shadow?: {
blur?: number;
color?: string;
offsetX?: number;
offsetY?: number;
opacity?: number;
};
shared?: boolean;
zIndex?: number | undefined;
};
set tooltip(value: {
argumentFormat?: Format | undefined;
arrowLength?: number;
border?: {
color?: string;
dashStyle?: DashStyle;
opacity?: number | undefined;
visible?: boolean;
width?: number;
};
color?: string;
container?: any | string | undefined;
contentTemplate?: any;
cornerRadius?: number;
customizeTooltip?: ((pointInfo: any) => Record<string, any>) | undefined;
enabled?: boolean;
font?: Font;
format?: Format | undefined;
interactive?: boolean;
opacity?: number | undefined;
paddingLeftRight?: number;
paddingTopBottom?: number;
shadow?: {
blur?: number;
color?: string;
offsetX?: number;
offsetY?: number;
opacity?: number;
};
shared?: boolean;
zIndex?: number | undefined;
});
/**
* Indicates whether to display a 'spider web'.
*/
get useSpiderWeb(): boolean;
set useSpiderWeb(value: boolean);
/**
* Specifies value axis properties for the PolarChart UI component.
*/
get valueAxis(): {
allowDecimals?: boolean | undefined;
axisDivisionFactor?: number;
categories?: Array<Date | number | string>;
color?: string;
constantLines?: {
color?: string;
dashStyle?: DashStyle;
displayBehindSeries?: boolean;
extendAxis?: boolean;
label?: {
font?: Font;
text?: string | undefined;
visible?: boolean;
};
value?: Date | number | string | undefined;
width?: number;
}[];
constantLineStyle?: {
color?: string;
dashStyle?: DashStyle;
label?: {
font?: Font;
visible?: boolean;
};
width?: number;
};
discreteAxisDivisionMode?: DiscreteAxisDivisionMode;
endOnTick?: boolean;
grid?: {
color?: string;
opacity?: number | undefined;
visible?: boolean;
width?: number;
};
inverted?: boolean;
label?: {
customizeHint?: ((axisValue: {
value: Date | number | string;
valueText: string;
}) => string);
customizeText?: ((axisValue: {
value: Date | number | string;
valueText: string;
}) => string);
font?: Font;
format?: Format | undefined;
indentFromAxis?: number;
overlappingBehavior?: LabelOverlap;
visible?: boolean;
};
linearThreshold?: number | undefined;
logarithmBase?: number;
maxValueMargin?: number | undefined;
minorGrid?: {
color?: string;
opacity?: number | undefined;
visible?: boolean;
width?: number;
};
minorTick?: {
color?: string;
length?: number;
opacity?: number;
visible?: boolean;
width?: number;
};
minorTickCount?: number | undefined;
minorTickInterval?: number | TimeInterval | {
days?: number;
hours?: number;
milliseconds?: number;
minutes?: number;
months?: number;
quarters?: number;
seconds?: number;
weeks?: number;
years?: number;
};
minValueMargin?: number | undefined;
minVisualRangeLength?: number | TimeInterval | undefined | {
days?: number;
hours?: number;
milliseconds?: number;
minutes?: number;
months?: number;
quarters?: number;
seconds?: number;
weeks?: number;
years?: number;
};
opacity?: number | undefined;
showZero?: boolean | undefined;
strips?: {
color?: string | undefined;
endValue?: Date | number | string | undefined;
label?: {
font?: Font;
text?: string | undefined;
};
startValue?: Date | number | string | undefined;
}[];
stripStyle?: {
label?: {
font?: Font;
};
};
tick?: {
color?: string;
length?: number;
opacity?: number | undefined;
visible?: boolean;
width?: number;
};
tickInterval?: number | TimeInterval | {
days?: number;
hours?: number;
milliseconds?: number;
minutes?: number;
months?: number;
quarters?: number;
seconds?: number;
weeks?: number;
years?: number;
};
type?: AxisScaleType | undefined;
valueMarginsEnabled?: boolean;
valueType?: ChartsDataType | undefined;
visible?: boolean;
visualRange?: Array<Date | number | string> | CommonChartTypes.VisualRange;
visualRangeUpdateMode?: ValueAxisVisualRangeUpdateMode;
wholeRange?: Array<Date | number | string> | undefined | CommonChartTypes.VisualRange;
width?: number;
};
set valueAxis(value: {
allowDecimals?: boolean | undefined;
axisDivisionFactor?: number;
categories?: Array<Date | number | string>;
color?: string;
constantLines?: {
color?: string;
dashStyle?: DashStyle;
displayBehindSeries?: boolean;
extendAxis?: boolean;
label?: {
font?: Font;
text?: string | undefined;
visible?: boolean;
};
value?: Date | number | string | undefined;
width?: number;
}[];
constantLineStyle?: {
color?: string;
dashStyle?: DashStyle;
label?: {
font?: Font;
visible?: boolean;
};
width?: number;
};
discreteAxisDivisionMode?: DiscreteAxisDivisionMode;
endOnTick?: boolean;
grid?: {
color?: string;
opacity?: number | undefined;
visible?: boolean;
width?: number;
};
inverted?: boolean;
label?: {
customizeHint?: ((axisValue: {
value: Date | number | string;
valueText: string;
}) => string);
customizeText?: ((axisValue: {
value: Date | number | string;
valueText: string;
}) => string);
font?: Font;
format?: Format | undefined;
indentFromAxis?: number;
overlappingBehavior?: LabelOverlap;
visible?: boolean;
};
linearThreshold?: number | undefined;
logarithmBase?: number;
maxValueMargin?: number | undefined;
minorGrid?: {
color?: string;
opacity?: number | undefined;
visible?: boolean;
width?: number;
};
minorTick?: {
color?: string;
length?: number;
opacity?: number;
visible?: boolean;
width?: number;
};
minorTickCount?: number | undefined;
minorTickInterval?: number | TimeInterval | {
days?: number;
hours?: number;
milliseconds?: number;
minutes?: number;
months?: number;
quarters?: number;
seconds?: number;
weeks?: number;
years?: number;
};
minValueMargin?: number | undefined;
minVisualRangeLength?: number | TimeInterval | undefined | {
days?: number;
hours?: number;
milliseconds?: number;
minutes?: number;
months?: number;
quarters?: number;
seconds?: number;
weeks?: number;
years?: number;
};
opacity?: number | undefined;
showZero?: boolean | undefined;
strips?: {
color?: string | undefined;
endValue?: Date | number | string | undefined;
label?: {
font?: Font;
text?: string | undefined;
};
startValue?: Date | number | string | undefined;
}[];
stripStyle?: {
label?: {
font?: Font;
};
};
tick?: {
color?: string;
length?: number;
opacity?: number | undefined;
visible?: boolean;
width?: number;
};
tickInterval?: number | TimeInterval | {
days?: number;
hours?: number;
milliseconds?: number;
minutes?: number;
months?: number;
quarters?: number;
seconds?: number;
weeks?: number;
years?: number;
};
type?: AxisScaleType | undefined;
valueMarginsEnabled?: boolean;
valueType?: ChartsDataType | undefined;
visible?: boolean;
visualRange?: Array<Date | number | string> | CommonChartTypes.VisualRange;
visualRangeUpdateMode?: ValueAxisVisualRangeUpdateMode;
wholeRange?: Array<Date | number | string> | undefined | CommonChartTypes.VisualRange;
width?: number;
});
/**
* A function that is executed when a label on the argument axis is clicked or tapped.
*/
onArgumentAxisClick: EventEmitter<ArgumentAxisClickEvent>;
/**
* A function that is executed before the UI component is disposed of.
*/
onDisposing: EventEmitter<DisposingEvent>;
/**
* A function that is executed when all series are ready.
*/
onDone: EventEmitter<DoneEvent>;
/**
* A function that is executed when the UI component's rendering has finished.
*/
onDrawn: EventEmitter<DrawnEvent>;
/**
* A function that is executed after the UI component is exported.
*/
onExported: EventEmitter<ExportedEvent>;
/**
* A function that is executed before the UI component is exported.
*/
onExporting: EventEmitter<ExportingEvent>;
/**
* A function that is executed before a file with exported UI component is saved to the user's local storage.
*/
onFileSaving: EventEmitter<FileSavingEvent>;
/**
* A function that is executed when an error or warning occurs.
*/
onIncidentOccurred: EventEmitter<IncidentOccurredEvent>;
/**
* A function used in JavaScript frameworks to save the UI component instance.
*/
onInitialized: EventEmitter<InitializedEvent>;
/**
* A function that is executed when a legend item is clicked or tapped.
*/
onLegendClick: EventEmitter<LegendClickEvent>;
/**
* A function that is executed after a UI component property is changed.
*/
onOptionChanged: EventEmitter<OptionChangedEvent>;
/**
* A function that is executed when a series point is clicked or tapped.
*/
onPointClick: EventEmitter<PointClickEvent>;
/**
* A function that is executed after the pointer enters or leaves a series point.
*/
onPointHoverChanged: EventEmitter<PointHoverChangedEvent>;
/**
* A function that is executed when a series point is selected or selection is canceled.
*/
onPointSelectionChanged: EventEmitter<PointSelectionChangedEvent>;
/**
* A function that is executed when a series is clicked or tapped.
*/
onSeriesClick: EventEmitter<SeriesClickEvent>;
/**
* A function that is executed after the pointer enters or leaves a series.
*/
onSeriesHoverChanged: EventEmitter<SeriesHoverChangedEvent>;
/**
* A function that is executed when a series is selected or selection is canceled.