Blazor Toolkit
Overview

Data labels are used to display values directly on data points, improving readability and Chart interpretation. This example demonstrates enabling data labels for multiple column series by setting the Visible property to true in the ChartDataLabel component. It also shows rotation, formatting, and tooltips.

Text Mapping

Text mapping allows custom text to be displayed as data labels by binding a specific field from the data source. This example demonstrates mapping energy consumption text values to data labels in a Bar Chart by specifying the mapping field in the Name property of the ChartDataLabel component.

Format

Data label formatting controls how values are displayed on data points. This example demonstrates applying numeric formatting to data labels using the Format property in the ChartDataLabel component, displaying day‑wise units sold in a Column Chart.

Margin

Data label margins control the spacing around labels to prevent overlap and improve readability. This example demonstrates applying margins using the Margin property and avoiding label intersection by setting the LabelIntersectAction property to None in the ChartDataLabel component.

Label Rotation

Data label rotation allows labels to be displayed at different angles to improve readability when space is constrained. This example shows rotating data labels by setting the EnableRotation property to true and specifying the Angle in the ChartDataLabel component.

Render Custom Visuals

Data label templates allow rendering custom visuals such as icons, styled containers, and formatted text. This example demonstrates using custom templates by setting the Template property in the ChartDataLabel component to display the number of boys and girls participating in different sports.

Customization

The ChartDataLabel component provides extensive customization options. You can style the background using the Fill and Border properties, and customize text appearance using font settings such as Color, FontFamily, FontWeight, and Size in the ChartDataLabelFont component.

Rejoining the server...

Rejoin failed... trying again in seconds.

Failed to rejoin.
Please retry or reload the page.

The session has been paused by the server.

Failed to resume the session.
Please retry or reload the page.