@progress/kendo-vue-charts
Version:
1,117 lines (1,095 loc) • 466 kB
text/typescript
/**
* @license
*-------------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the package root for more information
*-------------------------------------------------------------------------------------------
*/
import { AutoBaseUnitSteps } from '../field-types/auto-base-unit-steps.interface';
import { AutoBaseUnitSteps as AutoBaseUnitSteps_3 } from '../../field-types/auto-base-unit-steps.interface';
import { AxisDefaults } from './option-types/axis-defaults.interface';
import { AxisDefaultsCrosshair as AxisDefaultsCrosshair_2 } from '../common/property-types';
import { AxisDefaultsCrosshairTooltip as AxisDefaultsCrosshairTooltip_2 } from '../../common/property-types';
import { AxisDefaultsLabels as AxisDefaultsLabels_2 } from '../common/property-types';
import { AxisDefaultsTitle as AxisDefaultsTitle_2 } from '../common/property-types';
import { AxisLabelClickEvent as AxisLabelClickEvent_2 } from '.';
import { AxisLabelVisualArgs as AxisLabelVisualArgs_2 } from '../../argument-types/axis-label-visual-args.interface';
import { AxisLabelVisualArgs as AxisLabelVisualArgs_3 } from '../../../argument-types/axis-label-visual-args.interface';
import { AxisLine as AxisLine_2 } from '../field-types/axis-line.interface';
import { AxisLine as AxisLine_3 } from '../../field-types/axis-line.interface';
import { AxisNoteVisualArgs as AxisNoteVisualArgs_2 } from '../../argument-types/axis-note-visual-args.interface';
import { AxisNoteVisualArgs as AxisNoteVisualArgs_3 } from '../../../argument-types/axis-note-visual-args.interface';
import { AxisTicks as AxisTicks_2 } from '../field-types/axis-ticks.interface';
import { AxisTicks as AxisTicks_3 } from '../../field-types/axis-ticks.interface';
import { Border as Border_2 } from '../field-types/border.interface';
import { Border as Border_3 } from '../../field-types/border.interface';
import { Border as Border_4 } from '../../../field-types/border.interface';
import { BulletTarget as BulletTarget_2 } from '../field-types/bullet-target.interface';
import { BulletTarget as BulletTarget_3 } from '../../field-types/bullet-target.interface';
import { CategoryAxis as CategoryAxis_2 } from '../option-types/category-axis-item.interface';
import { CategoryAxisCrosshair } from '../common/property-types';
import { CategoryAxisCrosshair as CategoryAxisCrosshair_3 } from '../../common/property-types';
import { CategoryAxisCrosshairTooltip as CategoryAxisCrosshairTooltip_2 } from '../../common/property-types';
import { CategoryAxisCrosshairTooltip as CategoryAxisCrosshairTooltip_3 } from '../../../common/property-types';
import { CategoryAxisLabels } from '../common/property-types';
import { CategoryAxisLabels as CategoryAxisLabels_3 } from '../../common/property-types';
import { CategoryAxisNotes } from '../common/property-types';
import { CategoryAxisNotes as CategoryAxisNotes_3 } from '../../common/property-types';
import { CategoryAxisNotesIcon as CategoryAxisNotesIcon_2 } from '../../common/property-types';
import { CategoryAxisNotesIcon as CategoryAxisNotesIcon_3 } from '../../../common/property-types';
import { CategoryAxisNotesLabel as CategoryAxisNotesLabel_2 } from '../../common/property-types';
import { CategoryAxisNotesLabel as CategoryAxisNotesLabel_3 } from '../../../common/property-types';
import { CategoryAxisRangeLabels } from '../common/property-types';
import { CategoryAxisRangeLabels as CategoryAxisRangeLabels_3 } from '../../common/property-types';
import { CategoryAxisSelect } from '../common/property-types';
import { CategoryAxisSelect as CategoryAxisSelect_3 } from '../../common/property-types';
import { CategoryAxisTitle } from '../common/property-types';
import { CategoryAxisTitle as CategoryAxisTitle_3 } from '../../common/property-types';
import { ComponentOptionsMixin } from 'vue';
import { ComponentProvideOptions } from 'vue';
import { createSankeyData as createSankeyData_2 } from '@progress/kendo-charts';
import { CrosshatchPattern } from '@progress/kendo-charts';
import { DateFormats as DateFormats_2 } from '../../field-types/date-formats.interface';
import { DateFormats as DateFormats_3 } from '../../../field-types/date-formats.interface';
import { DefineComponent } from 'vue';
import { DiagonalStripesPattern } from '@progress/kendo-charts';
import { DotsPattern } from '@progress/kendo-charts';
import { DragAction } from './field-types/drag-action.interface';
import { DragEndEvent as DragEndEvent_2 } from '.';
import { DragEvent as DragEvent_3 } from '.';
import { DragStartEvent as DragStartEvent_2 } from '.';
import { drawing } from '@progress/kendo-drawing';
import { Element as Element_2 } from '@progress/kendo-drawing';
import { ErrorBarLine as ErrorBarLine_2 } from '../../field-types/error-bar-line.interface';
import { ErrorBarLine as ErrorBarLine_3 } from '../../../field-types/error-bar-line.interface';
import { ErrorBarsVisualArgs as ErrorBarsVisualArgs_2 } from '../../argument-types/error-bars-visual-args.interface';
import { ErrorBarsVisualArgs as ErrorBarsVisualArgs_3 } from '../../../argument-types/error-bars-visual-args.interface';
import { ExtractPropTypes } from 'vue';
import { FocusHighlight } from '@progress/kendo-charts';
import { FocusHighlightBorder } from '@progress/kendo-charts';
import { geometry } from '@progress/kendo-drawing';
import { GridLines as GridLines_2 } from '../field-types/grid-lines.interface';
import { GridLines as GridLines_3 } from '../../field-types/grid-lines.interface';
import { GridPattern } from '@progress/kendo-charts';
import { Group } from '@progress/kendo-drawing';
import { HighlightLine as HighlightLine_2 } from '../../../field-types/highlight-line.interface';
import { HighlightToggleArgs as HighlightToggleArgs_2 } from '../../argument-types/highlight-toggle-args.interface';
import { HighlightToggleArgs as HighlightToggleArgs_3 } from '../../../argument-types/highlight-toggle-args.interface';
import { HighlightVisualArgs as HighlightVisualArgs_2 } from '../../argument-types/highlight-visual-args.interface';
import { HighlightVisualArgs as HighlightVisualArgs_3 } from '../../../argument-types/highlight-visual-args.interface';
import { LabelConnectors as LabelConnectors_2 } from '../field-types/label-connectors.interface';
import { LabelConnectors as LabelConnectors_3 } from '../../field-types/label-connectors.interface';
import { LabelRotation as LabelRotation_2 } from '../../field-types/label-rotation.interface';
import { LabelRotation as LabelRotation_3 } from '../../../field-types/label-rotation.interface';
import { LegendInactiveItems } from '../common/property-types';
import { LegendItem } from '../common/property-types';
import { LegendItemArea as LegendItemArea_2 } from '../../option-types/legend/item.interface';
import { LegendItemClickEvent as LegendItemClickEvent_2 } from '.';
import { LegendItemHighlight as LegendItemHighlight_2 } from '../../option-types/legend/item.interface';
import { LegendItemHoverEvent as LegendItemHoverEvent_2 } from '.';
import { LegendItemLine as LegendItemLine_2 } from '../../option-types/legend/item.interface';
import { LegendItemMarkers as LegendItemMarkers_2 } from '../../option-types/legend/item.interface';
import { LegendItemVisualArgs as LegendItemVisualArgs_2 } from '../../argument-types/legend-item-visual-args.interface';
import { LegendLabels } from '../field-types/legend-labels.interface';
import { LegendLabels as LegendLabels_3 } from '../../field-types/legend-labels.interface';
import { LegendTitle } from '../common/property-types';
import { Margin as Margin_2 } from '../field-types/margin.interface';
import { Margin as Margin_3 } from '../../field-types/margin.interface';
import { Margin as Margin_4 } from '../../../field-types/margin.interface';
import { MarkersVisualArgs as MarkersVisualArgs_2 } from '../../argument-types/markers-visual-args.interface';
import { MarkersVisualArgs as MarkersVisualArgs_3 } from '../../../argument-types/markers-visual-args.interface';
import { MousewheelSelect as MousewheelSelect_2 } from '../../field-types/mousewheel-select.interface';
import { MousewheelSelect as MousewheelSelect_3 } from '../../../field-types/mousewheel-select.interface';
import { MultiPath } from '@progress/kendo-drawing';
import { NavigatorHint } from '../common/property-types';
import { NavigatorSelect } from '../common/property-types';
import { NegativeBubbleValues as NegativeBubbleValues_2 } from '../field-types/negative-bubble-values.interface';
import { NegativeBubbleValues as NegativeBubbleValues_3 } from '../../field-types/negative-bubble-values.interface';
import { NoteClickEvent as NoteClickEvent_2 } from '.';
import { NoteHoverEvent as NoteHoverEvent_2 } from '.';
import { NoteLine as NoteLine_2 } from '../../field-types/note-line.interface';
import { NoteLine as NoteLine_3 } from '../../../field-types/note-line.interface';
import { Overlay as Overlay_2 } from '../field-types/overlay.interface';
import { Overlay as Overlay_3 } from '../../field-types/overlay.interface';
import { Padding as Padding_2 } from '../field-types/padding.interface';
import { Padding as Padding_3 } from '../../field-types/padding.interface';
import { Padding as Padding_4 } from '../../../field-types/padding.interface';
import { Pane } from './option-types/pane.interface';
import { Pane as Pane_3 } from '../option-types/pane.interface';
import { PaneDefaults } from './option-types/pane-defaults.interface';
import { PaneDefaultsTitle as PaneDefaultsTitle_2 } from '../common/property-types';
import { PanesTitle as PanesTitle_2 } from '../common/property-types';
import { PanesTitle as PanesTitle_3 } from '../../common/property-types';
import { PlotAreaClickEvent as PlotAreaClickEvent_2 } from '.';
import { PlotAreaHoverEvent as PlotAreaHoverEvent_2 } from '.';
import { PlotBand as PlotBand_2 } from '../field-types/plot-band.interface';
import { PlotBand as PlotBand_3 } from '../../field-types/plot-band.interface';
import { PropType } from 'vue';
import { PublicProps } from 'vue';
import { RenderEvent as RenderEvent_2 } from '.';
import { Sankey as Sankey_2 } from '@progress/kendo-charts';
import { SankeyData } from '@progress/kendo-charts';
import { SankeyEvent as SankeyEvent_2 } from '@progress/kendo-charts';
import { SankeyExportVisualOptions } from '@progress/kendo-charts';
import { SankeyLabel } from '@progress/kendo-charts';
import { SankeyLabelDefaults } from '@progress/kendo-charts';
import { SankeyLegend as SankeyLegend_2 } from './types';
import { SankeyLegendItem } from '@progress/kendo-charts';
import { SankeyLink } from '@progress/kendo-charts';
import { SankeyLinkDataItem } from '@progress/kendo-charts';
import { SankeyLinkDefaults } from '@progress/kendo-charts';
import { SankeyLinkHighlight } from '@progress/kendo-charts';
import { SankeyNode } from '@progress/kendo-charts';
import { SankeyNodeDataItem } from '@progress/kendo-charts';
import { SankeyNodeDefaults } from '@progress/kendo-charts';
import { SankeyOptions } from '@progress/kendo-charts';
import { SankeyTitle as SankeyTitle_2 } from './types';
import { SankeyTooltip as SankeyTooltip_2 } from './types';
import { SankeyTooltip as SankeyTooltip_3 } from '@progress/kendo-charts';
import { SankeyTooltipEvent } from '@progress/kendo-charts';
import { SelectEndEvent as SelectEndEvent_2 } from '.';
import { SelectEvent as SelectEvent_2 } from '.';
import { SelectStartEvent as SelectStartEvent_2 } from '.';
import { Series } from '../option-types/series-item.interface';
import { SeriesClickEvent as SeriesClickEvent_2 } from '.';
import { SeriesDefaults } from './option-types/series-defaults.interface';
import { SeriesDefaultsLabels as SeriesDefaultsLabels_2 } from '../common/property-types';
import { SeriesDefaultsLabelsFrom as SeriesDefaultsLabelsFrom_2 } from '../../common/property-types';
import { SeriesDefaultsLabelsTo as SeriesDefaultsLabelsTo_2 } from '../../common/property-types';
import { SeriesDefaultsNotes as SeriesDefaultsNotes_2 } from '../common/property-types';
import { SeriesDefaultsNotesIcon as SeriesDefaultsNotesIcon_2 } from '../../common/property-types';
import { SeriesDefaultsNotesLabel as SeriesDefaultsNotesLabel_2 } from '../../common/property-types';
import { SeriesDefaultsTooltip as SeriesDefaultsTooltip_2 } from '../common/property-types';
import { SeriesErrorBars as SeriesErrorBars_2 } from '../common/property-types';
import { SeriesErrorBars as SeriesErrorBars_3 } from '../../common/property-types';
import { SeriesExtremes as SeriesExtremes_2 } from '../common/property-types';
import { SeriesExtremes as SeriesExtremes_3 } from '../../common/property-types';
import { SeriesHighlight as SeriesHighlight_2 } from '../common/property-types';
import { SeriesHighlight as SeriesHighlight_3 } from '../../common/property-types';
import { SeriesHoverEvent as SeriesHoverEvent_2 } from '.';
import { SeriesLabels as SeriesLabels_2 } from '../common/property-types';
import { SeriesLabels as SeriesLabels_3 } from '../../common/property-types';
import { SeriesLabelsFrom as SeriesLabelsFrom_2 } from '../../common/property-types';
import { SeriesLabelsFrom as SeriesLabelsFrom_3 } from '../../../common/property-types';
import { SeriesLabelsTo as SeriesLabelsTo_2 } from '../../common/property-types';
import { SeriesLabelsTo as SeriesLabelsTo_3 } from '../../../common/property-types';
import { SeriesLabelsVisualArgs as SeriesLabelsVisualArgs_2 } from '../../argument-types/series-labels-visual-args.interface';
import { SeriesLabelsVisualArgs as SeriesLabelsVisualArgs_3 } from '../../../argument-types/series-labels-visual-args.interface';
import { SeriesLine as SeriesLine_2 } from '../field-types/series-line.interface';
import { SeriesLine as SeriesLine_3 } from '../../field-types/series-line.interface';
import { SeriesMarkers as SeriesMarkers_2 } from '../common/property-types';
import { SeriesMarkers as SeriesMarkers_3 } from '../../common/property-types';
import { SeriesNotes as SeriesNotes_2 } from '../common/property-types';
import { SeriesNotes as SeriesNotes_3 } from '../../common/property-types';
import { SeriesNotesIcon as SeriesNotesIcon_2 } from '../../common/property-types';
import { SeriesNotesIcon as SeriesNotesIcon_3 } from '../../../common/property-types';
import { SeriesNotesLabel as SeriesNotesLabel_2 } from '../../common/property-types';
import { SeriesNotesLabel as SeriesNotesLabel_3 } from '../../../common/property-types';
import { SeriesNoteVisualArgs as SeriesNoteVisualArgs_2 } from '../../argument-types/series-note-visual-args.interface';
import { SeriesNoteVisualArgs as SeriesNoteVisualArgs_3 } from '../../../argument-types/series-note-visual-args.interface';
import { SeriesOutliers as SeriesOutliers_2 } from '../common/property-types';
import { SeriesOutliers as SeriesOutliers_3 } from '../../common/property-types';
import { SeriesPattern } from '@progress/kendo-charts';
import { SeriesStack as SeriesStack_2 } from '../field-types/series-stack.interface';
import { SeriesStack as SeriesStack_3 } from '../../field-types/series-stack.interface';
import { SeriesTooltip as SeriesTooltip_2 } from '../common/property-types';
import { SeriesTooltip as SeriesTooltip_3 } from '../../common/property-types';
import { SeriesVisualArgs as SeriesVisualArgs_2 } from '../argument-types/series-visual-args.interface';
import { SeriesVisualArgs as SeriesVisualArgs_3 } from '../../argument-types/series-visual-args.interface';
import { Surface } from '@progress/kendo-drawing';
import { TitleVisualArgs as TitleVisualArgs_2 } from '../../argument-types/title-visual-args.interface';
import { TitleVisualArgs as TitleVisualArgs_3 } from '../../../argument-types/title-visual-args.interface';
import { TooltipBorder as TooltipBorder_2 } from '../option-types/tooltip-border.interface';
import { TooltipBorder as TooltipBorder_3 } from '../../option-types/tooltip-border.interface';
import { TooltipBorder as TooltipBorder_4 } from '../../../option-types/tooltip-border.interface';
import { ValueAxisCrosshair } from '../common/property-types';
import { ValueAxisLabels } from '../common/property-types';
import { ValueAxisNotes } from '../common/property-types';
import { ValueAxisNotesIcon as ValueAxisNotesIcon_2 } from '../../common/property-types';
import { ValueAxisNotesLabel as ValueAxisNotesLabel_2 } from '../../common/property-types';
import { ValueAxisTitle } from '../common/property-types';
import { VerticalStripesPattern } from '@progress/kendo-charts';
import { WeekStartDay } from '../field-types/week-start-day.enum';
import { WeekStartDay as WeekStartDay_3 } from '../../field-types/week-start-day.enum';
import { XAxisCrosshair } from '../common/property-types';
import { XAxisCrosshairTooltip as XAxisCrosshairTooltip_2 } from '../../common/property-types';
import { XAxisLabels } from '../common/property-types';
import { XAxisNotes } from '../common/property-types';
import { XAxisNotesIcon as XAxisNotesIcon_2 } from '../../common/property-types';
import { XAxisNotesLabel as XAxisNotesLabel_2 } from '../../common/property-types';
import { XAxisTitle } from '../common/property-types';
import { YAxisCrosshair } from '../common/property-types';
import { YAxisCrosshairTooltip as YAxisCrosshairTooltip_2 } from '../../common/property-types';
import { YAxisLabels } from '../common/property-types';
import { YAxisNotes } from '../common/property-types';
import { YAxisNotesIcon as YAxisNotesIcon_2 } from '../../common/property-types';
import { YAxisNotesLabel as YAxisNotesLabel_2 } from '../../common/property-types';
import { YAxisTitle } from '../common/property-types';
import { Zoomable } from './option-types/zoomable.interface';
import { ZoomEndEvent as ZoomEndEvent_2 } from '.';
import { ZoomEvent as ZoomEvent_2 } from '.';
import { ZoomStartEvent as ZoomStartEvent_2 } from '.';
/**
* The provided time-interval steps when `baseUnit` is set to either `"fit"` or `"auto"`.
* The axis will try to divide the active period into the smallest possible units
* that yield `maxDateGroups` or less discrete intervals.
*/
declare interface AutoBaseUnitSteps_2 {
/**
* The preferred interval steps when displaying milliseconds.
*/
milliseconds?: number[];
/**
* The preferred interval steps when displaying seconds.
*/
seconds?: number[];
/**
* The preferred interval steps when displaying minutes.
*/
minutes?: number[];
/**
* The preferred interval steps when displaying hours.
*/
hours?: number[];
/**
* The preferred interval steps when displaying days.
*/
days?: number[];
/**
* The preferred interval steps when displaying weeks.
*/
weeks?: number[];
/**
* The preferred interval steps when displaying months.
*/
months?: number[];
/**
* The preferred interval steps when displaying years.
*/
years?: number[];
}
/**
* @hidden
*/
declare interface AxisCrosshairTooltip {
/**
* The background color of the tooltip. Accepts a valid CSS color string, including hex and rgb.
*/
background?: string;
/**
* The border options of the tooltip.
*/
border?: TooltipBorder;
/**
* The text color of the tooltip. Accepts a valid CSS color string, including hex and rgb.
*/
color?: string;
/**
* The font of the tooltip.
*/
font?: string;
/**
* The format for displaying the tooltip. Uses the [`format`]({% slug api_intl_intlservice %}#toc-format) method of IntlService. Contains one placeholder (`"{0}"`) which represents the value.
*/
format?: string;
/**
* The padding of the crosshair tooltip. A numeric value sets all paddings.
*/
padding?: Padding | number;
/**
* If set to `true`, the Chart displays the axis crosshair tooltip. By default, the axis crosshair tooltip is not visible.
*/
visible?: boolean;
}
/**
* @hidden
*/
declare interface AxisDefaults_2 {
/**
* The background color of the axis.
*/
background?: string;
/**
* The color to apply to all axis elements. Accepts a valid CSS color string, including hex and rgb.
*/
color?: string;
/**
* The configuration of the axis lines. Also affects the major and minor ticks, but not the grid lines.
*/
line?: AxisLine;
/**
* The configuration of the major grid lines. These are the lines that are an extension of the major ticks through the body of the Chart.
*/
majorGridLines?: GridLines;
/**
* The configuration of the axis major ticks.
*/
majorTicks?: AxisTicks;
/**
* The configuration of the minor grid lines. These are the lines that are an extension of the minor ticks through the body of the Chart.
*/
minorGridLines?: GridLines;
/**
* The configuration of the axis minor ticks.
*/
minorTicks?: AxisTicks;
/**
* If set to `true`, the Chart prevents the axis range from snapping to zero. Setting it to `false`, forces the axis range to snap to zero.
*/
narrowRange?: boolean;
/**
* The name of the pane in which the axis has to be rendered. If not set, the axis will be rendered in the first (default) pane.
*/
pane?: string;
/**
* The plot bands of the axis.
*/
plotBands?: PlotBand[];
/**
* If set to `true`, the axis direction is reversed. By default, categories are listed from left to right and from bottom to top.
*/
reverse?: boolean;
/**
* The angle (degrees) of the first category on the axis. Angles increase clockwise with zero to the left. Negative values are acceptable.
*/
startAngle?: number;
/**
* If set to `true`, the Chart displays the axis. By default, the axis is visible.
*/
visible?: boolean;
/**
* The crosshair configuration options. The crosshair is displayed when the [`axisDefaults.crosshair.visible`]({% slug api_charts_chartaxisdefaultscrosshairprops %}#toc-visible) option is set to `true`.
*/
crosshair?: AxisDefaultsCrosshair;
/**
* The configuration of the axis labels.
*/
labels?: AxisDefaultsLabels;
/**
* The title configuration of the axis. To display the title, set the [`axisDefaults.title.text`]({% slug api_charts_chartaxisdefaultstitleprops %}#toc-text) option.
*/
title?: AxisDefaultsTitle;
}
/**
* @hidden
*/
declare interface AxisDefaultsCrosshair {
/**
* The color of the crosshair. Accepts a valid CSS color string, including `hex` and `rgb`.
*/
color?: string;
/**
* The dash type of the crosshair.
*
* The following dash types are supported:
*
* - `"dash"`—A line which consists of dashes.
* - `"dashDot"`—A line which consists of a repeating pattern of dash-dot.
* - `"dot"`—A line which consists of dots.
* - `"longDash"`—A line which consists of a repeating pattern of long-dash.
* - `"longDashDot"`—A line which consists of a repeating pattern of long-dash-dot.
* - `"longDashDotDot"`—A line which consists of a repeating pattern of long-dash-dot-dot.
* - `"solid"`—A solid line.
*/
dashType?: DashType | string;
/**
* The opacity of the crosshair. By default, the crosshair is opaque.
*/
opacity?: number;
/**
* If set to `true`, the Chart displays the axis crosshair. By default, the axis crosshair is not visible.
*/
visible?: boolean;
/**
* The width of the crosshair in pixels.
*/
width?: number;
/**
* The options of the crosshair tooltip. The crosshair tooltip is displayed when the [`axisDefaults.crosshair.tooltip.visible`]({% slug api_charts_chartaxisdefaultscrosshairtooltipprops %}#toc-visible) option is set to `true`.
*/
tooltip?: AxisDefaultsCrosshairTooltip;
}
/**
* @hidden
*/
declare interface AxisDefaultsCrosshairTooltip extends AxisCrosshairTooltip {
}
/**
* @hidden
*/
declare interface AxisDefaultsLabels {
/**
* The function which returns the label content. The text can be split into multiple lines by using the line feed characters (`"\n"`).
*
* The available fields in the function argument are:
*
* - `value`—The category value.
* - `dataItem`—The data item if a field i specified. If the category does not have a corresponding item in the data, an empty object is passed.
* - `format`—The default format of the label.
* - `culture`—The default culture (if set) of the label.
*/
content?: (e: any) => string;
/**
* The font style of the labels.
*/
font?: string;
/**
* The format for displaying the labels. Uses the [`format`]({% slug api_intl_intlservice %}#toc-format) method of IntlService. Contains one placeholder (`"{0}"`) which represents the category value.
*/
format?: string;
/**
* The margin of the labels. A numeric value sets all margins.
*/
margin?: Margin | number;
/**
* If set to `true`, the Chart mirrors the axis labels and ticks. If the labels are normally on the left side of the axis, the mirroring of the axis renders them to the right.
*/
mirror?: boolean;
/**
* The padding of the labels. A numeric value sets all paddings.
*/
padding?: Padding | number;
/**
* The rotation angle of the labels ([see example]({% slug axes_chart_charts %}#toc-limiting-the-number-of-labels)). By default, the labels are not rotated. If the axis is horizontal, can be set to `"auto"`. In this case, the labels are rotated only if the slot size is not sufficient for the entire labels.
*/
rotation?: LabelRotation | number | 'auto';
/**
* The number of labels to skip. By default, no labels are skipped.
*/
skip?: number;
/**
* The label-rendering step—renders every n<sup>th</sup> label. By default, every label is rendered.
*/
step?: number;
/**
* If set to `true`, the Chart displays the axis labels. By default, the axis labels are visible.
*/
visible?: boolean;
/**
* A function that for creating a custom visual for the labels.
*
* The available argument fields are:
* - `createVisual`—A function for getting the default visual.
* - `culture`—The default culture (if set) of the label.
* - `dataItem`—The data item if a field has been specified.
* - `format`—The default format of the label.
* - `options`—The label options.
* - `rect`—The geometry [`Rect`]({% slug api_kendo-drawing_geometry_rect %}) that defines where the visual has to be rendered.
* - `sender`—The Chart instance (can be `undefined`).
* - `text`—The label text.
* - `value`—The category value.
*/
visual?: (e: AxisLabelVisualArgs) => drawing.Element;
}
/**
* @hidden
*/
declare interface AxisDefaultsTitle {
/**
* The background color of the title. Accepts a valid CSS color string, including hex and rgb.
*/
background?: string;
/**
* The border of the title.
*/
border?: Border;
/**
* The text color of the title. Accepts a valid CSS color string, including hex and rgb.
*/
color?: string;
/**
* The font style of the title.
*/
font?: string;
/**
* The margin of the title. A numeric value sets all margins.
*/
margin?: Margin | number;
/**
* The padding of the title. A numeric value sets all paddings.
*/
padding?: Padding | number;
/**
* The position of the title.
*
* The supported values are:
*
* - `"top"`—The axis title is positioned on the top (applicable for the vertical axis).
* - `"bottom"`—The axis title is positioned on the bottom (applicable for the vertical axis).
* - `"left"`—The axis title is positioned on the left (applicable for the horizontal axis).
* - `"right"`—The axis title is positioned on the right (applicable for the horizontal axis).
* - `"center"`—The axis title is positioned in the center.
*/
position?: AxisTitlePosition | string;
/**
* The rotation angle of the title. By default, the title is not rotated.
*/
rotation?: number;
/**
* The text of the title. The text can be split into multiple lines by using the line feed characters (`"\n"`).
*/
text?: string;
/**
* If set to `true`, the Chart displays the axis title. By default, the axis title is visible.
*/
visible?: boolean;
/**
* A function that can be used to create a custom visual for the title.
*
* The available argument fields are:
*
* - `text`—The label text.
* - `rect`—The geometry [`Rect`]({% slug api_kendo-drawing_geometry_rect %}) that defines where the visual has to be rendered.
* - `sender`—The Chart instance (can be `undefined`).
* - `options`—The label options.
* - `createVisual`—A function for getting the default visual.
*/
visual?: (e: TitleVisualArgs) => drawing.Element;
}
/**
* Arguments for the `axisLabelClick` event.
*/
export declare class AxisLabelClickEvent extends BaseEvent {
/**
* The axis options to which the label belongs.
*/
axis: EventAxisOptions;
/**
* The original data item that is used to generate the label. Available only for category axes which are populated from the `categoryField` of the series.
*/
dataItem: any;
/**
* The label sequential or category index.
*/
index: number;
/**
* The label text.
*/
text: string;
/**
* The label value or category name.
*/
value: any;
/**
* @hidden
*/
constructor(e: any, target: any);
}
/**
* The position of the axis labels.
*
* @example
* ```jsx
* <Chart>
* <ChartValueAxis>
* <ChartValueAxisItem :labels="{ position: 'end' }"/>
* </ChartValueAxis>
* </Chart>
* );
*
* ```
*/
declare type AxisLabelsPosition = 'start' | 'end' | 'onAxis' | '';
/**
* The context for the visual function of the axis label.
*/
declare interface AxisLabelVisualArgs {
/**
* A function that can be used to get the default visual.
*/
createVisual: () => drawing.Element;
/**
* The default culture (if set) of the label.
*/
culture: string;
/**
* If a field is specified, represents the data item.
*/
dataItem?: any;
/**
* The default format of the label.
*/
format: string;
/**
* The label options.
*/
options: any;
/**
* The rectangle that defines the normal position of the visual.
*/
rect: geometry.Rect;
/**
* The instance of the Chart component.
*/
sender: Object;
/**
* The text of the label.
*/
text: string;
/**
* The value of the label.
*/
value: any;
}
/**
* The appearance settings for the axis lines. Affects the major and minor axis ticks, but not the grid lines (see the [basic usage example]({% slug api_charts_chartaxisdefaultsprops %})).
*/
declare interface AxisLine {
/**
* The color of the lines. Accepts a valid CSS color string, including hex and rgb. Setting the `color` option affects the major and minor axis ticks, but not the grid lines.
*/
color?: string;
/**
* The dash type of the line.
*/
dashType?: DashType;
/**
* If set to `true`, the Chart displays the axis lines. By default, the axis lines are visible.
*/
visible?: boolean;
/**
* The width of the line in pixels. Affects the major and minor axis ticks, but not the grid lines.
*/
width?: number;
}
/**
* The context for the point highlight visual function.
*/
declare interface AxisNoteVisualArgs {
/**
* A function that can be used to get the default visual.
*/
createVisual: () => drawing.Element;
/**
* The options of the note.
*/
options: any;
/**
* The rectangle that defines the normal position of the visual.
*/
rect: geometry.Rect;
/**
* The instance of the Chart component.
*/
sender: Object;
/**
* The value of the note.
*/
value: string;
}
/**
* The axis range.
*/
export declare interface AxisRange {
/**
* The axis minimum value.
*/
min: Number | Date;
/**
* The axis maximum value.
*/
max: Number | Date;
}
/**
* The appearance configuration for the major and minor axis ticks (see the [basic usage example]({% slug api_charts_chartaxisdefaultsprops %})).
*/
declare interface AxisTicks {
/**
* The color of the tick lines. Accepts a valid CSS color string, including hex and rgb.
*/
color?: string;
/**
* The length of the tick line in pixels.
*/
size?: number;
/**
* The number of ticks to skip at the beginning.
*/
skip?: number;
/**
* The tick-rendering step. Renders every n<sup>th</sup> tick, where `n` is the step.
*/
step?: number;
/**
* If set to `true,` the Chart displays the axis ticks. By default, only the major axis ticks are visible.
*/
visible?: boolean;
/**
* The width of the ticks in pixels.
*/
width?: number;
}
/**
* The position of an axis title.
*
* @example
* ```jsx
* <Chart>
* <ChartValueAxis>
* <ChartValueAxisItem :title="{ text: 'Title', position: 'top' }"/>
* </ChartValueAxis>
* </Chart>
*
* ```
*/
declare type AxisTitlePosition = 'top' | 'bottom' | 'left' | 'right' | 'center';
/**
* @hidden
*/
declare interface BaseChartProps {
/**
* Represents the `dir` HTML attribute.
*/
dir?: string;
/**
* Sets the preferred rendering engine ([see example]({% slug rendering_chart_charts %})). If not supported by the browser, the Chart switches to the first available mode.
*
* The supported values are:
* - `"svg"`—If available, renders the component as an inline `.svg` file.
* - `"canvas"`—If available, renders the component as a `canvas` element.
*/
renderAs?: string;
/**
* Specifies if the Chart can be panned ([see example]({% slug panzoom_chart_charts %})).
*/
pannable?: boolean | DragAction_2;
/**
* Specifies if the Chart can be zoomed ([see example]({% slug panzoom_chart_charts %})).
*/
zoomable?: boolean | Zoomable_2;
/**
* The default colors for the Chart series. When all colors are used, new colors are pulled from the start again.
*/
seriesColors?: string[];
/**
* If set to `true`, the Chart plays animations when it displays the series. By default, animations are enabled.
*/
transitions?: boolean;
/**
* This option allows to override the default pane options.
*/
paneDefaults?: PaneDefaults_2;
/**
* The chart panes configuration.
*/
panes?: Pane_2[];
/**
* This option allows to override the default series options.
*/
seriesDefaults?: SeriesDefaults_2;
/**
* This option allows to override the default axis options.
*/
axisDefaults?: AxisDefaults_2;
/**
* @hidden
*/
allListeners?: object;
/**
* Fires when the user clicks an axis label.
*/
onAxislabelclick?: (event: AxisLabelClickEvent) => void;
/**
* Fires as long as the user is dragging the Chart with the mouse or through swipe gestures.
*/
onDrag?: (event: DragEvent_2) => void;
/**
* Fires when the user stops dragging the Chart.
*/
onDragend?: (event: DragEndEvent) => void;
/**
* Fires when the user starts dragging the Chart.
*/
onDragstart?: (event: DragStartEvent) => void;
/**
* Fires when the user hovers over a legend item.
*/
onLegenditemhover?: (event: LegendItemHoverEvent) => void;
/**
* Fires when the user clicks a legend item ([see example]({% slug legend_chart_charts %}#toc-clicking-legend-items)).
*/
onLegenditemclick?: (event: LegendItemClickEvent) => void;
/**
* Fires when the user clicks a note.
*/
onNoteclick?: (event: NoteClickEvent) => void;
/**
* Fires when the user hovers over a note.
*/
onNotehover?: (event: NoteHoverEvent) => void;
/**
* Fires when the user clicks the plot area. The `click` event is triggered by the `tap` and `contextmenu` events. To distinguish between the original events, inspect the `e.originalEvent.type` field.
*/
onPlotareaclick?: (event: PlotAreaClickEvent) => void;
/**
* Fires when the user hovers the plot area ([see example]({% slug crosshairs_chart_charts %}#toc-current-cursor-values)).
*/
onPlotareahover?: (event: PlotAreaHoverEvent) => void;
/**
* Fires when the Chart is ready to render on screen ([see example]({% slug plotbands_chart_charts %}#toc-custom-plot-bands)). For example, you can use it to remove loading indicators. Any changes made to the options are ignored.
*/
onRender?: (event: RenderEvent) => void;
/**
* Fires when the user modifies the selection.
*
* The range units are:
* - Generic axis—Category index (0-based).
* - Date axis—Date instance.
*/
onSelect?: (event: SelectEvent) => void;
/**
* Fires when the user completes the modification of the selection ([see example]({% slug selection_chart_charts %}#toc-using-selection-as-navigator)).
*
* The range units are:
* - Generic axis—Category index (0-based).
* - Date axis—Date instance.
*/
onSelectend?: (event: SelectEndEvent) => void;
/**
* Fires when the user starts modifying the axis selection.
*
* The range units are:
* - Generic axis—Category index (0-based).
* - Date axis—Date instance.
*/
onSelectstart?: (event: SelectStartEvent) => void;
/**
* Fires when the user clicks the Chart series.
*
* The `click` event will be triggered by the `tap` and `contextmenu` events. To distinguish between the original events, inspect the `e.originalEvent.type` field.
*/
onSeriesclick?: (event: SeriesClickEvent) => void;
/**
* Fires when the user hovers over the Chart series.
*/
onSerieshover?: (event: SeriesHoverEvent) => void;
/**
* Fires as long as the user is zooming the Chart by using the mousewheel operation.
*/
onZoom?: (event: ZoomEvent) => void;
/**
* Fires when the user stops zooming the Chart.
*/
onZoomend?: (event: ZoomEndEvent) => void;
/**
* Fires when the user uses the mousewheel to zoom the Chart.
*/
onZoomstart?: (event: ZoomStartEvent) => void;
}
/**
* @hidden
*/
declare abstract class BaseEvent {
/**
* The `Chart` component that triggered the event.
*/
target: any;
/**
* @hidden
*/
constructor(target: any);
}
/**
* The `baseUnit` type of an X or Y axis.
*
* @example
* ```jsx
* <Chart>
* <ChartXAxis>
* <ChartXAxisItem :base-unit="baseUnit" />
* </ChartXAxis>
* <ChartSeries>
* <ChartSeriesItem :type="'scatter'" :data-items="data" />
* </ChartSeries>
* </Chart>
* ```
*/
declare type BaseUnit = 'milliseconds' | 'seconds' | 'minutes' | 'hours' | 'days' | 'weeks' | 'months' | 'years';
/**
* The appearance settings for the border lines (see the [basic usage example]({% slug api_charts_charttitleprops %})).
*/
declare interface Border {
/**
* The color of the border line. Accepts a valid CSS color string, including hex and rgb.
*/
color?: string;
/**
* The dash type of the border line.
*/
dashType?: DashType;
/**
* The width of the border line in pixels.
*/
width?: number;
}
/**
* The appearance settings for the target of the Bullet series.
*/
declare interface BulletTarget {
/**
* The width of the border in pixels. By default, the border width is set to `zero`, which means that the border is not visible.
*/
border?: Border;
/**
* The target color.
*/
color?: string;
/**
* The appearance settings for the target line of the Bullet series.
*/
line?: BulletTargetLine;
}
/**
* The appearance settings for the target line of the Bullet series.
*/
declare interface BulletTargetLine {
/**
* The width of the Bullet target line in pixels.
*/
width?: number;
}
/**
* @hidden
*/
declare interface CategoryAxis {
/**
* The time-interval steps when `baseUnit` is set either to `"fit"` or `"auto"`. The axis will try to divide the active period into the smallest possible units that yield `maxDateGroups` or less discrete intervals.
*/
autoBaseUnitSteps?: AutoBaseUnitSteps_2;
/**
* The category index or the date (for date category axis) at which the first value axis crosses this axis. The category indices or the date (for date category axis) at which the value axes cross the category axis (when set as an array). To denote the far end of the axis, set an index greater than or equal to the number of categories.
*/
axisCrossingValue?: any | any[];
/**
* The background color of the axis.
*/
background?: string;
/**
* The base time interval for the date axis ([see example]({% slug axes_chart_charts %}#toc-selecting-time-intervals)). The default base unit is automatically determined by the minimum difference between subsequent categories.
*
* The supported values are:
* - `"fit"`
* - `"milliseconds"`
* - `"seconds"`
* - `"minutes"`
* - `"hours"`
* - `"days"`
* - `"weeks"`
* - `"months"`
* - `"years"`
*
* Setting `baseUnit` to `"fit"` sets such a base unit and [`categoryAxis.baseUnitStep`]({% slug api_charts_chartcategoryaxisitemprops %}#toc-baseunitstep) that the total number of categories does not exceed [`categoryAxis.maxDateGroups`]({% slug api_charts_chartcategoryaxisitemprops %}#toc-maxdategroups).
*
* Series data is aggregated for the specified base unit by using the [`series.aggregate`]({% slug api_charts_chartseriesitemprops %}#toc-aggregate) function.
*/
baseUnit?: string | CategoryBaseUnit;
/**
* The step (interval) between the categories in base units ([see example]({% slug axes_chart_charts %}#toc-selecting-time-intervals)). Setting it to `"auto"` sets the step to such a value that the total number of categories does not exceed [`categoryAxis.maxDateGroups`]({% slug api_charts_chartcategoryaxisitemprops %}#toc-maxdategroups). The option is ignored if [`categoryAxis.baseUnit`]({% slug api_charts_chartcategoryaxisitemprops %}#toc-baseunit) is set to `"fit"`.
*/
baseUnitStep?: number | string;
/**
* The category names. The Chart creates a category for every item of the array.
*/
categories?: any[];
/**
* The color to apply to all axis elements. Accepts a valid CSS color string, including hex and rgb. Can be overridden by [`categoryAxis.labels.color`]({% slug api_charts_chartcategoryaxislabelsprops %}#toc-color) and [`categoryAxis.line.color`]({% slug api_charts_axisline %}#toc-color).
*/
color?: string;
/**
* If set to `true`, the Chart positions categories and series points on major ticks. This removes the empty space before and after the series. The default value is `false` except for `"area"`, `"verticalArea"`, `"rangeArea"`, and `"verticalRangeArea"`. The option is ignored if the [`series.type`]({% slug api_charts_chartseriesitemprops %}#toc-type) option is set to `"bar"`, `"column"`, `"boxPlot"`, `"ohlc"`, `"candlestick"`, or `"waterfall"`.
*/
justified?: boolean;
/**
* The configuration of the axis lines. Also affects the major and minor ticks, but not the grid lines.
*/
line?: AxisLine;
/**
* The configuration of the major grid lines. These are the lines that are an extension of the major ticks through the body of the Chart.
*/
majorGridLines?: GridLines;
/**
* The configuration of the category axis major ticks.
*/
majorTicks?: AxisTicks;
/**
* The last date displayed on a date category axis or the index of the last category displayed on a category axis ([see example]({% slug appearance_chart_charts %}#toc-limiting-the-displayed-range)). By default, the max value is the same as the last category. This is often used in combination with the [`categoryAxis.min`]({% slug api_charts_chartcategoryaxisitemprops %}#toc-min) and [`categoryAxis.roundToBaseUnit`]({% slug api_charts_chartcategoryaxisitemprops %}#toc-roundtobaseunit) options to set up a fixed date range.
*/
max?: any;
/**
* The maximum number of groups (categories) to display when [`categoryAxis.baseUnit`]({% slug api_charts_chartcategoryaxisitemprops %}#toc-baseunit) is set to `"fit"` or [`categoryAxis.baseUnitStep`]({% slug api_charts_chartcategoryaxisitemprops %}#toc-baseunitstep) is set to `"auto"`([see example]({% slug axes_chart_charts %}#toc-selecting-time-intervals)).
*/
maxDateGroups?: number;
/**
* The maximum number of ticks and labels to display. Applicabable for date category axis ([see example]({% slug axes_chart_charts %}#toc-limiting-the-number-of-labels)).
*/
maxDivisions?: number;
/**
* The first date which is displayed on a date category axis or the index of the first category which is displayed on a category axis ([see example]({% slug appearance_chart_charts %}#toc-limiting-the-displayed-range)). By default, the min value is the same as the first category. This is often used in combination with the [`categoryAxis.max`]({% slug api_charts_chartcategoryaxisitemprops %}#toc-max) and [`categoryAxis.roundToBaseUnit`]({% slug api_charts_chartcategoryaxisitemprops %}#toc-roundtobaseunit) options to set up a fixed date range.
*/
min?: any;
/**
* The configuration of the minor grid lines. These are the lines that are an extension of the minor ticks through the body of the Chart.
*/
minorGridLines?: GridLines;
/**
* The configuration of the category axis minor ticks.
*/
minorTicks?: AxisTicks;
/**
* The unique axis name. Used to associate a series with a category axis, which utilizes the [`series.categoryAxis`]({% slug api_charts_chartseriesitemprops %}#toc-categoryaxis) option.
*/
name?: string;
/**
* The configuration of the date axis date range labels.
*/
rangeLabels?: CategoryAxisRangeLabels_2;
/**
* The name of the pane in which the category axis has to be rendered. If not set, the axis will be rendered in the first (default) pane.
*/
pane?: string;
/**
* The plot bands of the category axis.
*/
plotBands?: PlotBand[];
/**
* If set to `true`, the category axis direction is reversed. By default, categories are listed from left to right and from bottom to top.
*/
reverse?: boolean;
/**
* If set to `true`, the Chart rounds the first and last date to the nearest base unit.
*/
roundToBaseUnit?: boolean;
/**
* The angle (degrees) of the first category on the axis. Angles increase clockwise with zero to the left. Negative values are acceptable.
*/
startAngle?: number;
/**
* The category axis type.
*
* The supported values are:
* - `"category"`—Discrete category axis.
* - `"date"`—Specialized axis for displaying chronological data.
*/
type?: string;
/**
* If set to `true`, the Chart displays the category axis. By default, the category axis is visible.
*/
visible?: boolean;
/**
* The week start day when the `baseUnit` is set to `"weeks"`.
*/
weekStartDay?: WeekStartDay_2;
/**
* The configuration options of the crosshair. The crosshair is displayed when the [`categoryAxis.crosshair.visible`]({% slug api_charts_chartcategoryaxiscrosshairprops %}#toc-visible) option is set to `true`.
*/
crosshair?: CategoryAxisCrosshair_2;
/**
* The configuration of the axis labels.
*/
labels?: CategoryAxisLabels_2;
/**
* The configuration of the category axis notes.
*/
notes?: CategoryAxisNotes_2;
/**
* The selected axis range ([see example]({% slug selection_chart_charts %})). If set, the axis selection is enabled. The range is index-based