Labels
The Angular Chart renders labels on both the axes and the data series. Axis labels display category names or numeric values along the category axis and value axis (for example, $20,000). Series labels display data values directly on or near the data points (for example, 64,000). For Scatter and ScatterLine series, the Chart uses X and Y axes instead. By default, axis labels are visible and series labels are hidden.
Customizing the Label Appearance
The appearance of both axis and series labels can be customized through a common set of properties. Set the color, background, font, border, margin, and padding properties to adjust the text color, background fill, font family, size, weight, border, and spacing of the labels.
These properties are available on all axis label components, including CategoryAxisLabelsComponent, ValueAxisLabelsComponent, XAxisLabelsComponent, and YAxisLabelsComponent. For series labels, use the SeriesLabelsComponent.
The following example demonstrates how to configure appearance properties for both axis and series labels interactively.
Controlling the Label Placement
The axis label components expose the following properties that control where and how labels appear on the axis:
mirror—Flips the labels to the opposite side of the axis.position—Moves the labels to the"start","end", or"onAxis"position relative to the crossing axis.rotation—Rotates the labels by a fixed angle in degrees. Set to"auto"to rotate labels only when they overlap.step—Renders every nth label. For example, astepof2renders every other label.skip—Skips the first n labels. For example, askipof1hides the first label.
These properties are available on CategoryAxisLabelsComponent, ValueAxisLabelsComponent, XAxisLabelsComponent, and YAxisLabelsComponent. Use step and skip to reduce label density on axes with many data points. Use rotation to prevent labels from overlapping on narrow charts.
The SeriesLabelsComponent supports position and rotation. The available position values depend on the series type. Common values include "outsideEnd" and "insideEnd" for Bar and Column series, and "above", "below", "left", and "right" for series that render points. For the full list of supported values per series type, refer to the position API reference.
The following example demonstrates how to configure axis and series label placement properties interactively.
Customizing the Label Content
By default, axis labels display numeric values or category names, and series labels display unformatted data values. You can customize this content through format strings, content callbacks, or custom visual functions.
Using Format Strings
Set the format property to apply a format string to the label text. Format strings use standard number and date format specifiers. For the full list of available formats, refer to the kendo-intl library.
Formatting Axis Labels
The following example formats the value axis labels as currency values by using the {0:c0} format string.
Formatting Series Labels
The following example formats the series labels as currency values by using the same {0:c0} format string on the series label component.
Using Format Placeholders
Format strings for series labels can contain multiple value placeholders—for example, an X and Y value for the Scatter series. The following table lists the available placeholders by series type.
| Series Type | Placeholders |
|---|---|
| Area, Bar, Column, Funnel, Pyramid, Line, and Pie | {0}—value |
| Box Plot |
|
| Bubble |
|
| Bullet |
|
| RangeBar and RangeArea |
|
| Scatter and ScatterLine |
|
| Candlestick and OHLC |
|
The following example uses multiple placeholders to display both coordinate values on Scatter series labels.
Using Content Function Callbacks
For more control over the label text, assign a content callback function. The function receives a context argument and returns a string. Use a lambda (arrow function) to capture class-level properties and methods.
The function receives an AxisLabelContentArgs parameter for axis labels, or a SeriesLabelsContentArgs parameter for series labels.
The following example appends a unit suffix to the value axis labels through a content callback.
The following example converts large numbers to a compact format on the series labels.
Include a newline character (\n) in the returned string to render multi-line labels.
Rendering Custom Visuals
For full control over label rendering, assign a visual function. The function receives a single parameter of type AxisLabelVisualArgs or SeriesLabelsVisualArgs and returns a group of Drawing primitives. Call e.createVisual() to get the default label element and modify or combine it with custom shapes.
The following example highlights weekend category labels with a colored background rectangle.
The following example wraps series labels in a color-coded badge based on a pass/fail threshold.
Support and Learning Resources
- Chart Labels Homepage
- Getting Started with the Kendo UI for Angular Chart
- API Reference of the Chart
- Axes
- Chart Area
- Crosshairs
- Error Bars
- Legend
- 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