@progress/kendo-react-charts
Version:
React Chart renders a wide range of high-quality data visualizations. KendoReact Charts package
95 lines (94 loc) • 3.58 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 { PlotBandLabelVisualArgs } from '../common/property-types.js';
import { Border } from './border.interface.js';
import { Margin } from './margin.interface.js';
import { Padding } from './padding.interface.js';
/**
* The appearance configuration for the plot band label.
*/
export interface PlotBandLabel {
/**
* The horizontal alignment of the label text.
*
* By default, the label is aligned to the left.
*
* The supported values are:
* - `"center"`—The label is positioned in the center of the plot band.
* - `"right"`—The label is positioned on the right side of the plot band.
* - `"left"`—The label is positioned on the left side of the plot band.
*/
align?: 'center' | 'right' | 'left';
/**
* 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 color of the plot band label text.
* Accepts a valid [CSS `color`](https://developer.mozilla.org/en-US/docs/Web/CSS/color)
* configuration string, including hex and rgb.
*/
color?: string;
/**
* The font of the plot band label text.
* Accepts a valid [CSS `font`](https://developer.mozilla.org/en-US/docs/Web/CSS/font)
* configuration string.
*/
font?: string;
/**
* The margin of the label. A numeric value sets all margins.
*/
margin?: Margin | number;
/**
* The padding of the label. A numeric value sets all paddings.
*/
padding?: Padding | number;
/**
* The vertical position of the label inside the plot band.
*
* By default, the label is aligned to the top.
*
* The supported values are:
* - `"bottom"`—The label is positioned on the bottom of the plot band.
* - `"center"`—The label is positioned in the center of the plot band.
* - `"top"`—The label is positioned on the top of the plot band.
*/
position?: 'bottom' | 'center' | 'top';
/**
* The rotation angle of the label. By default, the label is not rotated.
*/
rotation?: number;
/**
* The text of the label.
*
* > The text can be split into multiple lines by using line feed characters ("\n").
*/
text?: string;
/**
* If set to `false`, the will not display the plot band label.
* By default, the plot band labels are not displayed.
*/
visible?: boolean;
/**
* A function that can be used to create a custom visual for the label.
*
* 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`—A reference to the Chart instance.
*/
visual?: (e: PlotBandLabelVisualArgs) => drawing.Element;
}