@progress/kendo-react-charts 13.3.0-develop.9 → 13.4.0-develop.1

package/option-types/category-axis-item/notes.label.interface.d.ts

@@ -0,0 +1,53 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { Border, NoteLabelPosition } from '../../common/property-types.js';
+/**
+ * @hidden
+ */
+export 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`](https://www.telerik.com/kendo-react-ui/components/intl/api/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;
+}

package/option-types/category-axis-item/range-labels.interface.d.ts

@@ -0,0 +1,31 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { AxisLabelsPosition } from '../../common/property-types.js';
+import { CategoryAxisLabels } from './labels.interface.js';
+/**
+ * The configuration options of the category axis date range labels.
+ */
+export 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;
+}

package/option-types/category-axis-item/select.interface.d.ts

@@ -0,0 +1,33 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { MousewheelSelect } from '../../common/property-types.js';
+/**
+ * @hidden
+ */
+export 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;
+}

package/option-types/category-axis-item/title.interface.d.ts

@@ -0,0 +1,72 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { drawing } from '@progress/kendo-drawing';
+import { AxisTitlePosition, Border, Margin, Padding, TitleVisualArgs } from '../../common/property-types.js';
+/**
+ * @hidden
+ */
+export 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).
+     * - `"right"`—The axis title is positioned on the right (applicable to 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 category axis title. By default, the category 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`](https://www.telerik.com/kendo-react-ui/components/drawing/api/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;
+}

package/option-types/category-axis-item.interface.d.ts

