devextreme-react
Version:
DevExtreme React UI and Visualization Components
1,282 lines (1,280 loc) • 171 kB
TypeScript
/*!
* devextreme-react
* 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-react
*/
import * as React from "react";
import { Ref, ReactElement } from "react";
import dxChart, { Properties } from "devextreme/viz/chart";
import { IHtmlOptions, NestedComponentMeta } from "./core/component";
import type { ArgumentAxisClickEvent, DisposingEvent, DoneEvent, DrawnEvent, ExportedEvent, ExportingEvent, FileSavingEvent, IncidentOccurredEvent, InitializedEvent, LegendClickEvent, PointClickEvent, SeriesClickEvent, TooltipHiddenEvent, TooltipShownEvent, ZoomEndEvent, ZoomStartEvent, chartPointAggregationInfoObject, chartSeriesObject, ChartSeriesAggregationMethod, dxChartAnnotationConfig, AggregatedPointsPosition, ChartLabelDisplayMode, FinancialChartReductionLevel, chartPointObject, ChartTooltipLocation, ChartZoomAndPanMode, EventKeyModifier } from "devextreme/viz/chart";
import type { AnimationEaseMode, DashStyle, Font as ChartsFont, TextOverflow, AnnotationType, WordWrap, TimeInterval, ChartsDataType, ScaleBreak, ScaleBreakLineStyle, RelativePosition, DiscreteAxisDivisionMode, ArgumentAxisHoverMode, ChartsAxisLabelOverlap, AxisScaleType, VisualRangeUpdateMode, ChartsColor, SeriesHoverMode, HatchDirection, PointInteractionMode, PointSymbol, SeriesSelectionMode, SeriesType, ValueErrorBarDisplayMode, ValueErrorBarType, LegendItem, LegendHoverMode } from "devextreme/common/charts";
import type { template, HorizontalAlignment, VerticalAlignment, Format as CommonFormat, Position, VerticalEdge, ExportFormat, Orientation } from "devextreme/common";
import type { Format as LocalizationFormat } from "devextreme/common/core/localization";
import type { ChartSeries } from "devextreme/viz/common";
import type * as CommonChartTypes from "devextreme/common/charts";
type ReplaceFieldTypes<TSource, TReplacement> = {
[P in keyof TSource]: P extends keyof TReplacement ? TReplacement[P] : TSource[P];
};
type IChartOptionsNarrowedEvents = {
onArgumentAxisClick?: ((e: ArgumentAxisClickEvent) => void);
onDisposing?: ((e: DisposingEvent) => void);
onDone?: ((e: DoneEvent) => void);
onDrawn?: ((e: DrawnEvent) => void);
onExported?: ((e: ExportedEvent) => void);
onExporting?: ((e: ExportingEvent) => void);
onFileSaving?: ((e: FileSavingEvent) => void);
onIncidentOccurred?: ((e: IncidentOccurredEvent) => void);
onInitialized?: ((e: InitializedEvent) => void);
onLegendClick?: ((e: LegendClickEvent) => void);
onPointClick?: ((e: PointClickEvent) => void);
onSeriesClick?: ((e: SeriesClickEvent) => void);
onTooltipHidden?: ((e: TooltipHiddenEvent) => void);
onTooltipShown?: ((e: TooltipShownEvent) => void);
onZoomEnd?: ((e: ZoomEndEvent) => void);
onZoomStart?: ((e: ZoomStartEvent) => void);
};
type IChartOptions = React.PropsWithChildren<ReplaceFieldTypes<Properties, IChartOptionsNarrowedEvents> & IHtmlOptions & {
defaultArgumentAxis?: Record<string, any>;
defaultLoadingIndicator?: Record<string, any>;
defaultValueAxis?: Array<Record<string, any>> | Record<string, any>;
onArgumentAxisChange?: (value: Record<string, any>) => void;
onLoadingIndicatorChange?: (value: Record<string, any>) => void;
onValueAxisChange?: (value: Array<Record<string, any>> | Record<string, any>) => void;
}>;
interface ChartRef {
instance: () => dxChart;
}
declare const Chart: (props: React.PropsWithChildren<IChartOptions> & {
ref?: Ref<ChartRef>;
}) => ReactElement | null;
type IAdaptiveLayoutProps = React.PropsWithChildren<{
height?: number;
keepLabels?: boolean;
width?: number;
}>;
declare const AdaptiveLayout: ((props: IAdaptiveLayoutProps) => React.FunctionComponentElement<React.PropsWithChildren<{
height?: number | undefined;
keepLabels?: boolean | undefined;
width?: number | undefined;
} & {
children?: React.ReactNode;
} & {
elementDescriptor: import("./core/configuration/react/element").IElementDescriptor;
}>>) & NestedComponentMeta;
type IAggregationProps = React.PropsWithChildren<{
calculate?: ((aggregationInfo: chartPointAggregationInfoObject, series: chartSeriesObject) => Record<string, any> | Array<Record<string, any>>) | undefined;
enabled?: boolean;
method?: ChartSeriesAggregationMethod;
}>;
declare const Aggregation: ((props: IAggregationProps) => React.FunctionComponentElement<React.PropsWithChildren<{
calculate?: ((aggregationInfo: chartPointAggregationInfoObject, series: chartSeriesObject) => Record<string, any> | Array<Record<string, any>>) | undefined;
enabled?: boolean | undefined;
method?: ChartSeriesAggregationMethod | undefined;
} & {
children?: React.ReactNode;
} & {
elementDescriptor: import("./core/configuration/react/element").IElementDescriptor;
}>>) & NestedComponentMeta;
type IAggregationIntervalProps = React.PropsWithChildren<{
days?: number;
hours?: number;
milliseconds?: number;
minutes?: number;
months?: number;
quarters?: number;
seconds?: number;
weeks?: number;
years?: number;
}>;
declare const AggregationInterval: ((props: IAggregationIntervalProps) => React.FunctionComponentElement<React.PropsWithChildren<{
days?: number | undefined;
hours?: number | undefined;
milliseconds?: number | undefined;
minutes?: number | undefined;
months?: number | undefined;
quarters?: number | undefined;
seconds?: number | undefined;
weeks?: number | undefined;
years?: number | undefined;
} & {
children?: React.ReactNode;
} & {
elementDescriptor: import("./core/configuration/react/element").IElementDescriptor;
}>>) & NestedComponentMeta;
type IAnimationProps = React.PropsWithChildren<{
duration?: number;
easing?: AnimationEaseMode;
enabled?: boolean;
maxPointCountSupported?: number;
}>;
declare const Animation: ((props: IAnimationProps) => React.FunctionComponentElement<React.PropsWithChildren<{
duration?: number | undefined;
easing?: AnimationEaseMode | undefined;
enabled?: boolean | undefined;
maxPointCountSupported?: number | undefined;
} & {
children?: React.ReactNode;
} & {
elementDescriptor: import("./core/configuration/react/element").IElementDescriptor;
}>>) & NestedComponentMeta;
type IAnnotationProps = React.PropsWithChildren<{
allowDragging?: boolean;
argument?: Date | number | string | undefined;
arrowLength?: number;
arrowWidth?: number;
axis?: string | undefined;
border?: Record<string, any> | {
color?: string;
cornerRadius?: number;
dashStyle?: DashStyle;
opacity?: number | undefined;
visible?: boolean;
width?: number;
};
color?: string;
customizeTooltip?: ((annotation: dxChartAnnotationConfig | any) => Record<string, any>) | undefined;
data?: any;
description?: string | undefined;
font?: ChartsFont;
height?: number | undefined;
image?: Record<string, any> | string | {
height?: number;
url?: string | undefined;
width?: number;
};
name?: string | undefined;
offsetX?: number | undefined;
offsetY?: number | undefined;
opacity?: number;
paddingLeftRight?: number;
paddingTopBottom?: number;
series?: string | undefined;
shadow?: Record<string, any> | {
blur?: number;
color?: string;
offsetX?: number;
offsetY?: number;
opacity?: number;
};
template?: ((annotation: dxChartAnnotationConfig | any, element: any) => string | any) | template | undefined;
text?: string | undefined;
textOverflow?: TextOverflow;
tooltipEnabled?: boolean;
tooltipTemplate?: ((annotation: dxChartAnnotationConfig | any, element: any) => string | any) | template | undefined;
type?: AnnotationType | undefined;
value?: Date | number | string | undefined;
width?: number | undefined;
wordWrap?: WordWrap;
x?: number | undefined;
y?: number | undefined;
render?: (...params: any) => React.ReactNode;
component?: React.ComponentType<any>;
tooltipRender?: (...params: any) => React.ReactNode;
tooltipComponent?: React.ComponentType<any>;
}>;
declare const Annotation: ((props: IAnnotationProps) => React.FunctionComponentElement<React.PropsWithChildren<{
allowDragging?: boolean | undefined;
argument?: Date | number | string | undefined;
arrowLength?: number | undefined;
arrowWidth?: number | undefined;
axis?: string | undefined;
border?: Record<string, any> | {
color?: string | undefined;
cornerRadius?: number | undefined;
dashStyle?: DashStyle | undefined;
opacity?: number | undefined;
visible?: boolean | undefined;
width?: number | undefined;
} | undefined;
color?: string | undefined;
customizeTooltip?: ((annotation: dxChartAnnotationConfig | any) => Record<string, any>) | undefined;
data?: any;
description?: string | undefined;
font?: ChartsFont | undefined;
height?: number | undefined;
image?: string | Record<string, any> | {
height?: number | undefined;
url?: string | undefined;
width?: number | undefined;
} | undefined;
name?: string | undefined;
offsetX?: number | undefined;
offsetY?: number | undefined;
opacity?: number | undefined;
paddingLeftRight?: number | undefined;
paddingTopBottom?: number | undefined;
series?: string | undefined;
shadow?: Record<string, any> | {
blur?: number | undefined;
color?: string | undefined;
offsetX?: number | undefined;
offsetY?: number | undefined;
opacity?: number | undefined;
} | undefined;
template?: template | ((annotation: dxChartAnnotationConfig | any, element: any) => string | any) | undefined;
text?: string | undefined;
textOverflow?: TextOverflow | undefined;
tooltipEnabled?: boolean | undefined;
tooltipTemplate?: template | ((annotation: dxChartAnnotationConfig | any, element: any) => string | any) | undefined;
type?: AnnotationType | undefined;
value?: Date | number | string | undefined;
width?: number | undefined;
wordWrap?: WordWrap | undefined;
x?: number | undefined;
y?: number | undefined;
render?: ((...params: any) => React.ReactNode) | undefined;
component?: React.ComponentType<any> | undefined;
tooltipRender?: ((...params: any) => React.ReactNode) | undefined;
tooltipComponent?: React.ComponentType<any> | undefined;
} & {
children?: React.ReactNode;
} & {
elementDescriptor: import("./core/configuration/react/element").IElementDescriptor;
}>>) & NestedComponentMeta;
type IAnnotationBorderProps = React.PropsWithChildren<{
color?: string;
cornerRadius?: number;
dashStyle?: DashStyle;
opacity?: number | undefined;
visible?: boolean;
width?: number;
}>;
declare const AnnotationBorder: ((props: IAnnotationBorderProps) => React.FunctionComponentElement<React.PropsWithChildren<{
color?: string | undefined;
cornerRadius?: number | undefined;
dashStyle?: DashStyle | undefined;
opacity?: number | undefined;
visible?: boolean | undefined;
width?: number | undefined;
} & {
children?: React.ReactNode;
} & {
elementDescriptor: import("./core/configuration/react/element").IElementDescriptor;
}>>) & NestedComponentMeta;
type IAnnotationImageProps = React.PropsWithChildren<{
height?: number;
url?: string | undefined;
width?: number;
}>;
declare const AnnotationImage: ((props: IAnnotationImageProps) => React.FunctionComponentElement<React.PropsWithChildren<{
height?: number | undefined;
url?: string | undefined;
width?: number | undefined;
} & {
children?: React.ReactNode;
} & {
elementDescriptor: import("./core/configuration/react/element").IElementDescriptor;
}>>) & NestedComponentMeta;
type IArgumentAxisProps = React.PropsWithChildren<{
aggregateByCategory?: boolean;
aggregatedPointsPosition?: AggregatedPointsPosition;
aggregationGroupWidth?: number | undefined;
aggregationInterval?: number | Record<string, any> | 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?: Record<string, any> | {
color?: string;
line?: ScaleBreakLineStyle;
width?: number;
};
categories?: Array<Date | number | string>;
color?: string;
constantLines?: Array<Record<string, any>> | {
color?: string;
dashStyle?: DashStyle;
displayBehindSeries?: boolean;
extendAxis?: boolean;
label?: Record<string, any> | {
font?: ChartsFont;
horizontalAlignment?: HorizontalAlignment;
position?: RelativePosition;
text?: string | undefined;
verticalAlignment?: VerticalAlignment;
visible?: boolean;
};
paddingLeftRight?: number;
paddingTopBottom?: number;
value?: Date | number | string | undefined;
width?: number;
}[];
constantLineStyle?: Record<string, any> | {
color?: string;
dashStyle?: DashStyle;
label?: Record<string, any> | {
font?: ChartsFont;
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?: Record<string, any> | {
color?: string;
opacity?: number | undefined;
visible?: boolean;
width?: number;
};
holidays?: Array<Date | string> | Array<number>;
hoverMode?: ArgumentAxisHoverMode;
inverted?: boolean;
label?: Record<string, any> | {
alignment?: HorizontalAlignment | undefined;
customizeHint?: ((argument: {
value: Date | number | string;
valueText: string;
}) => string);
customizeText?: ((argument: {
value: Date | number | string;
valueText: string;
}) => string);
displayMode?: ChartLabelDisplayMode;
font?: ChartsFont;
format?: LocalizationFormat | undefined;
indentFromAxis?: number;
overlappingBehavior?: ChartsAxisLabelOverlap;
position?: Position | RelativePosition;
rotationAngle?: number;
staggeringSpacing?: number;
template?: ((data: {
value: Date | number | string;
valueText: string;
}, element: any) => string | any) | template | undefined;
textOverflow?: TextOverflow;
visible?: boolean;
wordWrap?: WordWrap;
};
linearThreshold?: number | undefined;
logarithmBase?: number;
maxValueMargin?: number | undefined;
minorGrid?: Record<string, any> | {
color?: string;
opacity?: number | undefined;
visible?: boolean;
width?: number;
};
minorTick?: Record<string, any> | {
color?: string;
length?: number;
opacity?: number;
shift?: number;
visible?: boolean;
width?: number;
};
minorTickCount?: number | undefined;
minorTickInterval?: number | Record<string, any> | TimeInterval | {
days?: number;
hours?: number;
milliseconds?: number;
minutes?: number;
months?: number;
quarters?: number;
seconds?: number;
weeks?: number;
years?: number;
};
minValueMargin?: number | undefined;
minVisualRangeLength?: number | Record<string, any> | 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?: Array<Record<string, any>> | {
color?: string | undefined;
endValue?: Date | number | string | undefined;
label?: Record<string, any> | {
font?: ChartsFont;
horizontalAlignment?: HorizontalAlignment;
text?: string | undefined;
verticalAlignment?: VerticalAlignment;
};
paddingLeftRight?: number;
paddingTopBottom?: number;
startValue?: Date | number | string | undefined;
}[];
stripStyle?: Record<string, any> | {
label?: Record<string, any> | {
font?: ChartsFont;
horizontalAlignment?: HorizontalAlignment;
verticalAlignment?: VerticalAlignment;
};
paddingLeftRight?: number;
paddingTopBottom?: number;
};
tick?: Record<string, any> | {
color?: string;
length?: number;
opacity?: number | undefined;
shift?: number;
visible?: boolean;
width?: number;
};
tickInterval?: number | Record<string, any> | TimeInterval | {
days?: number;
hours?: number;
milliseconds?: number;
minutes?: number;
months?: number;
quarters?: number;
seconds?: number;
weeks?: number;
years?: number;
};
title?: Record<string, any> | string | {
alignment?: HorizontalAlignment;
font?: ChartsFont;
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>;
defaultCategories?: Array<Date | number | string>;
onCategoriesChange?: (value: Array<Date | number | string>) => void;
defaultVisualRange?: Array<Date | number | string> | CommonChartTypes.VisualRange;
onVisualRangeChange?: (value: Array<Date | number | string> | CommonChartTypes.VisualRange) => void;
}>;
declare const ArgumentAxis: ((props: IArgumentAxisProps) => React.FunctionComponentElement<React.PropsWithChildren<{
aggregateByCategory?: boolean | undefined;
aggregatedPointsPosition?: AggregatedPointsPosition | undefined;
aggregationGroupWidth?: number | undefined;
aggregationInterval?: number | Record<string, any> | TimeInterval | {
days?: number | undefined;
hours?: number | undefined;
milliseconds?: number | undefined;
minutes?: number | undefined;
months?: number | undefined;
quarters?: number | undefined;
seconds?: number | undefined;
weeks?: number | undefined;
years?: number | undefined;
} | undefined;
allowDecimals?: boolean | undefined;
argumentType?: ChartsDataType | undefined;
axisDivisionFactor?: number | undefined;
breaks?: ScaleBreak[] | {
endValue?: Date | number | string | undefined;
startValue?: Date | number | string | undefined;
}[] | undefined;
breakStyle?: Record<string, any> | {
color?: string | undefined;
line?: ScaleBreakLineStyle | undefined;
width?: number | undefined;
} | undefined;
categories?: (string | number | Date)[] | undefined;
color?: string | undefined;
constantLines?: Record<string, any>[] | {
color?: string | undefined;
dashStyle?: DashStyle | undefined;
displayBehindSeries?: boolean | undefined;
extendAxis?: boolean | undefined;
label?: Record<string, any> | {
font?: ChartsFont | undefined;
horizontalAlignment?: HorizontalAlignment | undefined;
position?: RelativePosition | undefined;
text?: string | undefined;
verticalAlignment?: VerticalAlignment | undefined;
visible?: boolean | undefined;
} | undefined;
paddingLeftRight?: number | undefined;
paddingTopBottom?: number | undefined;
value?: Date | number | string | undefined;
width?: number | undefined;
}[] | undefined;
constantLineStyle?: Record<string, any> | {
color?: string | undefined;
dashStyle?: DashStyle | undefined;
label?: Record<string, any> | {
font?: ChartsFont | undefined;
horizontalAlignment?: HorizontalAlignment | undefined;
position?: RelativePosition | undefined;
verticalAlignment?: VerticalAlignment | undefined;
visible?: boolean | undefined;
} | undefined;
paddingLeftRight?: number | undefined;
paddingTopBottom?: number | undefined;
width?: number | undefined;
} | undefined;
customPosition?: Date | number | string | undefined;
customPositionAxis?: string | undefined;
discreteAxisDivisionMode?: DiscreteAxisDivisionMode | undefined;
endOnTick?: boolean | undefined;
grid?: Record<string, any> | {
color?: string | undefined;
opacity?: number | undefined;
visible?: boolean | undefined;
width?: number | undefined;
} | undefined;
holidays?: number[] | (string | Date)[] | undefined;
hoverMode?: ArgumentAxisHoverMode | undefined;
inverted?: boolean | undefined;
label?: Record<string, any> | {
alignment?: HorizontalAlignment | undefined;
customizeHint?: ((argument: {
value: Date | number | string;
valueText: string;
}) => string) | undefined;
customizeText?: ((argument: {
value: Date | number | string;
valueText: string;
}) => string) | undefined;
displayMode?: ChartLabelDisplayMode | undefined;
font?: ChartsFont | undefined;
format?: LocalizationFormat | undefined;
indentFromAxis?: number | undefined;
overlappingBehavior?: ChartsAxisLabelOverlap | undefined;
position?: Position | RelativePosition | undefined;
rotationAngle?: number | undefined;
staggeringSpacing?: number | undefined;
template?: template | ((data: {
value: Date | number | string;
valueText: string;
}, element: any) => string | any) | undefined;
textOverflow?: TextOverflow | undefined;
visible?: boolean | undefined;
wordWrap?: WordWrap | undefined;
} | undefined;
linearThreshold?: number | undefined;
logarithmBase?: number | undefined;
maxValueMargin?: number | undefined;
minorGrid?: Record<string, any> | {
color?: string | undefined;
opacity?: number | undefined;
visible?: boolean | undefined;
width?: number | undefined;
} | undefined;
minorTick?: Record<string, any> | {
color?: string | undefined;
length?: number | undefined;
opacity?: number | undefined;
shift?: number | undefined;
visible?: boolean | undefined;
width?: number | undefined;
} | undefined;
minorTickCount?: number | undefined;
minorTickInterval?: number | Record<string, any> | TimeInterval | {
days?: number | undefined;
hours?: number | undefined;
milliseconds?: number | undefined;
minutes?: number | undefined;
months?: number | undefined;
quarters?: number | undefined;
seconds?: number | undefined;
weeks?: number | undefined;
years?: number | undefined;
} | undefined;
minValueMargin?: number | undefined;
minVisualRangeLength?: number | Record<string, any> | 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 | undefined;
position?: Position | undefined;
singleWorkdays?: number[] | (string | Date)[] | undefined;
strips?: Record<string, any>[] | {
color?: string | undefined;
endValue?: Date | number | string | undefined;
label?: Record<string, any> | {
font?: ChartsFont | undefined;
horizontalAlignment?: HorizontalAlignment | undefined;
text?: string | undefined;
verticalAlignment?: VerticalAlignment | undefined;
} | undefined;
paddingLeftRight?: number | undefined;
paddingTopBottom?: number | undefined;
startValue?: Date | number | string | undefined;
}[] | undefined;
stripStyle?: Record<string, any> | {
label?: Record<string, any> | {
font?: ChartsFont | undefined;
horizontalAlignment?: HorizontalAlignment | undefined;
verticalAlignment?: VerticalAlignment | undefined;
} | undefined;
paddingLeftRight?: number | undefined;
paddingTopBottom?: number | undefined;
} | undefined;
tick?: Record<string, any> | {
color?: string | undefined;
length?: number | undefined;
opacity?: number | undefined;
shift?: number | undefined;
visible?: boolean | undefined;
width?: number | undefined;
} | undefined;
tickInterval?: number | Record<string, any> | TimeInterval | {
days?: number | undefined;
hours?: number | undefined;
milliseconds?: number | undefined;
minutes?: number | undefined;
months?: number | undefined;
quarters?: number | undefined;
seconds?: number | undefined;
weeks?: number | undefined;
years?: number | undefined;
} | undefined;
title?: string | Record<string, any> | {
alignment?: HorizontalAlignment | undefined;
font?: ChartsFont | undefined;
margin?: number | undefined;
text?: string | undefined;
textOverflow?: TextOverflow | undefined;
wordWrap?: WordWrap | undefined;
} | undefined;
type?: AxisScaleType | undefined;
valueMarginsEnabled?: boolean | undefined;
visible?: boolean | undefined;
visualRange?: (string | number | Date)[] | CommonChartTypes.VisualRange | undefined;
visualRangeUpdateMode?: VisualRangeUpdateMode | undefined;
wholeRange?: Array<Date | number | string> | undefined | CommonChartTypes.VisualRange;
width?: number | undefined;
workdaysOnly?: boolean | undefined;
workWeek?: number[] | undefined;
defaultCategories?: (string | number | Date)[] | undefined;
onCategoriesChange?: ((value: Array<Date | number | string>) => void) | undefined;
defaultVisualRange?: (string | number | Date)[] | CommonChartTypes.VisualRange | undefined;
onVisualRangeChange?: ((value: Array<Date | number | string> | CommonChartTypes.VisualRange) => void) | undefined;
} & {
children?: React.ReactNode;
} & {
elementDescriptor: import("./core/configuration/react/element").IElementDescriptor;
}>>) & NestedComponentMeta;
type IArgumentFormatProps = React.PropsWithChildren<{
currency?: string;
formatter?: ((value: number | Date) => string);
parser?: ((value: string) => number | Date);
precision?: number;
type?: CommonFormat | string;
useCurrencyAccountingStyle?: boolean;
}>;
declare const ArgumentFormat: ((props: IArgumentFormatProps) => React.FunctionComponentElement<React.PropsWithChildren<{
currency?: string | undefined;
formatter?: ((value: number | Date) => string) | undefined;
parser?: ((value: string) => number | Date) | undefined;
precision?: number | undefined;
type?: string | undefined;
useCurrencyAccountingStyle?: boolean | undefined;
} & {
children?: React.ReactNode;
} & {
elementDescriptor: import("./core/configuration/react/element").IElementDescriptor;
}>>) & NestedComponentMeta;
type IAxisConstantLineStyleProps = React.PropsWithChildren<{
color?: string;
dashStyle?: DashStyle;
label?: Record<string, any> | {
font?: ChartsFont;
horizontalAlignment?: HorizontalAlignment;
position?: RelativePosition;
verticalAlignment?: VerticalAlignment;
visible?: boolean;
};
paddingLeftRight?: number;
paddingTopBottom?: number;
width?: number;
}>;
declare const AxisConstantLineStyle: ((props: IAxisConstantLineStyleProps) => React.FunctionComponentElement<React.PropsWithChildren<{
color?: string | undefined;
dashStyle?: DashStyle | undefined;
label?: Record<string, any> | {
font?: ChartsFont | undefined;
horizontalAlignment?: HorizontalAlignment | undefined;
position?: RelativePosition | undefined;
verticalAlignment?: VerticalAlignment | undefined;
visible?: boolean | undefined;
} | undefined;
paddingLeftRight?: number | undefined;
paddingTopBottom?: number | undefined;
width?: number | undefined;
} & {
children?: React.ReactNode;
} & {
elementDescriptor: import("./core/configuration/react/element").IElementDescriptor;
}>>) & NestedComponentMeta;
type IAxisConstantLineStyleLabelProps = React.PropsWithChildren<{
font?: ChartsFont;
horizontalAlignment?: HorizontalAlignment;
position?: RelativePosition;
verticalAlignment?: VerticalAlignment;
visible?: boolean;
}>;
declare const AxisConstantLineStyleLabel: ((props: IAxisConstantLineStyleLabelProps) => React.FunctionComponentElement<React.PropsWithChildren<{
font?: ChartsFont | undefined;
horizontalAlignment?: HorizontalAlignment | undefined;
position?: RelativePosition | undefined;
verticalAlignment?: VerticalAlignment | undefined;
visible?: boolean | undefined;
} & {
children?: React.ReactNode;
} & {
elementDescriptor: import("./core/configuration/react/element").IElementDescriptor;
}>>) & NestedComponentMeta;
type IAxisLabelProps = React.PropsWithChildren<{
alignment?: HorizontalAlignment | undefined;
customizeHint?: ((argument: {
value: Date | number | string;
valueText: string;
}) => string);
customizeText?: ((argument: {
value: Date | number | string;
valueText: string;
}) => string);
displayMode?: ChartLabelDisplayMode;
font?: ChartsFont;
format?: LocalizationFormat | undefined;
indentFromAxis?: number;
overlappingBehavior?: ChartsAxisLabelOverlap;
position?: Position | RelativePosition;
rotationAngle?: number;
staggeringSpacing?: number;
template?: ((data: {
value: Date | number | string;
valueText: string;
}, element: any) => string | any) | template | undefined;
textOverflow?: TextOverflow;
visible?: boolean;
wordWrap?: WordWrap;
render?: (...params: any) => React.ReactNode;
component?: React.ComponentType<any>;
}>;
declare const AxisLabel: ((props: IAxisLabelProps) => React.FunctionComponentElement<React.PropsWithChildren<{
alignment?: HorizontalAlignment | undefined;
customizeHint?: ((argument: {
value: Date | number | string;
valueText: string;
}) => string) | undefined;
customizeText?: ((argument: {
value: Date | number | string;
valueText: string;
}) => string) | undefined;
displayMode?: ChartLabelDisplayMode | undefined;
font?: ChartsFont | undefined;
format?: LocalizationFormat | undefined;
indentFromAxis?: number | undefined;
overlappingBehavior?: ChartsAxisLabelOverlap | undefined;
position?: Position | RelativePosition | undefined;
rotationAngle?: number | undefined;
staggeringSpacing?: number | undefined;
template?: template | ((data: {
value: Date | number | string;
valueText: string;
}, element: any) => string | any) | undefined;
textOverflow?: TextOverflow | undefined;
visible?: boolean | undefined;
wordWrap?: WordWrap | undefined;
render?: ((...params: any) => React.ReactNode) | undefined;
component?: React.ComponentType<any> | undefined;
} & {
children?: React.ReactNode;
} & {
elementDescriptor: import("./core/configuration/react/element").IElementDescriptor;
}>>) & NestedComponentMeta;
type IAxisTitleProps = React.PropsWithChildren<{
alignment?: HorizontalAlignment;
font?: ChartsFont;
margin?: number;
text?: string | undefined;
textOverflow?: TextOverflow;
wordWrap?: WordWrap;
}>;
declare const AxisTitle: ((props: IAxisTitleProps) => React.FunctionComponentElement<React.PropsWithChildren<{
alignment?: HorizontalAlignment | undefined;
font?: ChartsFont | undefined;
margin?: number | undefined;
text?: string | undefined;
textOverflow?: TextOverflow | undefined;
wordWrap?: WordWrap | undefined;
} & {
children?: React.ReactNode;
} & {
elementDescriptor: import("./core/configuration/react/element").IElementDescriptor;
}>>) & NestedComponentMeta;
type IBackgroundColorProps = React.PropsWithChildren<{
base?: string | undefined;
fillId?: string | undefined;
}>;
declare const BackgroundColor: ((props: IBackgroundColorProps) => React.FunctionComponentElement<React.PropsWithChildren<{
base?: string | undefined;
fillId?: string | undefined;
} & {
children?: React.ReactNode;
} & {
elementDescriptor: import("./core/configuration/react/element").IElementDescriptor;
}>>) & NestedComponentMeta;
type IBorderProps = React.PropsWithChildren<{
color?: string | undefined;
cornerRadius?: number;
dashStyle?: DashStyle | undefined;
opacity?: number | undefined;
visible?: boolean;
width?: number;
bottom?: boolean;
left?: boolean;
right?: boolean;
top?: boolean;
}>;
declare const Border: ((props: IBorderProps) => React.FunctionComponentElement<React.PropsWithChildren<{
color?: string | undefined;
cornerRadius?: number | undefined;
dashStyle?: DashStyle | undefined;
opacity?: number | undefined;
visible?: boolean | undefined;
width?: number | undefined;
bottom?: boolean | undefined;
left?: boolean | undefined;
right?: boolean | undefined;
top?: boolean | undefined;
} & {
children?: React.ReactNode;
} & {
elementDescriptor: import("./core/configuration/react/element").IElementDescriptor;
}>>) & NestedComponentMeta;
type IBreakProps = React.PropsWithChildren<{
endValue?: Date | number | string | undefined;
startValue?: Date | number | string | undefined;
}>;
declare const Break: ((props: IBreakProps) => React.FunctionComponentElement<React.PropsWithChildren<{
endValue?: Date | number | string | undefined;
startValue?: Date | number | string | undefined;
} & {
children?: React.ReactNode;
} & {
elementDescriptor: import("./core/configuration/react/element").IElementDescriptor;
}>>) & NestedComponentMeta;
type IBreakStyleProps = React.PropsWithChildren<{
color?: string;
line?: ScaleBreakLineStyle;
width?: number;
}>;
declare const BreakStyle: ((props: IBreakStyleProps) => React.FunctionComponentElement<React.PropsWithChildren<{
color?: string | undefined;
line?: ScaleBreakLineStyle | undefined;
width?: number | undefined;
} & {
children?: React.ReactNode;
} & {
elementDescriptor: import("./core/configuration/react/element").IElementDescriptor;
}>>) & NestedComponentMeta;
type IChartTitleProps = React.PropsWithChildren<{
font?: ChartsFont;
horizontalAlignment?: HorizontalAlignment;
margin?: number | Record<string, any> | {
bottom?: number;
left?: number;
right?: number;
top?: number;
};
placeholderSize?: number | undefined;
subtitle?: Record<string, any> | string | {
font?: ChartsFont;
offset?: number;
text?: string;
textOverflow?: TextOverflow;
wordWrap?: WordWrap;
};
text?: string;
textOverflow?: TextOverflow;
verticalAlignment?: VerticalEdge;
wordWrap?: WordWrap;
}>;
declare const ChartTitle: ((props: IChartTitleProps) => React.FunctionComponentElement<React.PropsWithChildren<{
font?: ChartsFont | undefined;
horizontalAlignment?: HorizontalAlignment | undefined;
margin?: number | Record<string, any> | {
bottom?: number | undefined;
left?: number | undefined;
right?: number | undefined;
top?: number | undefined;
} | undefined;
placeholderSize?: number | undefined;
subtitle?: string | Record<string, any> | {
font?: ChartsFont | undefined;
offset?: number | undefined;
text?: string | undefined;
textOverflow?: TextOverflow | undefined;
wordWrap?: WordWrap | undefined;
} | undefined;
text?: string | undefined;
textOverflow?: TextOverflow | undefined;
verticalAlignment?: VerticalEdge | undefined;
wordWrap?: WordWrap | undefined;
} & {
children?: React.ReactNode;
} & {
elementDescriptor: import("./core/configuration/react/element").IElementDescriptor;
}>>) & NestedComponentMeta;
type IChartTitleSubtitleProps = React.PropsWithChildren<{
font?: ChartsFont;
offset?: number;
text?: string;
textOverflow?: TextOverflow;
wordWrap?: WordWrap;
}>;
declare const ChartTitleSubtitle: ((props: IChartTitleSubtitleProps) => React.FunctionComponentElement<React.PropsWithChildren<{
font?: ChartsFont | undefined;
offset?: number | undefined;
text?: string | undefined;
textOverflow?: TextOverflow | undefined;
wordWrap?: WordWrap | undefined;
} & {
children?: React.ReactNode;
} & {
elementDescriptor: import("./core/configuration/react/element").IElementDescriptor;
}>>) & NestedComponentMeta;
type IColorProps = React.PropsWithChildren<{
base?: string | undefined;
fillId?: string | undefined;
}>;
declare const Color: ((props: IColorProps) => React.FunctionComponentElement<React.PropsWithChildren<{
base?: string | undefined;
fillId?: string | undefined;
} & {
children?: React.ReactNode;
} & {
elementDescriptor: import("./core/configuration/react/element").IElementDescriptor;
}>>) & NestedComponentMeta;
type ICommonAnnotationSettingsProps = React.PropsWithChildren<{
allowDragging?: boolean;
argument?: Date | number | string | undefined;
arrowLength?: number;
arrowWidth?: number;
axis?: string | undefined;
border?: Record<string, any> | {
color?: string;
cornerRadius?: number;
dashStyle?: DashStyle;
opacity?: number | undefined;
visible?: boolean;
width?: number;
};
color?: string;
customizeTooltip?: ((annotation: dxChartAnnotationConfig | any) => Record<string, any>) | undefined;
data?: any;
description?: string | undefined;
font?: ChartsFont;
height?: number | undefined;
image?: Record<string, any> | string | {
height?: number;
url?: string | undefined;
width?: number;
};
offsetX?: number | undefined;
offsetY?: number | undefined;
opacity?: number;
paddingLeftRight?: number;
paddingTopBottom?: number;
series?: string | undefined;
shadow?: Record<string, any> | {
blur?: number;
color?: string;
offsetX?: number;
offsetY?: number;
opacity?: number;
};
template?: ((annotation: dxChartAnnotationConfig | any, element: any) => string | any) | template | undefined;
text?: string | undefined;
textOverflow?: TextOverflow;
tooltipEnabled?: boolean;
tooltipTemplate?: ((annotation: dxChartAnnotationConfig | any, element: any) => string | any) | template | undefined;
type?: AnnotationType | undefined;
value?: Date | number | string | undefined;
width?: number | undefined;
wordWrap?: WordWrap;
x?: number | undefined;
y?: number | undefined;
render?: (...params: any) => React.ReactNode;
component?: React.ComponentType<any>;
tooltipRender?: (...params: any) => React.ReactNode;
tooltipComponent?: React.ComponentType<any>;
}>;
declare const CommonAnnotationSettings: ((props: ICommonAnnotationSettingsProps) => React.FunctionComponentElement<React.PropsWithChildren<{
allowDragging?: boolean | undefined;
argument?: Date | number | string | undefined;
arrowLength?: number | undefined;
arrowWidth?: number | undefined;
axis?: string | undefined;
border?: Record<string, any> | {
color?: string | undefined;
cornerRadius?: number | undefined;
dashStyle?: DashStyle | undefined;
opacity?: number | undefined;
visible?: boolean | undefined;
width?: number | undefined;
} | undefined;
color?: string | undefined;
customizeTooltip?: ((annotation: dxChartAnnotationConfig | any) => Record<string, any>) | undefined;
data?: any;
description?: string | undefined;
font?: ChartsFont | undefined;
height?: number | undefined;
image?: string | Record<string, any> | {
height?: number | undefined;
url?: string | undefined;
width?: number | undefined;
} | undefined;
offsetX?: number | undefined;
offsetY?: number | undefined;
opacity?: number | undefined;
paddingLeftRight?: number | undefined;
paddingTopBottom?: number | undefined;
series?: string | undefined;
shadow?: Record<string, any> | {
blur?: number | undefined;
color?: string | undefined;
offsetX?: number | undefined;
offsetY?: number | undefined;
opacity?: number | undefined;
} | undefined;
template?: template | ((annotation: dxChartAnnotationConfig | any, element: any) => string | any) | undefined;
text?: string | undefined;
textOverflow?: TextOverflow | undefined;
tooltipEnabled?: boolean | undefined;
tooltipTemplate?: template | ((annotation: dxChartAnnotationConfig | any, element: any) => string | any) | undefined;
type?: AnnotationType | undefined;
value?: Date | number | string | undefined;
width?: number | undefined;
wordWrap?: WordWrap | undefined;
x?: number | undefined;
y?: number | undefined;
render?: ((...params: any) => React.ReactNode) | undefined;
component?: React.ComponentType<any> | undefined;
tooltipRender?: ((...params: any) => React.ReactNode) | undefined;
tooltipComponent?: React.ComponentType<any> | undefined;
} & {
children?: React.ReactNode;
} & {
elementDescriptor: import("./core/configuration/react/element").IElementDescriptor;
}>>) & NestedComponentMeta;
type ICommonAxisSettingsProps = React.PropsWithChildren<{
aggregatedPointsPosition?: AggregatedPointsPosition;
allowDecimals?: boolean | undefined;
breakStyle?: Record<string, any> | {
color?: string;
line?: ScaleBreakLineStyle;
width?: number;
};
color?: string;
constantLineStyle?: Record<string, any> | {
color?: string;
dashStyle?: DashStyle;
label?: Record<string, any> | {
font?: ChartsFont;
position?: RelativePosition;
visible?: boolean;
};
paddingLeftRight?: number;
paddingTopBottom?: number;
width?: number;
};
discreteAxisDivisionMode?: DiscreteAxisDivisionMode;
endOnTick?: boolean | undefined;
grid?: Record<string, any> | {
color?: string;
opacity?: number | undefined;
visible?: boolean;
width?: number;
};
inverted?: boolean;
label?: Record<string, any> | {
alignment?: HorizontalAlignment | undefined;
displayMode?: ChartLabelDisplayMode;
font?: ChartsFont;
indentFromAxis?: number;
overlappingBehavior?: ChartsAxisLabelOverlap;
position?: Position | RelativePosition;
rotationAngle?: number;
staggeringSpacing?: number;
template?: ((data: {
value: Date | number | string;
valueText: string;
}, element: any) => string | any) | template | undefined;
textOverflow?: TextOverflow;
visible?: boolean;
wordWrap?: WordWrap;
};
maxValueMargin?: number | undefined;
minorGrid?: Record<string, any> | {
color?: string;
opacity?: number | undefined;
visible?: boolean;
width?: number;
};
minorTick?: Record<string, any> | {
color?: string;
length?: number;
opacity?: number;
shift?: number;
visible?: boolean;
width?: number;
};
minValueMargin?: number | undefined;
opacity?: number | undefined;
placeholderSize?: number;
stripStyle?: Record<string, any> | {
label?: Record<string, any> | {
font?: ChartsFont;
horizontalAlignment?: HorizontalAlignment;
verticalAlignment?: VerticalAlignment;
};
paddingLeftRight?: number;
paddingTopBottom?: number;
};
tick?: Record<string, any> | {
color?: string;
length?: number;
opacity?: number | undefined;
shift?: number;
visible?: boolean;
width?: number;
};
title?: Record<string, any> | {
alignment?: HorizontalAlignment;
font?: ChartsFont;
margin?: number;
textOverflow?: TextOverflow;
wordWrap?: WordWrap;
};
valueMarginsEnabled?: boolean;
visible?: boolean;
width?: number;
}>;
declare const CommonAxisSettings: ((props: ICommonAxisSettingsProps) => React.FunctionComponentElement<React.PropsWithChildren<{
aggregatedPointsPosition?: AggregatedPointsPosition | undefined;
allowDecimals?: boolean | undefined;
breakStyle?: Record<string, any> | {
color?: string | undefined;
line?: ScaleBreakLineStyle | undefined;
width?: number | undefined;
} | undefined;
color?: string | undefined;
constantLineStyle?: Record<string, any> | {
color?: string | undefined;
dashStyle?: DashStyle | undefined;
label?: Record<string, any> | {
font?: ChartsFont | undefined;
position?: RelativePosition | undefined;
visible?: boolean | undefined;
} | undefined;
paddingLeftRight?: number | undefined;
paddingTopBottom?: number | undefined;
width?: number | undefined;
} | undefined;
discreteAxisDivisionMode?: DiscreteAxisDivisionMode | undefined;
endOnTick?: boolean | undefined;
grid?: Record<string, any> | {
color?: string | undefined;
opacity?: number | undefined;
visible?: boolean | undefined;
width?: number | undefined;
} | undefined;
inverted?: boolean | undefined;
label?: Record<string, any> | {
alignment?: HorizontalAlignment | undefined;
displayMode?: ChartLabelDisplayMode | undefined;
font?: ChartsFont | undefined;
indentFromAxis?: number | undefined;
overlappingBehavior?: ChartsAxisLabelOverlap | undefined;
position?: Position | RelativePosition | undefined;
rotationAngle?: number | undefined;
staggeringSpacing?: number | undefined;
template?: template | ((data: {
value: Date | number | string;
valueText: string;
}, element: any) => string | any) | undefined;
textOverflow?: TextOverflow | undefined;
visible?: boolean | undefined;
wordWrap?: WordWrap | undefined;
} | undefined;
maxValueMargin?: number | undefined;
minorGrid?: Record<string, any> | {
color?: string | undefined;
opacity?: number | undefined;
visible?: boolean | undefined;
width?: number | undefined;
} | undefined;
minorTick?: Record<string, any> | {
color?: string | undefined;
length?: number | undefined;
opacity?: number | undefined;
shift?: number | undefined;
visible?: boolean | undefined;
width?: number | undefined;
} | undefined;
minValueMargin?: number | undefined;
opacity?: number | undefined;
placeholderSize?: number | undefined;
stripStyle?: Record<string, any> | {
label?: Record<string, any> | {
font?: ChartsFont | undefined;
horizontalAlignment?: HorizontalAlignment | undefined;
verticalAlignment?: VerticalAlignment | undefined;
} | undefined;
paddingLeftRight?: number | undefined;
paddingTopBottom?: number | undefined;
} | undefined;
tick?: Record<string, any> | {
color?: string | undefined;
length?: number | undefined;
opacity?: number | undefined;
shift?: number | undefined;
visible?: boolean | undefined;
width?: number | undefined;
} | undefined;
title?: Record<string, any> | {
alignment?: HorizontalAlignment | undefined;