New to Kendo UI for AngularStart a free 30-day trial

LegendComponent

Represents the Kendo UI for Angular Chart Legend configuration (see example).

html
<kendo-chart>
 <kendo-chart-legend position="top" [visible]="true">
 </kendo-chart-legend>
</kendo-chart>

Selector

kendo-chart-legend

Inputs

NameTypeDefaultDescription

align

"center" | "start" | "end"

'center'

Specifies the alignment of the legend. The legend is horizontally aligned when legend.position is set to "top" or "bottom". The legend is vertically aligned when legend.position is set to "left" or "right".

background

string

'white'

Specifies the background color of the legend. Accepts a valid CSS color string, including hex and rgb.

border

Border

Specifies the border configuration of the legend.

focusHighlight?

FocusHighlight

Specifies the focus highlight configuration of the legend.

height

number

Specifies the height of the legend.

inactiveItems

LegendInactiveItems

Specifies the inactive items configuration of the legend.

item

LegendItem

Specifies the item configuration of the legend.

labels

LegendLabels

Specifies the labels configuration of the legend.

margin

number | Margin

5

Specifies the margin of the Chart legend. A numeric value sets all paddings.

markers

LegendMarkers

Specifies the markers configuration of the legend.

offsetX

number

0

Specifies 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.

offsetY

number

0

Specifies 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.

orientation

"horizontal" | "vertical"

'vertical'

Specifies the orientation of the legend items.

padding

number | Padding

5

Specifies the padding of the Chart legend. A numeric value sets all paddings.

position

"top" | "bottom" | "left" | "right" | "custom"

'right'

Specifies the positions of the Chart legend. Setting the legend position to custom allows you to position the legend using the legend.offsetX and legend.offsetY options.

reverse

boolean

false

Determines whether the legend items are reversed.

spacing

number

Specifies the spacing between legend items.

title

LegendTitle

Specifies the title configuration of the legend.

visible

boolean

true

Determines whether the Chart displays the legend. By default, the Chart legend is visible.

width

number

Specifies the width of the legend.

Methods

notifyChanges

Updates the component fields with the specified values and refreshes the Chart.

Use this method when the configuration values cannot be set through the template.

ts
item.notifyChanges({ visible: true });
Parameters

changes

any

An object containing the updated input fields.

In this article
SelectorInputsMethods
Not finding the help you need?
Contact Support