@@ -0,0 +1,166 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { AutoBaseUnitSteps, AxisLine, AxisTicks, CategoryBaseUnit, GridLines, PlotBand, WeekStartDay } from '../common/property-types.js';
+import { CategoryAxisCrosshair } from './category-axis-item/crosshair.interface.js';
+import { CategoryAxisLabels } from './category-axis-item/labels.interface.js';
+import { CategoryAxisNotes } from './category-axis-item/notes.interface.js';
+import { CategoryAxisRangeLabels } from './category-axis-item/range-labels.interface.js';
+import { CategoryAxisSelect } from './category-axis-item/select.interface.js';
+import { CategoryAxisTitle } from './category-axis-item/title.interface.js';
+/**
+ * @hidden
+ */
+export 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](https://www.telerik.com/kendo-react-ui/components/charts/chart/elements/axes#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`](https://www.telerik.com/kendo-react-ui/components/charts/api/chartcategoryaxisitemprops#toc-baseunitstep) that the total number of categories does not exceed [`categoryAxis.maxDateGroups`](https://www.telerik.com/kendo-react-ui/components/charts/api/chartcategoryaxisitemprops#toc-maxdategroups).
+     *
+     * Series data is aggregated for the specified base unit by using the [`series.aggregate`](https://www.telerik.com/kendo-react-ui/components/charts/api/chartseriesitemprops#toc-aggregate) function.
+     */
+    baseUnit?: CategoryBaseUnit;
+    /**
+     * The step (interval) between the categories in base units ([see example](https://www.telerik.com/kendo-react-ui/components/charts/chart/elements/axes#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`](https://www.telerik.com/kendo-react-ui/components/charts/api/chartcategoryaxisitemprops#toc-maxdategroups). The option is ignored if [`categoryAxis.baseUnit`](https://www.telerik.com/kendo-react-ui/components/charts/api/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`](https://www.telerik.com/kendo-react-ui/components/charts/api/chartcategoryaxislabelsprops#toc-color) and [`categoryAxis.line.color`](https://www.telerik.com/kendo-react-ui/components/charts/api/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`](https://www.telerik.com/kendo-react-ui/components/charts/api/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](https://www.telerik.com/kendo-react-ui/components/charts/chart/styling#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`](https://www.telerik.com/kendo-react-ui/components/charts/api/chartcategoryaxisitemprops#toc-min) and [`categoryAxis.roundToBaseUnit`](https://www.telerik.com/kendo-react-ui/components/charts/api/chartcategoryaxisitemprops#toc-roundtobaseunit) options to set up a fixed date range.
+     */
+    max?: any;
+    /**
+     * The maximum number of groups (categories) to display when [`categoryAxis.baseUnit`](https://www.telerik.com/kendo-react-ui/components/charts/api/chartcategoryaxisitemprops#toc-baseunit) is set to `"fit"` or [`categoryAxis.baseUnitStep`](https://www.telerik.com/kendo-react-ui/components/charts/api/chartcategoryaxisitemprops#toc-baseunitstep) is set to `"auto"`([see example](https://www.telerik.com/kendo-react-ui/components/charts/chart/elements/axes#toc-selecting-time-intervals)).
+     */
+    maxDateGroups?: number;
+    /**
+     * The maximum number of ticks and labels to display. Applicabable for date category axis ([see example](https://www.telerik.com/kendo-react-ui/components/charts/chart/elements/axes#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](https://www.telerik.com/kendo-react-ui/components/charts/chart/styling#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`](https://www.telerik.com/kendo-react-ui/components/charts/api/chartcategoryaxisitemprops#toc-max) and [`categoryAxis.roundToBaseUnit`](https://www.telerik.com/kendo-react-ui/components/charts/api/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`](https://www.telerik.com/kendo-react-ui/components/charts/api/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`](https://www.telerik.com/kendo-react-ui/components/charts/api/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](https://www.telerik.com/kendo-react-ui/components/charts/chart/elements/selection)). 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`](https://www.telerik.com/kendo-react-ui/components/charts/api/chartcategoryaxistitleprops#toc-text) option.
+     */
+    title?: CategoryAxisTitle;
+}

package/option-types/chart-area.interface.d.ts

@@ -0,0 +1,37 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { Border, Margin } from '../common/property-types.js';
+/**
+ * @hidden
+ */
+export interface ChartingArea {
+    /**
+     * The background color of the Chart area. Accepts a valid CSS color string, including hex and rgb.
+     */
+    background?: string;
+    /**
+     * The border of the Chart area.
+     */
+    border?: Border;
+    /**
+     * The height of the Chart area.
+     */
+    height?: number;
+    /**
+     * The margin of the Chart area. A numeric value sets all margins.
+     */
+    margin?: Margin | number;
+    /**
+     * The background opacity of the Chart area. By default, the background is opaque.
+     */
+    opacity?: number;
+    /**
+     * The width of the Chart area.
+     */
+    width?: number;
+}

package/option-types/legend/inactive-items.interface.d.ts

@@ -0,0 +1,17 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { LegendLabels } from '../../common/property-types.js';
+/**
+ * @hidden
+ */
+export interface LegendInactiveItems {
+    /**
+     * The label configuration of the Chart legend.
+     */
+    labels?: LegendLabels;
+}

package/option-types/legend/item.interface.d.ts

@@ -0,0 +1,124 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { drawing } from '@progress/kendo-drawing';
+import { Border, DashType, LegendItemVisualArgs } from '../../common/property-types.js';
+import { SeriesMarkers } from './../series-item/markers.interface.js';
+/**
+ * The configuration of the Chart legend item.
+ */
+export interface LegendItem {
+    /**
+     * The cursor style of the legend item.
+     */
+    cursor?: string;
+    /**
+     * Sets the type of the legend item.
+     * The default value is based on the series type.
+     */
+    type?: LegendItemType;
+    /**
+     * Sets the configuration of the legend items of type `line`.
+     * This is the default legend item type for all line and scatter series.
+     */
+    line?: LegendItemLine;
+    /**
+     * Sets the configuration of the legend items of type `area`.
+     * By default, all series except line and scatter use this legend type.
+     */
+    area?: LegendItemArea;
+    /**
+     * The markers configuration of the legend item.
+     * Defaults to the series options.
+     */
+    markers?: LegendItemMarkers;
+    /**
+     * The highlight configuration of the legend item.
+     */
+    highlight?: LegendItemHighlight;
+    /**
+     * A function for creating a custom visual for the legend items.
+     *
+     * The available argument fields are:
+     * - `options`—The item options.
+     * - `createVisual`—A function for getting the default visual.
+     * - `series`—The item series.
+     * - `pointIndex`—The index of the point in the series. Available for the Pie, Donut, and Funnel series.
+     */
+    visual?: (e: LegendItemVisualArgs) => drawing.Element;
+}
+/**
+ * The configuration of the Chart legend item markers border.
+ */
+export interface LegendItemMarkersBorder extends Omit<Border, 'width'> {
+}
+/**
+ * The configuration of the Chart legend item markers.
+ */
+export interface LegendItemMarkers extends Omit<SeriesMarkers, 'size' | 'border' | 'rotation' | 'from' | 'to'> {
+    /**
+     * The border of the markers.
+     */
+    border?: LegendItemMarkersBorder;
+}
+/**
+ * The configuration of the Chart legend item highlight state.
+ */
+export interface LegendItemHighlight {
+    /**
+     * If set to `false`, the hover effect of the legend item is disabled.
+     */
+    visible?: boolean;
+    /**
+     * The `markers` configuration of the legend item when it is hovered.
+     */
+    markers?: LegendItemMarkers;
+}
+/**
+ * The configuration of the Chart legend item of type `line`.
+ * Defaults to the series options.
+ */
+export interface LegendItemLine {
+    /**
+     * The color of the legend item. Accepts a valid CSS color string, including HEX and RGB.
+     * Defaults to the series color.
+     */
+    color?: string;
+    /**
+     * The opacity of the legend item.
+     * Defaults to the series opacity.
+     */
+    opacity?: number;
+    /**
+     * The dash type of the legend item.
+     * Defaults to the series dash type.
+     */
+    dashType?: DashType;
+}
+/**
+ * The configuration of the Chart legend items of type `area`.
+ * Defaults to the series options.
+ */
+export interface LegendItemArea {
+    /**
+     * The background color of the legend item. Accepts a valid CSS color string, including HEX and RGB.
+     * Defaults to the series color.
+     */
+    background?: string;
+    /**
+     * The opacity of the legend item.
+     * Defaults to the series opacity.
+     */
+    opacity?: number;
+}
+/**
+ * The type of the Chart legend item.
+ *
+ * - `"line"`&mdash;the legend items are rendered as a line. This is the default value for line charts.
+ * - `"area"`&mdash;the legend items are rendered as a filled rectangle. This is the default value for area charts.
+ */
+export type LegendItemType = 'line' | 'area';

package/option-types/legend/legend-title.interface.d.ts

@@ -0,0 +1,68 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { Element } from '@progress/kendo-drawing';
+import { Border, Margin, Padding, TitleVisualArgs } from '../../common/property-types.js';
+/**
+ * @hidden
+ */
+export interface LegendTitle {
+    /**
+     * The alignment of the title.
+     *
+     * The available options are:
+     * - `"center"`—The text is aligned to the middle.
+     * - `"left"`—The text is aligned to the left.
+     * - `"right"`—The text is aligned to the right.
+     */
+    align?: 'center' | 'left' | 'right';
+    /**
+     * 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 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 margins.
+     */
+    padding?: Padding | number;
+    /**
+     * The position of the title.
+     *
+     * The available options are:
+     * - `"bottom"`—The title is positioned beneath the legend.
+     * - `"top"`—The title is positioned above the legend.
+     */
+    position?: 'top' | 'bottom';
+    /**
+     * The text of the title.
+     * You can split the text into multiple lines by using the line feed characters ("\n").
+     */
+    text?: string;
+    /**
+     * If set to `true`, the Chart displays the Legend title. By default, the title is displayed.
+     */
+    visible?: boolean;
+    /**
+     * A function for creating a custom visual for the title.
+     */
+    visual?: (args: TitleVisualArgs) => Element;
+}