Data Label in .NET MAUI Chart

27 Dec 20223 minutes to read

Data labels are used to display values related to a chart segment. Values from data point(x, y) or other custom properties from a data source can be displayed.

Enable Data Label

To define the data label in the chart, set the ShowDataLabels property to true. The default value of ShowDataLabels property is false.

XAML

<chart:SfPyramidChart ShowDataLabels="True"/>
. . .
</chart:SfPyramidChart>

C#

SfPyramidChart chart = new SfPyramidChart();
. . .
chart.ShowDataLabels = true;

Data label customization

Data labels can be customized by using the DataLabelSettings property of the chart. For customizing, need to create an instance of PyramidDataLabelSettings and set to the DataLabelSettings property.The following properties, which are available in PyramidDataLabelSettings, are used to customise the data labels.

• LabelPlacement - It used to position the pyramid chart data labels at Auto, Inner, Center and Outer.
• UseSeriesPalette - It used to set the interior of the chart to the data label background.
• Context of type PyramidDataLabelContext, indicates weather to show x or y value in the label content.
• LabelStyle - It used to customise the data label’s appearance. The following properties, which are available in LabelStyle.
  • Margin of type Thickness, indicates the label’s margin.
  • Background, of type Brush, indicates the label background color.
  • FontAttributes, of type FontAttributes, indicates the font style of the data label.
  • FontSize, of type double, indicates the font size.
  • Stroke, of type Brush, indicates the brush used to paint the border of the data label.
  • StrokeWidth, of type double, indicates the width of the label’s border.
  • CornerRadius, of type CornerRadius, indicates the rounded corner for label.
  • TextColor, of type Color, indicates the color of the displayed text.

XAML

<chart:SfPyramidChart ShowDataLabels="True">
. . .
 <chart:SfPyramidChart.DataLabelSettings>
    <chart:PyramidDataLabelSettings LabelPlacement="Outer" 
                                    Context="XValue" 
                                    UseSeriesPalette="True">
        <chart:PyramidDataLabelSettings.LabelStyle>
            <chart:ChartDataLabelStyle Margin="2"/>
        </chart:PyramidDataLabelSettings.LabelStyle>
    </chart:PyramidDataLabelSettings>
 </chart:SfPyramidChart.DataLabelSettings>
</chart:SfPyramidChart>

C#

SfPyramidChart chart = new SfPyramidChart();
. . .
chart.ShowDataLabels = true;
chart.DataLabelSettings = new PyramidDataLabelSettings()
{
    Context=PyramidDataLabelContext.XValue,
    LabelPlacement=DataLabelPlacement.Outer,
    UseSeriesPalette=true,
};
chart.DataLabelSettings.LabelStyle = new ChartDataLabelStyle()
{
    Margin = 2,
};