@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.
97 lines (96 loc) • 3.84 kB
TypeScript
/**-----------------------------------------------------------------------------------------
* Copyright © 2024 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the project root for more information
*-------------------------------------------------------------------------------------------*/
import { Border, LegendLabels, Margin, Padding, LegendTitle } from '../common/property-types';
import { LegendInactiveItems } from './legend/inactive-items.interface';
import { LegendItem } from './legend/item.interface';
import { LegendMarkers } from './legend/markers.interface';
/**
* The configuration options of the Chart legend ([see examples](slug:legend_chart_charts)).
*/
export interface Legend {
/**
* The legend is horizontally aligned when [`legend.position`]({% slug api_charts_legend %}#toc-position) is set to `"top"` or `"bottom"`.
* The legend is vertically aligned when [`legend.position`]({% slug api_charts_legend %}#toc-position) is set to `"left"` or `"right"`.
*/
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`]({% slug api_charts_legend %}#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.
*/
orientation?: 'vertical' | 'horizontal';
/**
* The padding of the Chart legend. A numeric value sets all paddings.
*/
padding?: Padding | number;
/**
* The positions of the Chart legend.
* Setting the legend position to `custom` allows you to position the legend using the [`legend.offsetX`](slug:api_charts_legend#toc-offsetx) and [`legend.offsetY`](slug:api_charts_legend#toc-offsety) options.
*/
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. By default, the Chart legend is visible.
*/
visible?: boolean;
/**
* The legend width when the [`legend.orientation`]({% slug api_charts_legend %}#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 configuration of the Chart legend markers.
*/
markers?: LegendMarkers;
/**
* The distance (in pixels) between the legend items. Defaults to `6`.
*/
spacing?: number;
/**
* The title of the Chart legend.
* By default, the Chart will not render a legend title.
*/
title?: LegendTitle;
}