Legend
The Chart legend displays the name of the configured data series and provides visual indicators for each series. You can customize the legend's position, appearance, markers, and behavior to match your application's design and functionality requirements.
Basic Configuration
To customize the legend, use the kendo-chart-legend configuration component.
By default, the name of the series is displayed in the legend, but you must consider the following:
- Series without a specified name or a defined
labels.contentfunction that returns a non-empty value will not display legend items. - To render a legend item for the Pie, Donut, Funnel and Pyramid series, provide the items with a
categoryfield.
The following example demonstrates how to configure the position and orientation of the Chart legend.
Hiding the Legend
If you set the series names, the Angular Chart displays a default legend. You can hide the legend by using its visible property.
Customizing the Position
You can remove the legend from the flow and absolutely position it by setting the position to custom and configuring the offsetX and offsetY options.
Adding a Title
The Chart legend can be configured to hold a title with customizable layout and content. To define a title, provide a LegendTitle object to the legend configuration.
Legend Items
The legend item types and settings are derived from the series configuration. For additional configuration, use the series legendItem property.
Item Types
Legend items support different visual representations based on the series type. Each series automatically renders an appropriate legend item that matches its visual appearance in the chart. You can override the default behavior 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 create custom shapes for the legend items using the Drawing API. Pass a custom function to the visual property of the LegendItemComponent. The following example demonstrates how a custom label can be drawn in the shape of its corresponding series.
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
Clicking the legend items toggles the visibility of the clicked series. To disable or customize this behavior, cancel the legendItemClick event.
The following example demonstrates how to implement the toggle feature by binding the series visibility to a controller field.
Inline Series
If the Angular Chart series are declared as plain objects, the default click action is not available.
The following example demonstrates how to toggle the series visibility by replacing the series definition. If you remove the legendItemClick handler, the series visibility will not change when the legend item is clicked.
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