devextreme-angular

/*! * 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, TimeInterval, ChartsDataType, ScaleBreak, ScaleBreakLineStyle, DashStyle, Font, RelativePosition, DiscreteAxisDivisionMode, ArgumentAxisHoverMode, ChartsAxisLabelOverlap, TextOverflow, WordWrap, AxisScaleType, VisualRangeUpdateMode, ChartsColor, SeriesHoverMode, HatchDirection, PointInteractionMode, PointSymbol, SeriesSelectionMode, SeriesType, ValueErrorBarDisplayMode, ValueErrorBarType, SeriesLabel, SeriesPoint, LegendItem, LegendHoverMode, Palette, PaletteExtensionMode, ChartsLabelOverlap, Theme } from 'devextreme/common/charts'; import { dxChartAnnotationConfig, AggregatedPointsPosition, ChartLabelDisplayMode, dxChartCommonAnnotationConfig, chartPointAggregationInfoObject, chartSeriesObject, ChartSeriesAggregationMethod, FinancialChartReductionLevel, chartPointObject, ArgumentAxisClickEvent, DisposingEvent, DoneEvent, DrawnEvent, ExportedEvent, ExportingEvent, FileSavingEvent, IncidentOccurredEvent, InitializedEvent, LegendClickEvent, OptionChangedEvent, PointClickEvent, PointHoverChangedEvent, PointSelectionChangedEvent, SeriesClickEvent, SeriesHoverChangedEvent, SeriesSelectionChangedEvent, TooltipHiddenEvent, TooltipShownEvent, ZoomEndEvent, ZoomStartEvent, ChartTooltipLocation, ChartZoomAndPanMode, EventKeyModifier } from 'devextreme/viz/chart'; import { HorizontalAlignment, VerticalAlignment, Position, ExportFormat, Orientation, VerticalEdge, SingleOrMultiple } from 'devextreme/common'; import { Format } from 'devextreme/common/core/localization'; import { DataSourceOptions } from 'devextreme/data/data_source'; import { Store } from 'devextreme/data/store'; import { ChartSeries } from 'devextreme/viz/common'; 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 { DxiChartAnnotationComponent } from 'devextreme-angular/ui/chart/nested'; import { DxiChartPaneComponent } from 'devextreme-angular/ui/chart/nested'; import { DxiChartSeriesComponent } from 'devextreme-angular/ui/chart/nested'; import { DxiChartValueAxisComponent } from 'devextreme-angular/ui/chart/nested'; import type * as DxChartTypes from "devextreme/viz/chart_types"; import * as i0 from "@angular/core"; import * as i1 from "devextreme-angular/ui/nested"; import * as i2 from "devextreme-angular/ui/chart/nested"; import * as i3 from "devextreme-angular/core"; /** * 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?: 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 | dxChartAnnotationConfig>; set annotations(value: Array<any | dxChartAnnotationConfig>); /** * Configures the argument axis. */ get argumentAxis(): { aggregateByCategory?: boolean; aggregatedPointsPosition?: AggregatedPointsPosition; aggregationGroupWidth?: number | undefined; aggregationInterval?: number | TimeInterval | { days?: number; hours?: number; milliseconds?: number; minutes?: number; months?: number; quarters?: number; seconds?: number; weeks?: number; years?: number; }; allowDecimals?: boolean | undefined; argumentType?: ChartsDataType | undefined; axisDivisionFactor?: number; breaks?: Array<ScaleBreak> | { endValue?: Date | number | string | undefined; startValue?: Date | number | string | undefined; }[]; breakStyle?: { color?: string; line?: ScaleBreakLineStyle; width?: number; }; categories?: Array<Date | number | string>; color?: string; constantLines?: { color?: string; dashStyle?: DashStyle; displayBehindSeries?: boolean; extendAxis?: boolean; label?: { font?: Font; horizontalAlignment?: HorizontalAlignment; position?: RelativePosition; text?: string | undefined; verticalAlignment?: VerticalAlignment; visible?: boolean; }; paddingLeftRight?: number; paddingTopBottom?: number; value?: Date | number | string | undefined; width?: number; }[]; constantLineStyle?: { color?: string; dashStyle?: DashStyle; label?: { font?: Font; horizontalAlignment?: HorizontalAlignment; position?: RelativePosition; verticalAlignment?: VerticalAlignment; visible?: boolean; }; paddingLeftRight?: number; paddingTopBottom?: number; width?: number; }; customPosition?: Date | number | string | undefined; customPositionAxis?: string | undefined; discreteAxisDivisionMode?: DiscreteAxisDivisionMode; endOnTick?: boolean; grid?: { color?: string; opacity?: number | undefined; visible?: boolean; width?: number; }; holidays?: Array<Date | string> | Array<number>; hoverMode?: ArgumentAxisHoverMode; inverted?: boolean; label?: { alignment?: HorizontalAlignment | undefined; customizeHint?: ((argument: { value: Date | number | string; valueText: string; }) => string); customizeText?: ((argument: { value: Date | number | string; valueText: string; }) => string); displayMode?: ChartLabelDisplayMode; font?: Font; format?: Format | undefined; indentFromAxis?: number; overlappingBehavior?: ChartsAxisLabelOverlap; position?: Position | RelativePosition; rotationAngle?: number; staggeringSpacing?: number; template?: any; textOverflow?: TextOverflow; visible?: boolean; wordWrap?: WordWrap; }; 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 | 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; }; offset?: number | undefined; opacity?: number | undefined; placeholderSize?: number; position?: Position; singleWorkdays?: Array<Date | string> | Array<number>; strips?: { color?: string | undefined; endValue?: Date | number | string | undefined; label?: { font?: Font; horizontalAlignment?: HorizontalAlignment; text?: string | undefined; verticalAlignment?: VerticalAlignment; }; paddingLeftRight?: number; paddingTopBottom?: number; startValue?: Date | number | string | undefined; }[]; stripStyle?: { label?: { font?: Font; horizontalAlignment?: HorizontalAlignment; verticalAlignment?: VerticalAlignment; }; paddingLeftRight?: number; paddingTopBottom?: number; }; 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; }; title?: string | { alignment?: HorizontalAlignment; font?: Font; margin?: number; text?: string | undefined; textOverflow?: TextOverflow; wordWrap?: WordWrap; }; type?: AxisScaleType | undefined; valueMarginsEnabled?: boolean; visible?: boolean; visualRange?: Array<Date | number | string> | CommonChartTypes.VisualRange; visualRangeUpdateMode?: VisualRangeUpdateMode; wholeRange?: Array<Date | number | string> | undefined | CommonChartTypes.VisualRange; width?: number; workdaysOnly?: boolean; workWeek?: Array<number>; }; set argumentAxis(value: { aggregateByCategory?: boolean; aggregatedPointsPosition?: AggregatedPointsPosition; aggregationGroupWidth?: number | undefined; aggregationInterval?: number | TimeInterval | { days?: number; hours?: number; milliseconds?: number; minutes?: number; months?: number; quarters?: number; seconds?: number; weeks?: number; years?: number; }; allowDecimals?: boolean | undefined; argumentType?: ChartsDataType | undefined; axisDivisionFactor?: number; breaks?: Array<ScaleBreak> | { endValue?: Date | number | string | undefined; startValue?: Date | number | string | undefined; }[]; breakStyle?: { color?: string; line?: ScaleBreakLineStyle; width?: number; }; categories?: Array<Date | number | string>; color?: string; constantLines?: { color?: string; dashStyle?: DashStyle; displayBehindSeries?: boolean; extendAxis?: boolean; label?: { font?: Font; horizontalAlignment?: HorizontalAlignment; position?: RelativePosition; text?: string | undefined; verticalAlignment?: VerticalAlignment; visible?: boolean; }; paddingLeftRight?: number; paddingTopBottom?: number; value?: Date | number | string | undefined; width?: number; }[]; constantLineStyle?: { color?: string; dashStyle?: DashStyle; label?: { font?: Font; horizontalAlignment?: HorizontalAlignment; position?: RelativePosition; verticalAlignment?: VerticalAlignment; visible?: boolean; }; paddingLeftRight?: number; paddingTopBottom?: number; width?: number; }; customPosition?: Date | number | string | undefined; customPositionAxis?: string | undefined; discreteAxisDivisionMode?: DiscreteAxisDivisionMode; endOnTick?: boolean; grid?: { color?: string; opacity?: number | undefined; visible?: boolean; width?: number; }; holidays?: Array<Date | string> | Array<number>; hoverMode?: ArgumentAxisHoverMode; inverted?: boolean; label?: { alignment?: HorizontalAlignment | undefined; customizeHint?: ((argument: { value: Date | number | string; valueText: string; }) => string); customizeText?: ((argument: { value: Date | number | string; valueText: string; }) => string); displayMode?: ChartLabelDisplayMode; font?: Font; format?: Format | undefined; indentFromAxis?: number; overlappingBehavior?: ChartsAxisLabelOverlap; position?: Position | RelativePosition; rotationAngle?: number; staggeringSpacing?: number; template?: any; textOverflow?: TextOverflow; visible?: boolean; wordWrap?: WordWrap; }; 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 | 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; }; offset?: number | undefined; opacity?: number | undefined; placeholderSize?: number; position?: Position; singleWorkdays?: Array<Date | string> | Array<number>; strips?: { color?: string | undefined; endValue?: Date | number | string | undefined; label?: { font?: Font; horizontalAlignment?: HorizontalAlignment; text?: string | undefined; verticalAlignment?: VerticalAlignment; }; paddingLeftRight?: number; paddingTopBottom?: number; startValue?: Date | number | string | undefined; }[]; stripStyle?: { label?: { font?: Font; horizontalAlignment?: HorizontalAlignment; verticalAlignment?: VerticalAlignment; }; paddingLeftRight?: number; paddingTopBottom?: number; }; 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; }; title?: string | { alignment?: HorizontalAlignment; font?: Font; margin?: number; text?: string | undefined; textOverflow?: TextOverflow; wordWrap?: WordWrap; }; type?: AxisScaleType | undefined; valueMarginsEnabled?: boolean; visible?: boolean; visualRange?: Array<Date | number | string> | CommonChartTypes.VisualRange; visualRangeUpdateMode?: VisualRangeUpdateMode; wholeRange?: Array<Date | number | string> | undefined | CommonChartTypes.VisualRange; 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?: AggregatedPointsPosition; allowDecimals?: boolean | undefined; breakStyle?: { color?: string; line?: ScaleBreakLineStyle; width?: number; }; color?: string; constantLineStyle?: { color?: string; dashStyle?: DashStyle; label?: { font?: Font; position?: RelativePosition; visible?: boolean; }; paddingLeftRight?: number; paddingTopBottom?: number; width?: number; }; discreteAxisDivisionMode?: DiscreteAxisDivisionMode; endOnTick?: boolean | undefined; grid?: { color?: string; opacity?: number | undefined; visible?: boolean; width?: number; }; inverted?: boolean; label?: { alignment?: HorizontalAlignment | undefined; displayMode?: ChartLabelDisplayMode; font?: Font; indentFromAxis?: number; overlappingBehavior?: ChartsAxisLabelOverlap; position?: Position | RelativePosition; rotationAngle?: number; staggeringSpacing?: number; template?: any; textOverflow?: TextOverflow; visible?: boolean; wordWrap?: WordWrap; }; 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?: HorizontalAlignment; verticalAlignment?: VerticalAlignment; }; paddingLeftRight?: number; paddingTopBottom?: number; }; tick?: { color?: string; length?: number; opacity?: number | undefined; shift?: number; visible?: boolean; width?: number; }; title?: { alignment?: HorizontalAlignment; font?: Font; margin?: number; textOverflow?: TextOverflow; wordWrap?: WordWrap; }; valueMarginsEnabled?: boolean; visible?: boolean; width?: number; }; set commonAxisSettings(value: { aggregatedPointsPosition?: AggregatedPointsPosition; allowDecimals?: boolean | undefined; breakStyle?: { color?: string; line?: ScaleBreakLineStyle; width?: number; }; color?: string; constantLineStyle?: { color?: string; dashStyle?: DashStyle; label?: { font?: Font; position?: RelativePosition; visible?: boolean; }; paddingLeftRight?: number; paddingTopBottom?: number; width?: number; }; discreteAxisDivisionMode?: DiscreteAxisDivisionMode; endOnTick?: boolean | undefined; grid?: { color?: string; opacity?: number | undefined; visible?: boolean; width?: number; }; inverted?: boolean; label?: { alignment?: HorizontalAlignment | undefined; displayMode?: ChartLabelDisplayMode; font?: Font; indentFromAxis?: number; overlappingBehavior?: ChartsAxisLabelOverlap; position?: Position | RelativePosition; rotationAngle?: number; staggeringSpacing?: number; template?: any; textOverflow?: TextOverflow; visible?: boolean; wordWrap?: WordWrap; }; 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?: HorizontalAlignment; verticalAlignment?: VerticalAlignment; }; paddingLeftRight?: number; paddingTopBottom?: number; }; tick?: { color?: string; length?: number; opacity?: number | undefined; shift?: number; visible?: boolean; width?: number; }; title?: { alignment?: HorizontalAlignment; font?: Font; margin?: number; textOverflow?: TextOverflow; wordWrap?: WordWrap; }; valueMarginsEnabled?: boolean; visible?: boolean; width?: number; }); /** * Defines common settings for all panes in a chart. */ get commonPaneSettings(): { backgroundColor?: ChartsColor | string; border?: { bottom?: boolean; color?: string; dashStyle?: DashStyle; left?: boolean; opacity?: number | undefined; right?: boolean; top?: boolean; visible?: boolean; width?: number; }; }; set commonPaneSettings(value: { backgroundColor?: ChartsColor | string; border?: { bottom?: boolean; color?: string; dashStyle?: DashStyle; left?: boolean; opacity?: number | undefined; right?: boolean; top?: boolean; visible?: boolean; width?: number; }; }); /** * Specifies settings common for all series in the chart. */ get commonSeriesSettings(): { aggregation?: { calculate?: ((aggregationInfo: chartPointAggregationInfoObject, series: chartSeriesObject) => Record<string, any> | Array<Record<string, any>>) | undefined; enabled?: boolean; method?: ChartSeriesAggregationMethod; }; area?: any; argumentField?: string; axis?: string | undefined; bar?: any; barOverlapGroup?: string | undefined; barPadding?: number | undefined; barWidth?: number | undefined; border?: { color?: string | undefined; dashStyle?: DashStyle | undefined; visible?: boolean; width?: number; }; bubble?: any; candlestick?: any; closeValueField?: string; color?: ChartsColor | string | undefined; cornerRadius?: number; dashStyle?: DashStyle; fullstackedarea?: any; fullstackedbar?: any; fullstackedline?: any; fullstackedspline?: any; fullstackedsplinearea?: any; highValueField?: string; 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; innerColor?: string; label?: { alignment?: HorizontalAlignment; 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; horizontalOffset?: number; position?: RelativePosition; rotationAngle?: number; showForZeroValues?: boolean; verticalOffset?: number; visible?: boolean; }; line?: any; lowValueField?: string; maxLabelCount?: number | undefined; minBarSize?: number | undefined; opacity?: number; openValueField?: string; pane?: string; 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 | undefined; }; image?: string | undefined | { height?: number | { rangeMaxPoint?: number | undefined; rangeMinPoint?: number | undefined; }; url?: string | undefined | { rangeMaxPoint?: string | undefined; rangeMinPoint?: string | undefined; }; width?: number | { rangeMaxPoint?: number | undefined; rangeMinPoint?: number | undefined; }; }; selectionMode?: PointInteractionMode; selectionStyle?: { border?: { color?: string | undefined; visible?: boolean; width?: number; }; color?: ChartsColor | string | undefined; size?: number | undefined; }; size?: number; symbol?: PointSymbol; visible?: boolean; }; rangearea?: any; rangebar?: any; rangeValue1Field?: string; rangeValue2Field?: string; reduction?: { color?: string; level?: FinancialChartReductionLevel; }; 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; sizeField?: string; spline?: any; splinearea?: any; stack?: string; stackedarea?: any; stackedbar?: any; stackedline?: any; stackedspline?: any; stackedsplinearea?: any; steparea?: any; stepline?: any; stock?: any; tagField?: string; type?: SeriesType; 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: { aggregation?: { calculate?: ((aggregationInfo: chartPointAggregationInfoObject, series: chartSeriesObject) => Record<string, any> | Array<Record<string, any>>) | undefined; enabled?: boolean; method?: ChartSeriesAggregationMethod; }; area?: any; argumentField?: string; axis?: string | undefined; bar?: any; barOverlapGroup?: string | undefined; barPadding?: number | undefined; barWidth?: number | undefined; border?: { color?: string | undefined; dashStyle?: DashStyle | undefined; visible?: boolean; width?: number; }; bubble?: any; candlestick?: any; closeValueField?: string; color?: ChartsColor | string | undefined; cornerRadius?: number; dashStyle?: DashStyle; fullstackedarea?: any; fullstackedbar?: any; fullstackedline?: any; fullstackedspline?: any; fullstackedsplinearea?: any; highValueField?: string; 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; innerColor?: string; label?: { alignment?: HorizontalAlignment; 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; horizontalOffset?: number; position?: RelativePosition; rotationAngle?: number; showForZeroValues?: boolean; verticalOffset?: number; visible?: boolean; }; line?: any; lowValueField?: string; maxLabelCount?: number | undefined; minBarSize?: number | undefined; opacity?: number; openValueField?: string; pane?: string; 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 | undefined; }; image?: string | undefined | { height?: number | { rangeMaxPoint?: number | undefined; rangeMinPoint?: number | undefined; }; url?: string | undefined | { rangeMaxPoint?: string | undefined; rangeMinPoint?: string | undefined; }; width?: number | { rangeMaxPoint?: number | undefined; rangeMinPoint?: number | undefined; }; }; selectionMode?: PointInteractionMode; selectionStyle?: { border?: { color?: string | undefined; visible?: boolean; width?: number; }; color?: ChartsColor | string | undefined; size?: number | undefined; }; size?: number; symbol?: PointSymbol; visible?: boolean; }; rangearea?: any; rangebar?: any; rangeValue1Field?: string; rangeValue2Field?: string; reduction?: { color?: string; level?: FinancialChartReductionLevel; }; 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; sizeField?: string; spline?: any; splinearea?: any; stack?: string; stackedarea?: any; stackedbar?: any; stackedline?: any; stackedspline?: any; stackedsplinearea?: any; steparea?: any; stepline?: any; stock?: any; tagField?: string; type?: SeriesType; 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 background color of the chart container. */ get containerBackgroundColor(): string; set containerBackgroundColor(value: string); /** * Configures the crosshair feature. */ get crosshair(): { color?: string; dashStyle?: DashStyle; enabled?: boolean; horizontalLine?: boolean | { color?: string; dashStyle?: DashStyle; label?: { backgroundColor?: string; customizeText?: ((info: { point: chartPointObject; value: Date | number | string; valueText: string; }) => string); font?: Font; format?: Format | undefined; visible?: boolean; }; opacity?: number | undefined; visible?: boolean; width?: number; }; label?: { backgroundColor?: string; customizeText?: ((info: { point: chartPointObject; value: Date | number | string; valueText: string; }) => string); font?: Font; format?: Format | undefined; visible?: boolean; }; opacity?: number | undefined; verticalLine?: boolean | { color?: string; dashStyle?: DashStyle; label?: { backgroundColor?: string; customizeText?: ((info: { point: chartPointObject; value: Date | number | string; valueText: string; }) => string); font?: Font; format?: Format | undefined; visible?: boolean; }; opacity?: number | undefined; visible?: boolean; width?: number; }; width?: number; }; set crosshair(value: { color?: string; dashStyle?: DashStyle; enabled?: boolean; horizontalLine?: boolean | { color?: string; dashStyle?: DashStyle; label?: { backgroundColor?: string; customizeText?: ((info: { point: chartPointObject; value: Date | number | string; valueText: string; }) => string); font?: Font; format?: Format | undefined; visible?: boolean; }; opacity?: number | undefined; visible?: boolean; width?: number; }; label?: { backgroundColor?: string; customizeText?: ((info: { point: chartPointObject; value: Date | number | string; valueText: string; }) => string); font?: Font; format?: Format | undefined; visible?: boolean; }; opacity?: number | undefined; verticalLine?: boolean | { color?: string; dashStyle?: DashStyle; label?: { backgroundColor?: string; customizeText?: ((info: { point: chartPointObject; value: Date | number | string; valueText: string; }) => string); font?: Font; format?: Format | undefined; visible?: boolean; }; opacity?: number | undefined; visible?: boolean; width?: number; }; width?: number; }); /** * Customizes an individual annotation. */ get customizeAnnotation(): ((annotation: dxChartAnnotationConfig | any) => dxChartAnnotationConfig) | undefined; set customizeAnnotation(value: ((annotation: dxChartAnnotationConfig | any) => dxChartAnnotationConfig) | 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)); /** * Processes data before visualizing it. */ get dataPrepareSettings(): { checkTypeForAllData?: boolean; convertToAxisDataType?: boolean; sortingMethod?: boolean | ((a: any, b: any) => number); }; set dataPrepareSettings(value: { checkTypeForAllData?: boolean; convertToAxisDataType?: boolean; sortingMethod?: boolean | ((a: any, b: any) => 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 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(): 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; position?: RelativePosition; 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; position?: RelativePosition; 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; };