How to Customize Data Label Appearance in .NET MAUI Funnel Chart?

The Syncfusion® .NET MAUI Funnel Chart provides comprehensive customization options for data labels, enhancing readability and visual appeal. In this guide, we’ll walk you through the process of customizing data labels, focusing on key aspects such as font size, color, position, and formatting.

Step 1: Initialize SfFunnelChart

Set up the SfFunnelChart by following the guidelines in documentation.

Step 2: Enable Data Labels
To display data labels on the Funnel Chart, set the ShowDataLabels property to True.

XAML

<chart:SfFunnelChart ItemsSource="{Binding Data}" 
                    XBindingPath="XValue" 
                    YBindingPath="YValue"
                    ShowDataLabels="True">
          ....
 
</chart:SfFunnelChart>

SfFunnelChart chart = new SfFunnelChart();
chart.ItemsSource = new ViewModel().Data;
chart.XBindingPath = "XValue";
chart.YBindingPath = "YValue";
chart.ShowDataLabels = true;

this.Content = chart;

Step 3: Customize Data Label Appearance
Initialize the FunnelDataLabelSettings to customize the appearance of the data labels and set it to the DataLabelSettings property. Modify various stylistic properties of the data labels using LabelStyle, such as CornerRadius, Stroke, StrokeWidth, Margin, FontAttributes, Background, TextColor, FontSize, and LabelFormat.

XAML

<chart:SfFunnelChart>
...
  <chart:SfFunnelChart.DataLabelSettings>
    <chart:FunnelDataLabelSettings LabelPlacement="Outer" >
          <chart:FunnelDataLabelSettings.LabelStyle>
             <chart:ChartDataLabelStyle CornerRadius="4" 
                                   Stroke="LightGray" 
                                   StrokeWidth="1" 
                                   Margin="4"
                                   FontAttributes="Bold,Italic"
                                   Background="#F0F0F0"
                                   TextColor="DarkSlateGray"
                                   FontSize="15"
                                   LabelFormat="0'%"/>
            </chart:FunnelDataLabelSettings.LabelStyle>
        </chart:FunnelDataLabelSettings>
        </chart:SfFunnelChart.DataLabelSettings>
</chart:SfFunnelChart>

SfFunnelChart chart = new SfFunnelChart();
...

FunnelDataLabelSettings dataLabelSettings = new FunnelDataLabelSettings()
{
    LabelPlacement = DataLabelPlacement.Outer, 
    
};

ChartDataLabelStyle labelStyle = new ChartDataLabelStyle()
{
    CornerRadius = new CornerRadius(4),
    Stroke = Microsoft.Maui.Graphics.Colors.LightGray,
    StrokeWidth = 1,
    Margin = new Thickness(4),
    FontAttributes = FontAttributes.Bold | FontAttributes.Italic,
    Background = Color.FromArgb("#F0F0F0"),
    TextColor = Color.FromRgba("DarkSlateGray"),
    FontSize = 15,
    LabelFormat = "0'%'"
};

dataLabelSettings.LabelStyle = labelStyle;
chart.DataLabelSettings = dataLabelSettings;

Output

Conclusion:
I hope you enjoyed learning how to customize the appearance of data labels in a .NET MAUI Funnel Chart.

Refer to our .NET MAUI Funnel Chart feature tour page to know about its other groundbreaking feature representations. You can also explore our .NET MAUI Funnel Chart documentation to understand how to present and manipulate data.

For current customers, check out our .NET MAUI components from the License and Downloads page. If you are new to Syncfusion®, try our 30-day free trial to check out our .NET MAUI Chart and other .NET MAUI components.

Please let us know in the comments section if you have any queries or require clarification. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!

Did you find this information helpful?

Yes

Comments (0)

How to Customize Data Label Appearance in .NET MAUI Funnel Chart?

Access denied