Labels
The Angular Chart enables you to set the appearance and customize the content of the series and axis labels. By default, the series and axis Chart labels display an unformatted numeric value or a category name without styling.
Customizing the Label Appearance
You can control the appearance of the labels through the following properties:
background
border
color
font
margin
padding
Axis Labels
The following example demonstrates how to customize the appearance of the axis label by using the ValueAxisLabels
setting.
Series Labels
The following example demonstrates how to customize the appearance of the series label by using the SeriesLabels
setting.
Customizing the Label Content
Normally, the series and axis Chart labels display an unformatted numeric value or a category name.
Using Format Strings
The Angular Chart enables you to assign a format string for the label. For the full list of available formats, refer to the kendo-intl library.
Showing Format Labels as Currency Values
The following example demonstrates how to format the value axis labels as a currency value.
The following example demonstrates how to format the series labels as a currency value.
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.
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 demonstrates how to use value placeholders for the Scatter series labels.
Using Content Function Callbacks
If provided, a content
function is called to compute the text of each label. The function receives different parameters depending on the context. For more information, refer to the documentation on CategoryAxisLabelsComponent.content
, ValueAxisLabelsComponent.content
and SeriesLabelsComponent.content
.
The following example demonstrates how to override the content of the axis labels.
The following example demonstrates how to override the content of the series labels.
The following example demonstrates how to render the label content in multiple lines.
Rendering Custom Visuals
You can customize the rendering of labels by using a visual
function. The function receives a single parameter of type AxisLabelVisualArgs
or SeriesLabelsVisualArgs
, and returns a group of Drawing primitives to represent the label.
The following example demonstrates how to override the rendering of the axis labels.
The following example demonstrates how to override the rendering of the series labels.
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