devextreme-angular
Version:
Angular UI and visualization components based on DevExtreme widgets
1,570 lines (1,519 loc) • 102 kB
TypeScript
import { TransferState } from '@angular/platform-browser';
import { ElementRef, NgZone, OnDestroy, EventEmitter, OnChanges, DoCheck, SimpleChanges, QueryList } from '@angular/core';
import DevExpress from 'devextreme/bundles/dx.all';
import { UserDefinedElement } from 'devextreme/core/element';
import Store from 'devextreme/data/abstract_store';
import DataSource, { Options as DataSourceOptions } from 'devextreme/data/data_source';
import { Format } from 'devextreme/localization';
import { dxChartCommonAnnotationConfig } from 'devextreme/viz/chart';
import { Font } from 'devextreme/viz/core/base_widget';
import DxChart from 'devextreme/viz/chart';
import { DxComponent, DxTemplateHost, NestedOptionHost, IterableDifferHelper, WatcherHelper } from 'devextreme-angular/core';
import { DxiAnnotationComponent } from 'devextreme-angular/ui/nested';
import { DxiPaneComponent } from 'devextreme-angular/ui/nested';
import { DxiSeriesComponent } from 'devextreme-angular/ui/nested';
import { DxiValueAxisComponent } from 'devextreme-angular/ui/nested';
import * as i0 from "@angular/core";
import * as i1 from "devextreme-angular/ui/nested";
import * as i2 from "devextreme-angular/core";
import * as i3 from "@angular/platform-browser";
/**
* The Chart is a UI component that visualizes data from a local or remote storage using a great variety of series types along with different interactive elements, such as tooltips, crosshair pointer, legend, etc.
*/
export declare class DxChartComponent extends DxComponent implements OnDestroy, OnChanges, DoCheck {
private _watcherHelper;
private _idh;
instance: DxChart;
/**
* Specifies adaptive layout properties.
*/
get adaptiveLayout(): {
height?: number;
keepLabels?: boolean;
width?: number;
};
set adaptiveLayout(value: {
height?: number;
keepLabels?: boolean;
width?: number;
});
/**
* Specifies whether to adjust the value axis's visualRange when the argument axis is being zoomed or panned.
*/
get adjustOnZoom(): boolean;
set adjustOnZoom(value: boolean);
/**
* Specifies animation properties.
*/
get animation(): boolean | {
duration?: number;
easing?: string;
enabled?: boolean;
maxPointCountSupported?: number;
};
set animation(value: boolean | {
duration?: number;
easing?: string;
enabled?: boolean;
maxPointCountSupported?: number;
});
/**
* Specifies the annotation collection.
*/
get annotations(): Array<DevExpress.viz.dxChartAnnotationConfig | any>;
set annotations(value: Array<DevExpress.viz.dxChartAnnotationConfig | any>);
/**
* Configures the argument axis.
*/
get argumentAxis(): {
aggregateByCategory?: boolean;
aggregatedPointsPosition?: string;
aggregationGroupWidth?: number | undefined;
aggregationInterval?: number | string | {
days?: number;
hours?: number;
milliseconds?: number;
minutes?: number;
months?: number;
quarters?: number;
seconds?: number;
weeks?: number;
years?: number;
};
allowDecimals?: boolean | undefined;
argumentType?: string | undefined;
axisDivisionFactor?: number;
breaks?: Array<DevExpress.viz.ScaleBreak>;
breakStyle?: {
color?: string;
line?: string;
width?: number;
};
categories?: Array<number | string | Date>;
color?: string;
constantLines?: Array<any | {
color?: string;
dashStyle?: string;
displayBehindSeries?: boolean;
extendAxis?: boolean;
label?: {
font?: Font;
horizontalAlignment?: string;
position?: string;
text?: string | undefined;
verticalAlignment?: string;
visible?: boolean;
};
paddingLeftRight?: number;
paddingTopBottom?: number;
value?: Date | number | string | undefined;
width?: number;
}>;
constantLineStyle?: {
color?: string;
dashStyle?: string;
label?: {
font?: Font;
horizontalAlignment?: string;
position?: string;
verticalAlignment?: string;
visible?: boolean;
};
paddingLeftRight?: number;
paddingTopBottom?: number;
width?: number;
};
customPosition?: Date | number | string | undefined;
customPositionAxis?: string | undefined;
discreteAxisDivisionMode?: string;
endOnTick?: boolean;
grid?: {
color?: string;
opacity?: number | undefined;
visible?: boolean;
width?: number;
};
holidays?: Array<Date | string | number>;
hoverMode?: string;
inverted?: boolean;
label?: {
alignment?: string | undefined;
customizeHint?: Function;
customizeText?: Function;
displayMode?: string;
font?: Font;
format?: Format | string | undefined;
indentFromAxis?: number;
overlappingBehavior?: string;
position?: string;
rotationAngle?: number;
staggeringSpacing?: number;
template?: any | undefined;
textOverflow?: string;
visible?: boolean;
wordWrap?: string;
};
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;
shift?: number;
visible?: boolean;
width?: number;
};
minorTickCount?: number | undefined;
minorTickInterval?: number | string | {
days?: number;
hours?: number;
milliseconds?: number;
minutes?: number;
months?: number;
quarters?: number;
seconds?: number;
weeks?: number;
years?: number;
};
minValueMargin?: number | undefined;
minVisualRangeLength?: number | string | undefined | {
days?: number;
hours?: number;
milliseconds?: number;
minutes?: number;
months?: number;
quarters?: number;
seconds?: number;
weeks?: number;
years?: number;
};
offset?: number | undefined;
opacity?: number | undefined;
placeholderSize?: number;
position?: string;
singleWorkdays?: Array<Date | string | number>;
strips?: Array<any | {
color?: string | undefined;
endValue?: Date | number | string | undefined;
label?: {
font?: Font;
horizontalAlignment?: string;
text?: string | undefined;
verticalAlignment?: string;
};
paddingLeftRight?: number;
paddingTopBottom?: number;
startValue?: Date | number | string | undefined;
}>;
stripStyle?: {
label?: {
font?: Font;
horizontalAlignment?: string;
verticalAlignment?: string;
};
paddingLeftRight?: number;
paddingTopBottom?: number;
};
tick?: {
color?: string;
length?: number;
opacity?: number | undefined;
shift?: number;
visible?: boolean;
width?: number;
};
tickInterval?: number | string | {
days?: number;
hours?: number;
milliseconds?: number;
minutes?: number;
months?: number;
quarters?: number;
seconds?: number;
weeks?: number;
years?: number;
};
title?: string | {
alignment?: string;
font?: Font;
margin?: number;
text?: string | undefined;
textOverflow?: string;
wordWrap?: string;
};
type?: string | undefined;
valueMarginsEnabled?: boolean;
visible?: boolean;
visualRange?: DevExpress.viz.VizRange | Array<number | string | Date>;
visualRangeUpdateMode?: string;
wholeRange?: DevExpress.viz.VizRange | undefined | Array<number | string | Date>;
width?: number;
workdaysOnly?: boolean;
workWeek?: Array<number>;
};
set argumentAxis(value: {
aggregateByCategory?: boolean;
aggregatedPointsPosition?: string;
aggregationGroupWidth?: number | undefined;
aggregationInterval?: number | string | {
days?: number;
hours?: number;
milliseconds?: number;
minutes?: number;
months?: number;
quarters?: number;
seconds?: number;
weeks?: number;
years?: number;
};
allowDecimals?: boolean | undefined;
argumentType?: string | undefined;
axisDivisionFactor?: number;
breaks?: Array<DevExpress.viz.ScaleBreak>;
breakStyle?: {
color?: string;
line?: string;
width?: number;
};
categories?: Array<number | string | Date>;
color?: string;
constantLines?: Array<any | {
color?: string;
dashStyle?: string;
displayBehindSeries?: boolean;
extendAxis?: boolean;
label?: {
font?: Font;
horizontalAlignment?: string;
position?: string;
text?: string | undefined;
verticalAlignment?: string;
visible?: boolean;
};
paddingLeftRight?: number;
paddingTopBottom?: number;
value?: Date | number | string | undefined;
width?: number;
}>;
constantLineStyle?: {
color?: string;
dashStyle?: string;
label?: {
font?: Font;
horizontalAlignment?: string;
position?: string;
verticalAlignment?: string;
visible?: boolean;
};
paddingLeftRight?: number;
paddingTopBottom?: number;
width?: number;
};
customPosition?: Date | number | string | undefined;
customPositionAxis?: string | undefined;
discreteAxisDivisionMode?: string;
endOnTick?: boolean;
grid?: {
color?: string;
opacity?: number | undefined;
visible?: boolean;
width?: number;
};
holidays?: Array<Date | string | number>;
hoverMode?: string;
inverted?: boolean;
label?: {
alignment?: string | undefined;
customizeHint?: Function;
customizeText?: Function;
displayMode?: string;
font?: Font;
format?: Format | string | undefined;
indentFromAxis?: number;
overlappingBehavior?: string;
position?: string;
rotationAngle?: number;
staggeringSpacing?: number;
template?: any | undefined;
textOverflow?: string;
visible?: boolean;
wordWrap?: string;
};
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;
shift?: number;
visible?: boolean;
width?: number;
};
minorTickCount?: number | undefined;
minorTickInterval?: number | string | {
days?: number;
hours?: number;
milliseconds?: number;
minutes?: number;
months?: number;
quarters?: number;
seconds?: number;
weeks?: number;
years?: number;
};
minValueMargin?: number | undefined;
minVisualRangeLength?: number | string | undefined | {
days?: number;
hours?: number;
milliseconds?: number;
minutes?: number;
months?: number;
quarters?: number;
seconds?: number;
weeks?: number;
years?: number;
};
offset?: number | undefined;
opacity?: number | undefined;
placeholderSize?: number;
position?: string;
singleWorkdays?: Array<Date | string | number>;
strips?: Array<any | {
color?: string | undefined;
endValue?: Date | number | string | undefined;
label?: {
font?: Font;
horizontalAlignment?: string;
text?: string | undefined;
verticalAlignment?: string;
};
paddingLeftRight?: number;
paddingTopBottom?: number;
startValue?: Date | number | string | undefined;
}>;
stripStyle?: {
label?: {
font?: Font;
horizontalAlignment?: string;
verticalAlignment?: string;
};
paddingLeftRight?: number;
paddingTopBottom?: number;
};
tick?: {
color?: string;
length?: number;
opacity?: number | undefined;
shift?: number;
visible?: boolean;
width?: number;
};
tickInterval?: number | string | {
days?: number;
hours?: number;
milliseconds?: number;
minutes?: number;
months?: number;
quarters?: number;
seconds?: number;
weeks?: number;
years?: number;
};
title?: string | {
alignment?: string;
font?: Font;
margin?: number;
text?: string | undefined;
textOverflow?: string;
wordWrap?: string;
};
type?: string | undefined;
valueMarginsEnabled?: boolean;
visible?: boolean;
visualRange?: DevExpress.viz.VizRange | Array<number | string | Date>;
visualRangeUpdateMode?: string;
wholeRange?: DevExpress.viz.VizRange | undefined | Array<number | string | Date>;
width?: number;
workdaysOnly?: boolean;
workWeek?: Array<number>;
});
/**
* Specifies whether to hide series point markers automatically to reduce visual clutter.
*/
get autoHidePointMarkers(): boolean;
set autoHidePointMarkers(value: boolean);
/**
* Controls the padding and consequently the 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 width for groups of bars with the same argument, measured in pixels. Takes precedence over the barGroupPadding property.
*/
get barGroupWidth(): number | undefined;
set barGroupWidth(value: number | undefined);
/**
* Specifies settings common for all annotations in the chart.
*/
get commonAnnotationSettings(): dxChartCommonAnnotationConfig;
set commonAnnotationSettings(value: dxChartCommonAnnotationConfig);
/**
* Defines common settings for both the argument and value axis in a chart.
*/
get commonAxisSettings(): {
aggregatedPointsPosition?: string;
allowDecimals?: boolean | undefined;
breakStyle?: {
color?: string;
line?: string;
width?: number;
};
color?: string;
constantLineStyle?: {
color?: string;
dashStyle?: string;
label?: {
font?: Font;
position?: string;
visible?: boolean;
};
paddingLeftRight?: number;
paddingTopBottom?: number;
width?: number;
};
discreteAxisDivisionMode?: string;
endOnTick?: boolean | undefined;
grid?: {
color?: string;
opacity?: number | undefined;
visible?: boolean;
width?: number;
};
inverted?: boolean;
label?: {
alignment?: string | undefined;
displayMode?: string;
font?: Font;
indentFromAxis?: number;
overlappingBehavior?: string;
position?: string;
rotationAngle?: number;
staggeringSpacing?: number;
template?: any | undefined;
textOverflow?: string;
visible?: boolean;
wordWrap?: string;
};
maxValueMargin?: number | undefined;
minorGrid?: {
color?: string;
opacity?: number | undefined;
visible?: boolean;
width?: number;
};
minorTick?: {
color?: string;
length?: number;
opacity?: number;
shift?: number;
visible?: boolean;
width?: number;
};
minValueMargin?: number | undefined;
opacity?: number | undefined;
placeholderSize?: number;
stripStyle?: {
label?: {
font?: Font;
horizontalAlignment?: string;
verticalAlignment?: string;
};
paddingLeftRight?: number;
paddingTopBottom?: number;
};
tick?: {
color?: string;
length?: number;
opacity?: number | undefined;
shift?: number;
visible?: boolean;
width?: number;
};
title?: {
alignment?: string;
font?: Font;
margin?: number;
textOverflow?: string;
wordWrap?: string;
};
valueMarginsEnabled?: boolean;
visible?: boolean;
width?: number;
};
set commonAxisSettings(value: {
aggregatedPointsPosition?: string;
allowDecimals?: boolean | undefined;
breakStyle?: {
color?: string;
line?: string;
width?: number;
};
color?: string;
constantLineStyle?: {
color?: string;
dashStyle?: string;
label?: {
font?: Font;
position?: string;
visible?: boolean;
};
paddingLeftRight?: number;
paddingTopBottom?: number;
width?: number;
};
discreteAxisDivisionMode?: string;
endOnTick?: boolean | undefined;
grid?: {
color?: string;
opacity?: number | undefined;
visible?: boolean;
width?: number;
};
inverted?: boolean;
label?: {
alignment?: string | undefined;
displayMode?: string;
font?: Font;
indentFromAxis?: number;
overlappingBehavior?: string;
position?: string;
rotationAngle?: number;
staggeringSpacing?: number;
template?: any | undefined;
textOverflow?: string;
visible?: boolean;
wordWrap?: string;
};
maxValueMargin?: number | undefined;
minorGrid?: {
color?: string;
opacity?: number | undefined;
visible?: boolean;
width?: number;
};
minorTick?: {
color?: string;
length?: number;
opacity?: number;
shift?: number;
visible?: boolean;
width?: number;
};
minValueMargin?: number | undefined;
opacity?: number | undefined;
placeholderSize?: number;
stripStyle?: {
label?: {
font?: Font;
horizontalAlignment?: string;
verticalAlignment?: string;
};
paddingLeftRight?: number;
paddingTopBottom?: number;
};
tick?: {
color?: string;
length?: number;
opacity?: number | undefined;
shift?: number;
visible?: boolean;
width?: number;
};
title?: {
alignment?: string;
font?: Font;
margin?: number;
textOverflow?: string;
wordWrap?: string;
};
valueMarginsEnabled?: boolean;
visible?: boolean;
width?: number;
});
/**
* Defines common settings for all panes in a chart.
*/
get commonPaneSettings(): {
backgroundColor?: string;
border?: {
bottom?: boolean;
color?: string;
dashStyle?: string;
left?: boolean;
opacity?: number | undefined;
right?: boolean;
top?: boolean;
visible?: boolean;
width?: number;
};
};
set commonPaneSettings(value: {
backgroundColor?: string;
border?: {
bottom?: boolean;
color?: string;
dashStyle?: string;
left?: boolean;
opacity?: number | undefined;
right?: boolean;
top?: boolean;
visible?: boolean;
width?: number;
};
});
/**
* Specifies settings common for all series in the chart.
*/
get commonSeriesSettings(): any;
set commonSeriesSettings(value: any);
/**
* Specifies background color of the chart container.
*/
get containerBackgroundColor(): string;
set containerBackgroundColor(value: string);
/**
* Configures the crosshair feature.
*/
get crosshair(): {
color?: string;
dashStyle?: string;
enabled?: boolean;
horizontalLine?: boolean | {
color?: string;
dashStyle?: string;
label?: {
backgroundColor?: string;
customizeText?: Function;
font?: Font;
format?: Format | string | undefined;
visible?: boolean;
};
opacity?: number | undefined;
visible?: boolean;
width?: number;
};
label?: {
backgroundColor?: string;
customizeText?: Function;
font?: Font;
format?: Format | string | undefined;
visible?: boolean;
};
opacity?: number | undefined;
verticalLine?: boolean | {
color?: string;
dashStyle?: string;
label?: {
backgroundColor?: string;
customizeText?: Function;
font?: Font;
format?: Format | string | undefined;
visible?: boolean;
};
opacity?: number | undefined;
visible?: boolean;
width?: number;
};
width?: number;
};
set crosshair(value: {
color?: string;
dashStyle?: string;
enabled?: boolean;
horizontalLine?: boolean | {
color?: string;
dashStyle?: string;
label?: {
backgroundColor?: string;
customizeText?: Function;
font?: Font;
format?: Format | string | undefined;
visible?: boolean;
};
opacity?: number | undefined;
visible?: boolean;
width?: number;
};
label?: {
backgroundColor?: string;
customizeText?: Function;
font?: Font;
format?: Format | string | undefined;
visible?: boolean;
};
opacity?: number | undefined;
verticalLine?: boolean | {
color?: string;
dashStyle?: string;
label?: {
backgroundColor?: string;
customizeText?: Function;
font?: Font;
format?: Format | string | undefined;
visible?: boolean;
};
opacity?: number | undefined;
visible?: boolean;
width?: number;
};
width?: number;
});
/**
* Customizes an individual annotation.
*/
get customizeAnnotation(): Function | undefined;
set customizeAnnotation(value: Function | undefined);
/**
* Customizes the appearance of an individual point label.
*/
get customizeLabel(): Function;
set customizeLabel(value: Function);
/**
* Customizes the appearance of an individual series point.
*/
get customizePoint(): Function;
set customizePoint(value: Function);
/**
* Processes data before visualizing it.
*/
get dataPrepareSettings(): {
checkTypeForAllData?: boolean;
convertToAxisDataType?: boolean;
sortingMethod?: boolean | Function;
};
set dataPrepareSettings(value: {
checkTypeForAllData?: boolean;
convertToAxisDataType?: boolean;
sortingMethod?: boolean | Function;
});
/**
* Binds the UI component to data.
*/
get dataSource(): DataSource | DataSourceOptions | Store | null | string | Array<any>;
set dataSource(value: DataSource | DataSourceOptions | Store | null | string | Array<any>);
/**
* Specifies which pane should be used by default.
*/
get defaultPane(): string | undefined;
set defaultPane(value: string | undefined);
/**
* 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(): any;
set elementAttr(value: any);
/**
* Configures the exporting and printing features.
*/
get export(): {
backgroundColor?: string;
enabled?: boolean;
fileName?: string;
formats?: Array<string>;
margin?: number;
printingEnabled?: boolean;
proxyUrl?: string | undefined;
svgToCanvas?: Function | undefined;
};
set export(value: {
backgroundColor?: string;
enabled?: boolean;
fileName?: string;
formats?: Array<string>;
margin?: number;
printingEnabled?: boolean;
proxyUrl?: string | undefined;
svgToCanvas?: Function | undefined;
});
/**
* Specifies the properties of a chart's legend.
*/
get legend(): {
backgroundColor?: string | undefined;
border?: {
color?: string;
cornerRadius?: number;
dashStyle?: string;
opacity?: number | undefined;
visible?: boolean;
width?: number;
};
columnCount?: number;
columnItemSpacing?: number;
customizeHint?: Function;
customizeItems?: Function;
customizeText?: Function;
font?: Font;
horizontalAlignment?: string;
hoverMode?: string;
itemsAlignment?: string | undefined;
itemTextPosition?: string | undefined;
margin?: number | {
bottom?: number;
left?: number;
right?: number;
top?: number;
};
markerSize?: number;
markerTemplate?: any | undefined;
orientation?: string | undefined;
paddingLeftRight?: number;
paddingTopBottom?: number;
position?: string;
rowCount?: number;
rowItemSpacing?: number;
title?: string | {
font?: Font;
horizontalAlignment?: string | undefined;
margin?: {
bottom?: number;
left?: number;
right?: number;
top?: number;
};
placeholderSize?: number | undefined;
subtitle?: string | {
font?: Font;
offset?: number;
text?: string;
};
text?: string;
verticalAlignment?: string;
};
verticalAlignment?: string;
visible?: boolean;
};
set legend(value: {
backgroundColor?: string | undefined;
border?: {
color?: string;
cornerRadius?: number;
dashStyle?: string;
opacity?: number | undefined;
visible?: boolean;
width?: number;
};
columnCount?: number;
columnItemSpacing?: number;
customizeHint?: Function;
customizeItems?: Function;
customizeText?: Function;
font?: Font;
horizontalAlignment?: string;
hoverMode?: string;
itemsAlignment?: string | undefined;
itemTextPosition?: string | undefined;
margin?: number | {
bottom?: number;
left?: number;
right?: number;
top?: number;
};
markerSize?: number;
markerTemplate?: any | undefined;
orientation?: string | undefined;
paddingLeftRight?: number;
paddingTopBottom?: number;
position?: string;
rowCount?: number;
rowItemSpacing?: number;
title?: string | {
font?: Font;
horizontalAlignment?: string | undefined;
margin?: {
bottom?: number;
left?: number;
right?: number;
top?: number;
};
placeholderSize?: number | undefined;
subtitle?: string | {
font?: Font;
offset?: number;
text?: string;
};
text?: string;
verticalAlignment?: string;
};
verticalAlignment?: string;
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;
});
/**
* Specifies a coefficient determining the diameter of the largest bubble.
*/
get maxBubbleSize(): number;
set maxBubbleSize(value: number);
/**
* Specifies the diameter of the smallest bubble measured in pixels.
*/
get minBubbleSize(): number;
set minBubbleSize(value: 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(): string | Array<string>;
set palette(value: string | Array<string>);
/**
* 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(): string;
set paletteExtensionMode(value: string);
/**
* Declares a collection of panes.
*/
get panes(): Array<any | {
backgroundColor?: string;
border?: {
bottom?: boolean;
color?: string;
dashStyle?: string;
left?: boolean;
opacity?: number | undefined;
right?: boolean;
top?: boolean;
visible?: boolean;
width?: number;
};
height?: number | string | undefined;
name?: string | undefined;
}>;
set panes(value: Array<any | {
backgroundColor?: string;
border?: {
bottom?: boolean;
color?: string;
dashStyle?: string;
left?: boolean;
opacity?: number | undefined;
right?: boolean;
top?: boolean;
visible?: boolean;
width?: number;
};
height?: number | string | undefined;
name?: string | undefined;
}>);
/**
* 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(): string;
set pointSelectionMode(value: string);
/**
* Specifies whether to redraw the UI component when the size of the parent browser window changes or a mobile device rotates.
*/
get redrawOnResize(): boolean;
set redrawOnResize(value: boolean);
/**
* Specifies whether panes can be resized if other chart elements require more space after zooming or panning.
*/
get resizePanesOnZoom(): boolean;
set resizePanesOnZoom(value: boolean);
/**
* Specifies how the chart must behave when series point labels overlap.
*/
get resolveLabelOverlapping(): string;
set resolveLabelOverlapping(value: string);
/**
* Swaps the axes around making the value axis horizontal and the argument axis vertical.
*/
get rotated(): boolean;
set rotated(value: boolean);
/**
* Switches the UI component to a right-to-left representation.
*/
get rtlEnabled(): boolean;
set rtlEnabled(value: boolean);
/**
* Specifies the settings of the scroll bar.
*/
get scrollBar(): {
color?: string;
offset?: number;
opacity?: number | undefined;
position?: string;
visible?: boolean;
width?: number;
};
set scrollBar(value: {
color?: string;
offset?: number;
opacity?: number | undefined;
position?: string;
visible?: boolean;
width?: number;
});
/**
* Specifies properties for Chart UI component series.
*/
get series(): any | undefined | Array<any>;
set series(value: any | undefined | Array<any>);
/**
* Specifies whether a single series or multiple series can be selected in the chart.
*/
get seriesSelectionMode(): string;
set seriesSelectionMode(value: string);
/**
* Defines properties for the series template.
*/
get seriesTemplate(): {
customizeSeries?: Function;
nameField?: string;
};
set seriesTemplate(value: {
customizeSeries?: Function;
nameField?: string;
});
/**
* 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;
});
/**
* Specifies whether a point should remain in the hover state when the mouse pointer moves away.
*/
get stickyHovering(): boolean;
set stickyHovering(value: boolean);
/**
* Indicates whether or not to synchronize value axes when they are displayed on a single pane.
*/
get synchronizeMultiAxes(): boolean;
set synchronizeMultiAxes(value: boolean);
/**
* Sets the name of the theme the UI component uses.
*/
get theme(): string;
set theme(value: string);
/**
* Configures the UI component's title.
*/
get title(): string | {
font?: Font;
horizontalAlignment?: string;
margin?: number | {
bottom?: number;
left?: number;
right?: number;
top?: number;
};
placeholderSize?: number | undefined;
subtitle?: string | {
font?: Font;
offset?: number;
text?: string;
textOverflow?: string;
wordWrap?: string;
};
text?: string;
textOverflow?: string;
verticalAlignment?: string;
wordWrap?: string;
};
set title(value: string | {
font?: Font;
horizontalAlignment?: string;
margin?: number | {
bottom?: number;
left?: number;
right?: number;
top?: number;
};
placeholderSize?: number | undefined;
subtitle?: string | {
font?: Font;
offset?: number;
text?: string;
textOverflow?: string;
wordWrap?: string;
};
text?: string;
textOverflow?: string;
verticalAlignment?: string;
wordWrap?: string;
});
/**
* Configures tooltips.
*/
get tooltip(): {
argumentFormat?: Format | string | undefined;
arrowLength?: number;
border?: {
color?: string;
dashStyle?: string;
opacity?: number | undefined;
visible?: boolean;
width?: number;
};
color?: string;
container?: string | UserDefinedElement | undefined;
contentTemplate?: any | undefined;
cornerRadius?: number;
customizeTooltip?: Function | undefined;
enabled?: boolean;
font?: Font;
format?: Format | string | undefined;
interactive?: boolean;
location?: string;
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 | string | undefined;
arrowLength?: number;
border?: {
color?: string;
dashStyle?: string;
opacity?: number | undefined;
visible?: boolean;
width?: number;
};
color?: string;
container?: string | UserDefinedElement | undefined;
contentTemplate?: any | undefined;
cornerRadius?: number;
customizeTooltip?: Function | undefined;
enabled?: boolean;
font?: Font;
format?: Format | string | undefined;
interactive?: boolean;
location?: string;
opacity?: number | undefined;
paddingLeftRight?: number;
paddingTopBottom?: number;
shadow?: {
blur?: number;
color?: string;
offsetX?: number;
offsetY?: number;
opacity?: number;
};
shared?: boolean;
zIndex?: number | undefined;
});
/**
* Configures the value axis.
*/
get valueAxis(): Array<any | {
aggregatedPointsPosition?: string;
allowDecimals?: boolean | undefined;
autoBreaksEnabled?: boolean;
axisDivisionFactor?: number;
breaks?: Array<DevExpress.viz.ScaleBreak>;
breakStyle?: {
color?: string;
line?: string;
width?: number;
};
categories?: Array<number | string | Date>;
color?: string;
constantLines?: Array<any | {
color?: string;
dashStyle?: string;
displayBehindSeries?: boolean;
extendAxis?: boolean;
label?: {
font?: Font;
horizontalAlignment?: string;
position?: string;
text?: string | undefined;
verticalAlignment?: string;
visible?: boolean;
};
paddingLeftRight?: number;
paddingTopBottom?: number;
value?: Date | number | string | undefined;
width?: number;
}>;
constantLineStyle?: {
color?: string;
dashStyle?: string;
label?: {
font?: Font;
horizontalAlignment?: string;
position?: string;
verticalAlignment?: string;
visible?: boolean;
};
paddingLeftRight?: number;
paddingTopBottom?: number;
width?: number;
};
customPosition?: Date | number | string | undefined;
discreteAxisDivisionMode?: string;
endOnTick?: boolean | undefined;
grid?: {
color?: string;
opacity?: number | undefined;
visible?: boolean;
width?: number;
};
inverted?: boolean;
label?: {
alignment?: string | undefined;
customizeHint?: Function;
customizeText?: Function;
displayMode?: string;
font?: Font;
format?: Format | string | undefined;
indentFromAxis?: number;
overlappingBehavior?: string;
position?: string;
rotationAngle?: number;
staggeringSpacing?: number;
template?: any | undefined;
textOverflow?: string;
visible?: boolean;
wordWrap?: string;
};
linearThreshold?: number | undefined;
logarithmBase?: number;
maxAutoBreakCount?: number;
maxValueMargin?: number | undefined;
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 | string | {
days?: number;
hours?: number;
milliseconds?: number;
minutes?: number;
months?: number;
quarters?: number;
seconds?: number;
weeks?: number;
years?: number;
};
minValueMargin?: number | undefined;
minVisualRangeLength?: number | string | undefined | {
days?: number;
hours?: number;
milliseconds?: number;
minutes?: number;
months?: number;
quarters?: number;
seconds?: number;
weeks?: number;
years?: number;
};
multipleAxesSpacing?: number;
name?: string | undefined;
offset?: number | undefined;
opacity?: number | undefined;
pane?: string | undefined;
placeholderSize?: number;
position?: string;
showZero?: boolean | undefined;
strips?: Array<any | {
color?: string | undefined;
endValue?: Date | number | string | undefined;
label?: {
font?: Font;
horizontalAlignment?: string;
text?: string | undefined;
verticalAlignment?: string;
};
paddingLeftRight?: number;
paddingTopBottom?: number;
startValue?: Date | number | string | undefined;
}>;
stripStyle?: {
label?: {
font?: Font;
horizontalAlignment?: string;
verticalAlignment?: string;
};
paddingLeftRight?: number;
paddingTopBottom?: number;
};
synchronizedValue?: number | undefined;
tick?: {
color?: string;
length?: number;
opacity?: number | undefined;
shift?: number;
visible?: boolean;
width?: number;
};
tickInterval?: number | string | {
days?: number;
hours?: number;
milliseconds?: number;
minutes?: number;
months?: number;
quarters?: number;
seconds?: number;
weeks?: number;
years?: number;
};
title?: string | {
alignment?: string;
font?: Font;
margin?: number;
text?: string | undefined;
textOverflow?: string;
wordWrap?: string;
};
type?: string | undefined;
valueMarginsEnabled?: boolean;
valueType?: string | undefined;
visible?: boolean;
visualRange?: DevExpress.viz.VizRange | Array<number | string | Date>;
visualRangeUpdateMode?: string;
wholeRange?: DevExpress.viz.VizRange | undefined | Array<number | string | Date>;
width?: number;
}>;
set valueAxis(value: Array<any | {
aggregatedPointsPosition?: string;
allowDecimals?: boolean | undefined;
autoBreaksEnabled?: boolean;
axisDivisionFactor?: number;
breaks?: Array<DevExpress.viz.ScaleBreak>;
breakStyle?: {
color?: string;
line?: string;
width?: number;
};
categories?: Array<number | string | Date>;
color?: string;
constantLines?: Array<any | {
color?: string;
dashStyle?: string;
displayBehindSeries?: boolean;
extendAxis?: boolean;
label?: {
font?: Font;
horizontalAlignment?: string;
position?: string;
text?: string | undefined;
verticalAlignment?: string;
visible?: boolean;
};
paddingLeftRight?: number;
paddingTopBottom?: number;
value?: Date | number | string | undefined;
width?: number;
}>;
constantLineStyle?: {
color?: string;
dashStyle?: string;
label?: {
font?: Font;
horizontalAlignment?: string;
position?: string;
verticalAlignment?: string;
visible?: boolean;
};
paddingLeftRight?: number;
paddingTopBottom?: number;
width?: number;
};
customPosition?: Date | number | string | undefined;
discreteAxisDivisionMode?: string;
endOnTick?: boolean | undefined;
grid?: {
color?: string;
opacity?: number | undefined;
visible?: boolean;
width?: number;
};
inverted?: boolean;
label?: {
alignment?: string | undefined;
cus