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.
Displaying the Legend
The Chart renders a legend automatically when at least one series has a name property. Each named series generates a corresponding legend item with a matching color marker. Pie, Donut, Funnel, and Pyramid series render a legend item for each data point and use the categoryField as the item label. To exclude a specific series from the legend, set its visibleInLegend property to false.
You can configure the legend in two ways:
- Component approach—Add the
kendo-chart-legendcomponent inside the Chart and set its properties declaratively. - Configuration object approach—Pass a
Legendobject to thelegendinput of thekendo-chartcomponent.
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.
To customize the appearance of legend text, use the labels property. This property accepts a LegendLabels object that controls the font, color, padding, and margin of the legend item text.
Setting the Legend Position
The 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 and offsetY properties.
Within a given position, use align to adjust the legend to the start, center, or end of its container. The orientation property determines whether the legend items are arranged horizontally or vertically. To fine-tune the layout, spacing controls the gap between legend items in pixels, and reverse displays the items in the opposite order of their series definitions.
Use the interactive configurator below to explore the available positioning options.
Adding a Legend Title
The Chart legend supports a title with customizable content and font. To define a title, provide a LegendTitle object to the title property of the legend.
Legend Items
The legend item types and settings are derived from the series configuration. For more control, use the 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 property to customize the type and appearance of individual legend items.
The following example shows the different legend item types:
Custom Item Shapes
You can draw custom shapes for legend items by using the Drawing API. Pass a custom function to the visual property of the LegendItemComponent. The function receives a LegendItemVisualArgs parameter and returns a Drawing element.
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 property. This property accepts a 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.
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 property of the kendo-chart-legend component.
The following example demonstrates how to configure legend marker properties including shape, size, and visibility.
Marker Properties
Control the appearance of legend markers through the following properties:
type—Specifies the shape of the legend markers. Available shapes includecircle,square,triangle,cross,rect, androundedRect. The default value iscircle.width—Sets the width of the markers in pixels. The default value is15.height—Sets the height of the markers in pixels. The default value is3.visible—Controls whether the markers are displayed. By default, markers are visible.visual—Specifies a function for creating custom marker shapes using the Drawing API.
Custom Marker Shapes
You can create custom legend marker shapes by using the visual function. This function receives a MarkersVisualArgs parameter and returns a group of Drawing primitives 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.
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 event.
The following example prevents the user from hiding the Europe series and displays a Kendo UI for Angular Notification with the result of each action.
Inline Series
When the Chart series are defined as 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.
Hiding the Legend
To hide the legend, set the visible property to false on the kendo-chart-legend component or in the legend configuration object.
<kendo-chart>
<kendo-chart-legend [visible]="false"></kendo-chart-legend>
</kendo-chart>Support and Learning Resources
- Getting Started with the Kendo UI for Angular Chart
- API Reference of the Chart
- Axes
- Chart Area
- Crosshairs
- Error Bars
- Labels
- Notes
- Panes
- Plot Area
- Plot Bands
- Selection
- Series
- Title
- Tooltip
- Getting Started with Kendo UI for Angular (Online Guide)
- Getting Started with Kendo UI for Angular (Video Tutorial)
- Video Courses
- Chart Forum
- Before You Start: All Things Angular (Telerik Blog Post)
- Knowledge Base