@progress/kendo-angular-charts
Version:
Kendo UI Charts for Angular - A comprehensive package for creating beautiful and interactive data visualization. Every chart type, stock charts, and sparklines are included.
90 lines (89 loc) • 4.2 kB
TypeScript
/**-----------------------------------------------------------------------------------------
* Copyright © 2026 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the project root for more information
*-------------------------------------------------------------------------------------------*/
import { drawing } from '@progress/kendo-drawing';
import { AxisLabelContentArgs, AxisLabelsPosition, AxisLabelVisualArgs, Border, DateFormats, LabelRotation } from '../../common/property-types';
import { Margin, Padding } from '../../common/property-types';
/**
* Represents the configuration of the X-axis labels.
*/
export interface XAxisLabels {
/**
* Specifies the background color of the labels. Accepts a valid CSS color string, including HEX and RGB.
*/
background?: string;
/**
* Specifies the border of the labels.
*/
border?: Border;
/**
* Specifies the text color of the labels. Accepts a valid CSS color string, including HEX and RGB.
*/
color?: string;
/**
* Specifies a function which returns the label content.
* You can split the text into multiple lines by using the line feed characters (`"\n"`).
*/
content?: (e: AxisLabelContentArgs) => string;
/**
* Specifies the culture to use when formatting date values.
* You must load the specified culture as demonstrated in the [Internationalization Overview](https://www.telerik.com/kendo-angular-ui/components/globalization/internationalization).
*/
culture?: string;
/**
* Specifies the format for displaying the labels when the X values are dates. Uses the [`format`](https://www.telerik.com/kendo-angular-ui/components/globalization/internationalization/api/intlservice#format) of IntlService.
* Contains one placeholder (`"{0}"`) which represents the category value.
* Charts select the appropriate format for the current [`xAxis.baseUnit`](https://www.telerik.com/kendo-angular-ui/components/charts/api/xaxis#baseunit). Setting the
* [`categoryAxis.labels.format`](https://www.telerik.com/kendo-angular-ui/components/charts/api/categoryaxislabels#format) option overrides the date formats.
*/
dateFormats?: DateFormats;
/**
* Specifies the font style of the labels.
*/
font?: string;
/**
* Specifies the format for displaying the labels. Uses the [`format`](https://www.telerik.com/kendo-angular-ui/components/globalization/internationalization/api/intlservice#format) method of IntlService.
* Contains one placeholder (`"{0}"`) which represents the category value.
*/
format?: string;
/**
* Specifies the margin of the labels. A numeric value sets all margins.
*/
margin?: Margin | number;
/**
* Determines whether the Chart mirrors the axis labels and ticks.
* When 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;
/**
* Specifies the padding of the labels. A numeric value sets all paddings.
*/
padding?: Padding | number;
/**
* Specifies the rotation angle of the labels. By default, the labels are not rotated. 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';
/**
* Specifies the position of the axis labels. By default, labels are positioned next to the axis.
*/
position?: AxisLabelsPosition;
/**
* Specifies the number of labels to skip.
*/
skip?: number;
/**
* Specifies 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 X-axis labels. By default, the X-axis labels are visible.
*/
visible?: boolean;
/**
* Specifies a function for creating custom visuals for the labels.
*/
visual?: (e: AxisLabelVisualArgs) => drawing.Element;
}