Components

Barcodes
Buttons
Charts

Conversational UIupdated
Data Query
Date Inputs
Date Math
Dialogs
Drawing
Dropdowns
Editorupdated
Excel Export
File Saver
Filter
Gantt
Gauges
Gridupdated
Icons
Indicators
Inputs
Labels
Layoutupdated
ListBoxnew
ListView
Mapbeta
Menus
Navigation
Notification
Pager
PDF Export
PivotGridbeta
Popup
ProgressBars
Ripple
Schedulerupdated
ScrollView
Sortable
ToolBar
Tooltips
TreeList
TreeView
Typography
Uploads

Styling & Themes

Common Features

Project Setup

Components / Charts / API / LegendComponent /

New to Kendo UI for Angular? Start a free 30-day trial

LegendComponent

The configuration options of the Chart legend (see example).

Selector

kendo-chart-legend

Inputs

NAME	TYPE	DESCRIPTION
align	"center" \| "start" \| "end"	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"`. 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.
background	string	The background color of the legend. Accepts a valid CSS color string, including hex and rgb.
border	Border	The border of the legend.
height	number	The height of the legend when `legend.orientation` is set to `"vertical"`.
inactiveItems	LegendInactiveItems	The configuration of the Chart inactive legend items.
item	LegendItem	The configuration of the Chart legend item.
labels	LegendLabels	The label configuration of the Chart legend.
margin	number \| Margin	The margin of the Chart legend. A numeric value sets all paddings.
markers	LegendMarkers	The configuration of the Chart legend markers.
offsetX	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.
offsetY	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.
orientation	"vertical" \| "horizontal"	The orientation of the legend items. The supported values are: `"vertical"`—The legend items are added vertically. `"horizontal"`—The legend items are added horizontally.
padding	number \| Padding	The padding of the Chart legend. A numeric value sets all paddings.
position	"top" \| "bottom" \| "left" \| "right" \| "custom"	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` and `legend.offsetY`.
reverse	boolean	If set to `true`, the legend items are reversed.
spacing	number	The distance (in pixels) between the legend items. Defaults to `6`.
title	LegendTitle	The title of the Chart legend. By default, the Chart will not render a legend title.
visible	boolean	If set to `true`, the Chart displays the legend. By default, the Chart legend is visible.
width	number	The legend width when the `legend.orientation` is set to `"horizontal"`.

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. `item.notifyChanges({ visible: true });`

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.

item.notifyChanges({ visible: true });

Parameters
changes	any	An object containing the updated input fields.

LegendComponent

Selector

Inputs

Methods

Parameters

In this article

Not finding the help you need?

Getting Started

Support Resources

Community