Legend
The Chart legend displays the name of the configured data series.
Legend Items Visibility
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.
Basic Legend Settings
To customize the legend, use the kendo-chart-legend configuration component.
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.
The following example demonstrates how to hide the legend by using its visible property.
Configuring the Legend Items
The Legend Item types and settings are derived from the series configuration. For additional configuration, use the series legendItem property.
The following example shows the different Legend Item types:
Clicking Legend Items
Default Behavior
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 build in 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.
Customizing the Position
It is possible to remove the legend from the flow and to absolutely position it by setting the position to custom and configuring the offsetX and offsetY options.
Customizing the Shape
The Drawing API enables the developer to create any custom shape for the legend items. To do so, 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.
Setting a Title
The Chart legend section can be configured to hold a title with customizable layout and content.
To define a title, provide a LegendTitle object to the legend configuration.
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