@progress/kendo-react-charts

/** * @license *------------------------------------------------------------------------------------------- * Copyright © 2025 Progress Software Corporation. All rights reserved. * Licensed under commercial license. See LICENSE.md in the package root for more information *------------------------------------------------------------------------------------------- */ import { Align } from '@progress/kendo-react-popup'; import { BaseEvent as BaseEvent_2 } from '@progress/kendo-react-common'; import { BreadcrumbProps } from '@progress/kendo-react-layout'; import { ChartContextType } from '../../ChartContext'; import { ChartContextType as ChartContextType_2 } from './ChartContext'; import { ChartContextType as ChartContextType_4 } from '../ChartContext'; import { createSankeyData as createSankeyData_2 } from '@progress/kendo-charts'; import { CrosshatchPattern } from '@progress/kendo-charts'; import { DataModel } from '@progress/kendo-react-layout'; import { DiagonalStripesPattern } from '@progress/kendo-charts'; import { DotsPattern } from '@progress/kendo-charts'; import { drawing } from '@progress/kendo-drawing'; import { Element as Element_2 } from '@progress/kendo-drawing'; import { FocusHighlight } from '@progress/kendo-charts'; import { FocusHighlightBorder } from '@progress/kendo-charts'; import { geometry } from '@progress/kendo-drawing'; import { GridPattern } from '@progress/kendo-charts'; import { Group } from '@progress/kendo-drawing'; import { InstanceObserver } from '@progress/kendo-charts'; import { JSX as JSX_2 } from 'react/jsx-runtime'; import { MultiPath } from '@progress/kendo-drawing'; import { Offset } from '@progress/kendo-react-popup'; import * as React_2 from 'react'; 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 { 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 { SankeyTooltip as SankeyTooltip_2 } from '@progress/kendo-charts'; import { SankeyTooltipEvent } from '@progress/kendo-charts'; import { SeriesPattern } from '@progress/kendo-charts'; import { Surface } from '@progress/kendo-drawing'; import { VerticalStripesPattern } from '@progress/kendo-charts'; /** * 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. */ export declare interface AutoBaseUnitSteps { /** * 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 */ export declare interface AxisDefaults { /** * 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 */ export 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; /** * 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 */ export declare interface AxisDefaultsCrosshairTooltip extends AxisCrosshairTooltip { } /** * @hidden */ export 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 nth 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 */ export 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; /** * 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: Charts); } /** * The position of the axis labels. * * @example * ```jsx * import { Chart, ChartValueAxis, ChartValueAxisItem } from '@progress/kendo-react-charts'; * * const ChartContainer = () => ( * <Chart> * <ChartValueAxis> * <ChartValueAxisItem labels={{ position: "end" }}/> * </ChartValueAxis> * </Chart> * ); * * ReactDOM.render( * <ChartContainer />, * document.querySelector('my-app') * ); * ``` */ export declare type AxisLabelsPosition = 'start' | 'end' | 'onAxis' | ''; /** * The context for the visual function of the axis label. */ export 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: Chart; /** * 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_chartaxisdefaults %})). */ export 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. */ export 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: Chart; /** * 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_chartaxisdefaults %})). */ export 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 nth 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 * import { Chart, ChartValueAxis, ChartValueAxisItem } from '@progress/kendo-react-charts'; * * const ChartContainer = () => ( * <Chart> * <ChartValueAxis> * <ChartValueAxisItem title={{ text: 'Title', position: "top" }}/> * </ChartValueAxis> * </Chart> * ); * * ReactDOM.render( * <ChartContainer />, * document.querySelector('my-app') * ); * ``` */ export declare type AxisTitlePosition = 'top' | 'bottom' | 'left' | 'right' | 'center'; /** * @hidden */ declare interface BaseChartProps { /** * Represents the `dir` HTML attribute. */ dir?: string; /** * The styles that are applied to the component. */ style?: React.CSSProperties; /** * Sets additional CSS classes to the component. */ className?: string; /** * @hidden */ children?: any; /** * Gets or sets the current drill-down state for [Drilldown Charts](slug:drilldown_charts). * * To return to a previous level, remove the items from the `steps` array following the desired level. * To return to the root chart, set the `steps` array to `[]`. */ drilldownState?: ChartDrilldownState; /** * 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?: 'svg' | 'canvas'; /** * Specifies if the Chart can be panned ([see example]({% slug panzoom_chart_charts %})). */ pannable?: boolean | DragAction; /** * Specifies if the Chart can be zoomed ([see example]({% slug panzoom_chart_charts %})). Currently is only applicable to linear types, where the range on the X axis can be changed based on the zoom level. */ zoomable?: boolean | Zoomable; /** * 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; /** * The chart panes configuration. */ panes?: Pane[]; /** * This option allows to override the default series options. */ seriesDefaults?: SeriesDefaults; /** * This option allows to override the default axis options. */ axisDefaults?: AxisDefaults; /** * 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 when the user wants to drill down on a specific point. */ onDrilldown?: (event: DrilldownEvent) => 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 Chart is about to refresh. The event can be used to prevent the refresh of the Chart in specific cases ([see example]({% slug refresh_chart %}). */ onRefresh?: (chartOptions: any, themeOptions: any, chartInstance: any) => 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: Charts; /** * @hidden */ constructor(target: Charts); } /** * The `baseUnit` type of an X or Y axis. * * @example * ```jsx * import { * Chart, * ChartXAxis, * ChartXAxisItem, * ChartSeries, * ChartSeriesItem * } from '@progress/kendo-react-charts'; * * const baseUnit = "months"; * const data = [[new Date(2000, 0, 1), 1], [new Date(2001, 0, 1), 1]]; * * const ChartContainer = () => ( * <Chart> * <ChartXAxis> * <ChartXAxisItem baseUnit={baseUnit} /> * </ChartXAxis> * <ChartSeries> * <ChartSeriesItem type="scatter" data={data} /> * </ChartSeries> * </Chart> * ); * * ReactDOM.render( * <ChartContainer />, * document.querySelector('my-app') * ); * ``` */ export 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_charttitle %})). */ export 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. */ export 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. */ export declare interface BulletTargetLine { /** * The width of the Bullet target line in pixels. */ width?: number; } /** * @hidden */ export 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; /** * 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?: 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 | 'auto'; /** * 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; /** * 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?: 'category' | 'date'; /** * 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; /** * 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; /** * The configuration of the axis labels. */ labels?: CategoryAxisLabels; /** * The configuration of the category axis notes. */ notes?: CategoryAxisNotes; /** * The selected axis range ([see example]({% slug selection_chart_charts %})). If set, the axis selection is enabled. The range is index-based, starting from zero. Categories with indexes in the range (`select.from`, `select.to`) will be selected. That is, the last category in the range will not be included in the selection. If the categories are dates, the range has to be also specified with date values. Selection is only supported if the axis is horizontal.v */ select?: CategoryAxisSelect; /** * The title configuration of the category axis. To display the title, set the [`categoryAxis.title.text`]({% slug api_charts_chartcategoryaxistitleprops %}#toc-text) option. */ title?: CategoryAxisTitle; } /** * @hidden */ export declare interface CategoryAxisCrosshair { /** * 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 consisting of dashes. * - `"dashDot"`—A line consisting of a repeating pattern of dash-dot. * - `"dot"`—A line consisting of dots. * - `"longDash"`—A line consisting of a repeating pattern of long-dash. * - `"longDashDot"`—A line consisting of a repeating pattern of long-dash-dot. * - `"longDashDotDot"`—A line consisting of a repeating pattern of long-dash-dot-dot. * - `"solid"`—A solid line. */ dashType?: DashType; /** * The opacity of the crosshair. By default, the crosshair is opaque. */ opacity?: number; /** * If set to `true`, the Chart displays the category axis crosshair. By default, the category 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 [`categoryAxis.crosshair.tooltip.visible`]({% slug api_charts_chartcategoryaxiscrosshairtooltipprops %}#toc-visible) option is set to `true`. */ tooltip?: CategoryAxisCrosshairTooltip; } /** * @hidden */ export declare interface CategoryAxisCrosshairTooltip extends AxisCrosshairTooltip { } /** * @hidden */ export declare interface CategoryAxisLabels { /** * The background color of the labels. Accepts a valid CSS color string, including hex and rgb. */ background?: string; /** * The border of the labels. */ border?: Border; /** * The text color of the labels. Accepts a valid CSS color string, including hex and rgb. */ color?: string; /** * The function which returns the label content. You can split the text into multiple lines by using the line feed characters (`"\n"`). * * The fields available in the function argument are: * - `value`—The category value. * - `dataItem`—The data item if a field is 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. * - `text`—The default label text. * - `index`—The index of the label. * - `count`—The total number of rendered labels. */ content?: (e: any) => string; /** * The culture to use when formatting date values. The specified culture must be loaded as demonstrated in the [Internationalization Overview]({% slug overview_intl %}). */ culture?: string; /** * The format for displaying the labels of the date category axis. The `{0}` placeholder represents the category value. The Chart selects the appropriate format for the current [`categoryAxis.baseUnit`]({% slug api_charts_chartcategoryaxisitemprops %}#toc-baseunit) option. * * Setting the [`categoryAxis.labels.format`]({% slug api_charts_chartcategoryaxislabelsprops %}#toc-format) option overrides the date formats. For more information, refer to the [`format`]({% slug api_intl_intlservice %}#toc-format) method of IntlService. * * > Not supported for Radar Charts. Use [`categoryAxis.labels.format`]({% slug api_charts_chartcategoryaxislabelsprops %}#toc-format) instead. */ dateFormats?: DateFormats; /** * 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 position of the axis labels. By default, labels are positioned next to the axis. * * When `position` is set to `end`, the labels are placed at the end of the crossing axis— * typically, at the top or right end of the Chart unless the crossing axis was reversed. * * When `position` is set to `start`, the labels are placed at the start of the crossing axis— * typically, at the left or bottom end of the Chart unless the crossing axis was reversed. */ position?: AxisLabelsPosition; /** * The rotation angle of the 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 rendering step of the label—renders every nth label. By default, every label is rendered. */ step?: number; /** * If set to `true`, the Chart displays the category axis labels. By default, the category axis labels are visible. */ visible?: boolean; /** * A function 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) on the label. * - `dataItem`—The data item if a field is 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 (might be `undefined`). * - `text`—The label text. * - `value`—The category value. */ visual?: (e: AxisLabelVisualArgs) => drawing.Element; } /** * @hidden */ export declare interface CategoryAxisNotes { /** * The items of the notes. */ data?: any[]; /** * The line of the notes. */ line?: NoteLine; /** * The position of the category axis note. * * The available options are: * - `"top"`—The note is positioned on the top. * - `"bottom"`—The note is positioned on the bottom. * - `"left"`—The note is positioned on the left. * - `"right"`—The note is positioned on the right. */ position?: NotePosition; /** * A function that can be used to create a custom visual for the notes. * * The available argument fields are: * - `rect`—The geometry [`Rect`]({% slug api_kendo-drawing_geometry_rect %}) that defines the note target rect. * - `options`—The note options. * - `createVisual`—A function for getting the default visual. * - `value`—The note value. */ visual?: (e: AxisNoteVisualArgs) => drawing.Element; /** * The icon of the notes. */ icon?: CategoryAxisNotesIcon; /** * The label of the notes. */ label?: CategoryAxisNotesLabel; } /** * @hidden */ export declare interface CategoryAxisNotesIcon { /** * The background color of the notes icon. */ background?: string; /** * The border of the notes icon. */ border?: Border; /** * The size of the notes icon. */ size?: number; /** * The shape of the notes icon. * * The supported values are: * * `"circle"`—The marker shape is a circle. * * `"square"`—The marker shape is a square. * * `"triangle"`—The marker shape is a triangle. * * `"cross"`—The marker shape is a cross. */ type?: MarkerType; /** * The visibility of the notes icon. */ visible?: boolean; } /** * @hidden */ export declare interface CategoryAxisNotesLabel { /** * The background color of the label. Accepts a valid CSS color string, including hex and rgb. */ background?: string; /** * The border of the label. */ border?: Border; /** * The text color of the label. Accepts a valid CSS color string, including hex and rgb. */ color?: string; /** * The function which returns the label content. The function argument contains a `value` field and defines the category value. You can split the text into multiple lines by using the line feed characters (`"\n"`). */ content?: (e: any) => string; /** * The font style of the label. */ font?: string; /** * The format for displaying the notes label. Uses the [`format`]({% slug api_intl_intlservice %}#toc-format) method of IntlService. Contains one placeholder (`"{0}"`) which represents the category value. */ format?: string; /** * The position of the label. * * The available options are: * - `"inside"`—The label is positioned inside the icon. * - `"outside"`—The label is positioned outside the icon. */ position?: NoteLabelPosition; /** * The rotation angle of the label. By default, the label is not rotated. */ rotation?: number; /** * If set to `true`, the Chart displays the category notes label. By default, the category notes label is visible. */ visible?: boolean; } /** * The configuration options of the category axis date range labels. */ export declare interface CategoryAxisRangeLabels extends CategoryAxisLabels { /** * @hidden */ position?: AxisLabelsPosition; /** * @hidden */ skip?: number; /** * @hidden */ step?: number; /** * If set to `true`, the Chart displays the category axis date range labels. * By default, the category axis date range labels are not visible. */ visible?: boolean; } /** * @hidden */ export declare interface CategoryAxisSelect { /** * The lower boundary of the selected range. */ from?: any; /** * The maximum value which the user can select. */ max?: any; /** * The minimum value which the user can select. */ min?: any; /** * The mousewheel configuration of the selection. If set to `false`, the mousewheel does not update the selection. */ mousewheel?: boolean | MousewheelSelect; /** * The upper boundary of the selected range. The category with the specified index (date) is not included in the selected range unless the axis is justified. To select all categories, set a value that is larger than the last category index (date). */ to?: any; } /** * @hidden */ export declare interface CategoryAxisTitle { /** * 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 to the vertical axis). * - `"bottom"`—The axis title is positioned on the bottom (applicable to the vertical axis). * - `"left"`—The axis title is positioned on the left (applicable to the horizontal axis). * - `"righ