@progress/kendo-react-charts
Version:
React Chart renders a wide range of high-quality data visualizations. KendoReact Charts package
107 lines (106 loc) • 4.79 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 { FocusHighlight } from '@progress/kendo-charts';
import { Border, LegendLabels, Margin, Padding } from '../common/property-types.js';
import { LegendInactiveItems } from './legend/inactive-items.interface.js';
import { LegendItem } from './legend/item.interface.js';
import { LegendTitle } from './legend/legend-title.interface.js';
/**
* @hidden
*/
export interface Legend {
/**
* The legend is horizontally aligned when [`legend.position`](https://www.telerik.com/kendo-react-ui/components/charts/api/chartlegendprops#toc-position) is set to `"top"` or `"bottom"`. The legend is vertically aligned when [`legend.position`](https://www.telerik.com/kendo-react-ui/components/charts/api/chartlegendprops#toc-position) is set to `"left"` or `"right"`.
*
* The supported values are:
* - `"start"`—The legend is aligned to the start.
* - `"center"`—The legend is aligned to the center.
* - `"end"`—The legend is aligned to the end.
*/
align?: 'start' | 'center' | 'end';
/**
* The background color of the legend. Accepts a valid CSS color string, including hex and rgb.
*/
background?: string;
/**
* The border of the legend.
*/
border?: Border;
/**
* The height of the legend when [`legend.orientation`](https://www.telerik.com/kendo-react-ui/components/charts/api/chartlegendprops#toc-orientation) is set to `"vertical"`.
*/
height?: number;
/**
* The label configuration of the Chart legend.
*/
labels?: LegendLabels;
/**
* The margin of the Chart legend. A numeric value sets all paddings.
*/
margin?: Margin | number;
/**
* The X offset of the Chart legend. The offset is relative to the default position of the legend. For example, a value of `20` moves the legend 20 pixels to the right of its initial position. Negative values move the legend to the left of its current position.
*/
offsetX?: number;
/**
* The Y offset of the chart legend. The offset is relative to the current position of the legend. For example, a value of `20` moves the legend 20 pixels down from its initial position. Negative values move the legend upwards from its current position.
*/
offsetY?: number;
/**
* The orientation of the legend items.
*
* The supported values are:
* - `"vertical"`—The legend items are added vertically.
* - `"horizontal"`—The legend items are added horizontally.
*/
orientation?: 'vertical' | 'horizontal';
/**
* The padding of the Chart legend. A numeric value sets all paddings.
*/
padding?: Padding | number;
/**
* The positions of the Chart legend.
*
* The supported values are:
* - `"top"`—The legend is positioned on the top.
* - `"bottom"`—The legend is positioned on the bottom.
* - `"left"`—The legend is positioned on the left.
* - `"right"`—The legend is positioned on the right.
* - `"custom"`—The legend is positioned by using [`legend.offsetX`](https://www.telerik.com/kendo-react-ui/components/charts/api/chartlegendprops#toc-offsetx) and [`legend.offsetY`](https://www.telerik.com/kendo-react-ui/components/charts/api/chartlegendprops#toc-offsety).
*/
position?: 'top' | 'bottom' | 'left' | 'right' | 'custom';
/**
* If set to `true`, the legend items are reversed.
*/
reverse?: boolean;
/**
* If set to `true`, the Chart displays the legend ([see example](https://www.telerik.com/kendo-react-ui/components/charts/chart/elements/legend#toc-hiding-the-legend)). By default, the Chart legend is visible.
*/
visible?: boolean;
/**
* The legend width when the [`legend.orientation`](https://www.telerik.com/kendo-react-ui/components/charts/api/chartlegendprops#toc-orientation) is set to `"horizontal"`.
*/
width?: number;
/**
* The configuration of the Chart inactive legend items.
*/
inactiveItems?: LegendInactiveItems;
/**
* The configuration of the Chart legend item.
*/
item?: LegendItem;
/**
* The title of the Chart legend.
* By default, the Chart will not render a legend title.
*/
title?: LegendTitle;
/**
* The focus highlight configuration options of the Chart legend.
*/
focusHighlight?: FocusHighlight;
}