# Legend

The Chart legend displays the name of each data series and provides visual indicators that help users identify series in the chart. You can control the legend position, orientation, markers, title, and interactive behavior.

The following example demonstrates the legend in different configurations across multiple chart types.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/charts/elements/legend/overview/source.txt)

## Displaying the Legend

The Chart renders a legend automatically when at least one series has a [`name`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/seriesitemcomponent#name) property. Each named series generates a corresponding legend item with a matching color marker. [Pie](https://www.telerik.com/kendo-angular-ui-develop/components/charts/series-types/pie), [Donut](https://www.telerik.com/kendo-angular-ui-develop/components/charts/series-types/donut), [Funnel](https://www.telerik.com/kendo-angular-ui-develop/components/charts/series-types/funnel), and [Pyramid](https://www.telerik.com/kendo-angular-ui-develop/components/charts/series-types/pyramid) series render a legend item for each data point and use the [`categoryField`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/series#categoryfield) as the item label. To exclude a specific series from the legend, set its [`visibleInLegend`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/seriesitemcomponent#visibleInLegend) property to `false`.

You can configure the legend in two ways:

* Component approach—Add the [`kendo-chart-legend`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/legendcomponent) component inside the Chart and set its properties declaratively.
* Configuration object approach—Pass a [`Legend`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/legend) object to the [`legend`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/chartcomponent#legend) input of the `kendo-chart` component.

The following example demonstrates how to configure the legend using both methods. The first chart uses the component approach, while the second chart uses the configuration object approach with different property values.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/charts/elements/legend/source.txt)

To customize the appearance of legend text, use the [`labels`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/legendcomponent#labels) property. This property accepts a [`LegendLabels`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/legendlabels) object that controls the font, color, padding, and margin of the legend item text.

## Setting the Legend Position

The [`position`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/legendcomponent#position) property controls where the legend appears relative to the chart area. The available values are `top`, `bottom`, `left`, `right`, and `custom`. When set to `custom`, the legend is removed from the chart layout flow and you can place it at exact pixel coordinates through the [`offsetX`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/legendcomponent#offsetx) and [`offsetY`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/legendcomponent#offsety) properties.

Within a given position, use [`align`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/legendcomponent#align) to adjust the legend to the `start`, `center`, or `end` of its container. The [`orientation`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/legendcomponent#orientation) property determines whether the legend items are arranged `horizontal`ly or `vertical`ly. To fine-tune the layout, [`spacing`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/legendcomponent#spacing) controls the gap between legend items in pixels, and [`reverse`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/legendcomponent#reverse) displays the items in the opposite order of their series definitions.

Use the interactive configurator below to explore the available positioning options.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/charts/elements/legend/positioning/source.txt)

## Adding a Legend Title

The Chart legend supports a title with customizable content and font. To define a title, provide a [`LegendTitle`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/legendtitle) object to the [`title`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/legendcomponent#title) property of the legend.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/charts/chart/legend/title/source.txt)

## Legend Items

The legend item types and settings are derived from the series configuration. For more control, use the series [`legendItem`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/series#legenditem) property.

### Item Types

Each series type automatically renders an appropriate legend item that matches its visual appearance in the chart. You can override the default behavior by using the [`legendItem`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/series#legenditem) property to customize the type and appearance of individual legend items.

The following example shows the different legend item types:

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/charts/elements/legend/legend-items-types/source.txt)

### Custom Item Shapes

You can draw custom shapes for legend items by using the [Drawing API](https://www.telerik.com/kendo-angular-ui-develop/components/drawing). Pass a custom function to the [`visual`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/legenditemcomponent#visual) property of the [`LegendItemComponent`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/legenditemcomponent). The function receives a [`LegendItemVisualArgs`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/legenditemvisualargs) parameter and returns a [Drawing element](https://www.telerik.com/kendo-angular-ui-develop/components/drawing/basic-shapes).

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/charts/elements/legend/custom-shape/source.txt)

### Inactive Items

When a user hides a series by clicking its legend item, the legend label remains visible with a default dimmed appearance. To customize the style of toggled-off legend items, use the [`inactiveItems`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/legendcomponent#inactiveitems) property. This property accepts a [`LegendInactiveItems`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/legendinactiveitems) object that controls the label appearance of hidden series.

The following example applies a gray color and italic font to inactive legend labels. Click a legend item to toggle its series visibility and observe the label styling.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/charts/elements/legend/inactive-items/source.txt)

## Legend Markers

Legend markers are the visual indicators that appear next to each series name in the legend. You can customize their appearance using the [`markers`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/legendcomponent#markers) property of the [`kendo-chart-legend`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/legendcomponent) component.

The following example demonstrates how to configure legend marker properties including shape, size, and visibility.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/charts/elements/legend/markers/source.txt)

### Marker Properties

Control the appearance of legend markers through the following properties:

* [`type`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/legendmarkers#type)—Specifies the shape of the legend markers. Available shapes include `circle`, `square`, `triangle`, `cross`, `rect`, and `roundedRect`. The default value is `circle`.
* [`width`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/legendmarkers#width)—Sets the width of the markers in pixels. The default value is `15`.
* [`height`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/legendmarkers#height)—Sets the height of the markers in pixels. The default value is `3`.
* [`visible`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/legendmarkers#visible)—Controls whether the markers are displayed. By default, markers are visible.
* [`visual`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/legendmarkers#visual)—Specifies a function for creating custom marker shapes using the [Drawing API](https://www.telerik.com/kendo-angular-ui-develop/components/drawing).

### Custom Marker Shapes

You can create custom legend marker shapes by using the `visual` function. This function receives a [`MarkersVisualArgs`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/markersvisualargs) parameter and returns a group of [Drawing primitives](https://www.telerik.com/kendo-angular-ui-develop/components/drawing/basic-shapes) that represent the marker. The `visual` callback provides complete control over the marker appearance, enabling you to create unique shapes that match your design requirements or brand identity.

The following example demonstrates how to render legend markers with custom shapes using the `visual` callback.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/charts/elements/legend/custom-visual-markers/source.txt)

## Interactive Behavior

The Chart legend supports user interactions that control series visibility. By default, clicking a legend item toggles the visibility of its corresponding series. You can customize or disable this behavior through event handling.

### Clicking Legend Items

Click a legend item to toggle the visibility of the corresponding series. To disable or customize this behavior, cancel the [`legendItemClick`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/chartcomponent#legenditemclick) event.

The following example prevents the user from hiding the Europe series and displays a [Kendo UI for Angular Notification](https://www.telerik.com/kendo-angular-ui-develop/components/notification) with the result of each action.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/charts/elements/legend/click-legend-item/source.txt)

### Inline Series

When the Chart series are defined as [configuration objects](https://www.telerik.com/kendo-angular-ui-develop/components/charts/configuration#use-configuration-objects), the default click-to-toggle action is not available. In this case, toggle the series visibility by replacing the series definition and calling `notifyChanges` on the Chart instance.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/charts/elements/legend/inline-series/source.txt)

## Hiding the Legend

To hide the legend, set the [`visible`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/legendcomponent#visible) property to `false` on the `kendo-chart-legend` component or in the [`legend`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/chartcomponent#legend) configuration object.

```html Setting the Legend Visibility through the Component
<kendo-chart>
  <kendo-chart-legend [visible]="false"></kendo-chart-legend>
</kendo-chart>
```

```html Setting the Legend Visibility through the Configuration Object
<kendo-chart [legend]="{ visible: false }">
</kendo-chart>
```

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/charts/elements/legend/hidden/source.txt)

## Support and Learning Resources

* [Getting Started with the Kendo UI for Angular Chart](https://www.telerik.com/kendo-angular-ui-develop/components/charts/installation/getting-started)
* [API Reference of the Chart](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api)
* [Axes](https://www.telerik.com/kendo-angular-ui-develop/components/charts/elements/axes)
* [Chart Area](https://www.telerik.com/kendo-angular-ui-develop/components/charts/elements/chart-area)
* [Crosshairs](https://www.telerik.com/kendo-angular-ui-develop/components/charts/elements/crosshairs)
* [Error Bars](https://www.telerik.com/kendo-angular-ui-develop/components/charts/elements/crosshairs)
* [Labels](https://www.telerik.com/kendo-angular-ui-develop/components/charts/elements/labels)
* [Notes](https://www.telerik.com/kendo-angular-ui-develop/components/charts/elements/notes)
* [Panes](https://www.telerik.com/kendo-angular-ui-develop/components/charts/elements/panes)
* [Plot Area](https://www.telerik.com/kendo-angular-ui-develop/components/charts/elements/plot-area)
* [Plot Bands](https://www.telerik.com/kendo-angular-ui-develop/components/charts/elements/plot-bands)
* [Selection](https://www.telerik.com/kendo-angular-ui-develop/components/charts/elements/selection)
* [Series](https://www.telerik.com/kendo-angular-ui-develop/components/charts/elements/series)
* [Title](https://www.telerik.com/kendo-angular-ui-develop/components/charts/elements/title)
* [Tooltip](https://www.telerik.com/kendo-angular-ui-develop/components/charts/elements/tooltips)
* [Getting Started with Kendo UI for Angular (Online Guide)](https://www.telerik.com/kendo-angular-ui-develop/components/getting-started)
* [Getting Started with Kendo UI for Angular (Video Tutorial)](https://www.telerik.com/campaigns/kendo-ui/using-kendo-ui-with-angular-video-tutorial)
* [Video Courses](https://www.telerik.com/kendo-angular-ui-develop/components/getting-started/video-onboarding)
* [Chart Forum](https://www.telerik.com/forums/kendo-angular-ui?tagId=256)
* [Before You Start: All Things Angular (Telerik Blog Post)](https://www.telerik.com/blogs/all-things-angular)
* [Knowledge Base](https://www.telerik.com/kendo-angular-ui-develop/components/knowledge-base)

## Additional Resources

* [Angular Blogs](https://www.telerik.com/blogs/tag/kendo-ui-for-angular)
* [Angular Videos](https://www.telerik.com/videos/kendo-angular-ui)
* [Kendo UI for Angular Roadmap](https://www.telerik.com/support/whats-new/kendo-angular-ui/roadmap)