DataLabel in React Chart
Data labels display the values of individual data points on a chart, enhancing clarity and helping users interpret the data more easily. You can customize their format and placement to improve overall chart readability.
Position
Use the position property to control where data labels appear on the chart. Available options include:
-
Top -
Middle -
Bottom -
Outer(applicable only for column and bar series)
Choosing the right position helps ensure labels are clearly visible and do not overlap with other chart elements.
Text mapping
The labelField property allows you to bind text from your data source, which will be rendered as the label for each data point.
Format
Customize the appearance of data labels using the format property in the ChartDataLabel component. You can apply standard global formats such as 'n' for numbers, 'p' for percentages, and 'c' for currency values.
Margin
Use the margin property in the ChartDataLabel component to adjust spacing around labels. You can specify values for left, right, top, and bottom to fine-tune label positioning and enhance readability.
Label rotation
You can rotate data labels by setting the enableRotation property to true and specifying the desired rotationAngle using the rotationAngle property.
Render Custom Visuals
Render custom data labels by supplying a template function to the ChartDataLabel template property. The function receives ChartDataLabelTemplateProps and returns a JSX element for the label content.
Template context (ChartDataLabelTemplateProps):
- x: X-value of the data point (from series
xField). - y: Y-value of the data point (from series
yField). - label: Optional text from
labelFieldif mapped. - seriesIndex: Zero-based index of the series containing this point.
- pointIndex: Zero-based index of the point within its series.
Use the template to compose richer labels—icons, formatted values, units, or secondary text—beyond the default single-line text.
Customization
The ChartDataLabel component offers extensive customization options. You can style the label background using the fill and border properties. To create rounded corners, adjust the borderRadius property with the desired x and y values. Additionally, use the font property to define the text appearance, including color, fontFamily, fontWeight, and size.