@progress/kendo-react-charts
Version:
React Chart renders a wide range of high-quality data visualizations. KendoReact Charts package
110 lines (109 loc) • 5.99 kB
TypeScript
/**
* @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, Margin, Padding, SeriesLabelsVisualArgs, SeriesLabelsPosition } from '../../common/property-types.js';
import { SeriesLabelsFrom } from './labels.from.interface.js';
import { SeriesLabelsTo } from './labels.to.interface.js';
/**
* @hidden
*/
export interface SeriesLabels {
/**
* The alignment of the label when [`series.type`](https://www.telerik.com/kendo-react-ui/components/charts/api/chartseriesitemprops#toc-type) is set to `"donut"`, `"funnel"`, `"pyramid"` or `"pie"`.
*
* The supported values for `"donut"` and `"pie"` are:
* - `"circle"`—The labels are positioned in circle around the Chart.
* - `"column"`—The labels are positioned in columns to the left and right of the Chart.
*
* The supported values for `"funnel"` and `"pyramid"` are:
* - `"center"`—The labels are positioned in the center over the funnel segment.
* - `"right"`—The labels are positioned on the right side of the Chart and, if there is enough space, do not overlap the funnel segments.
* - `"left"`—The labels are positioned on the left side of the Chart and, if there is enough space, do not overlap the funnel segments.
*/
align?: 'circle' | 'column' | 'center' | 'right' | 'left';
/**
* 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 Chart series label content. You can split the text into multiple lines by using line feed characters (`"\n"`).
*
* The fields available in the function argument are:
*
* - `category`—The category name. Available for the Area, Bar, Column, Bubble, Donut, Line, Pie, and Waterfall series.
* - `dataItem`—The original data item used to construct the point. If binding to an array, it will be `null`.
* - `percentage`—The point value represented as a percentage value. Available only for the Donut, Pie, and 100% stacked charts.
* - `series`—The data series.
* - `stackValue`—The cumulative point value on the stack. Available only for the stackable series.
* - `value`—The point value. Can be a number or object containing each bound field.
* - `runningTotal`—The sum of point values since the last `"runningTotal"` summary point. Available for the Waterfall series.
* - `total`—The sum of all previous series values. Available for the Waterfall series.
*/
content?: (e: any) => string;
/**
* The distance between the labels when [`series.type`](https://www.telerik.com/kendo-react-ui/components/charts/api/chartseriesitemprops#toc-type) is set to `"donut"` or `"pie"`.
*/
distance?: number;
/**
* The font style of the labels.
*/
font?: string;
/**
* The format of the labels. Uses the [`format`](https://www.telerik.com/kendo-react-ui/components/intl/api/intlservice#toc-format) method of IntlService.
*/
format?: string;
/**
* The margin of the labels. A numeric value sets all margins.
*/
margin?: Margin | number;
/**
* The padding of the labels. A numeric value sets all paddings. Bar and Column series always apply full padding and ignore this setting.
*/
padding?: Padding | number;
/**
* The position of the labels.
*/
position?: SeriesLabelsPosition;
/**
* If set to `true`, the Chart displays the series labels. By default, the Chart series labels are not displayed.
*/
visible?: boolean;
/**
* A function that can be used to create a custom visual for the labels.
*
* 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.
* - `options`—The label options.
* - `createVisual`—A function that can be used to get the default visual.
* - `sender`—The Chart instance (might be `undefined`).
*/
visual?: (e: SeriesLabelsVisualArgs) => drawing.Element;
/**
* The `from` label configuration of the Chart series. The Chart displays the series from labels when either the [`series.labels.visible`](https://www.telerik.com/kendo-react-ui/components/charts/api/chartserieslabelsprops#toc-visible) or the [`series.labels.from.visible`](https://www.telerik.com/kendo-react-ui/components/charts/api/chartseriesdefaultslabelsfromprops#toc-visible) option is set to `true`.
*/
from?: SeriesLabelsFrom;
/**
* The `to` label configuration of the Chart series. The Chart displays the series to labels when either the [`series.labels.visible`](https://www.telerik.com/kendo-react-ui/components/charts/api/chartserieslabelsprops#toc-visible) or the [`series.labels.to.visible`](https://www.telerik.com/kendo-react-ui/components/charts/api/chartserieslabelstoprops#toc-visible) option is set to `true`.
*/
to?: SeriesLabelsTo;
/**
* React child components that can be used to configure nested chart series label components.
*
* Supported child components include label configuration components for specialized chart types.
*/
children?: React.ReactNode;
}