How to use Legend and its Related Features in .NET MAUI CircularChart?

8 mins read

This article demonstrates how to use the legend and its related features in a .NET MAUI Circular Chart. Legends provide information about the series or segments in the chart, making it easier for users to understand the data.

Step 1: Configure the Syncfusion® .NET MAUI Circular Chart using this getting started documentation and add the series as follows.

[XAML]

<chart:SfCircularChart>

  <chart:PieSeries ItemsSource="{Binding Data}"
                   XBindingPath="Country"
                   YBindingPath="Value"
                   PaletteBrushes="{Binding CustomBrushes}"/>

</chart:SfCircularChart>

[C#]

SfCircularChart chart = new SfCircularChart();
ViewModel viewModel = new ViewModel();

PieSeries pieSeries = new PieSeries ()
{
   ItemsSource = viewModel.Data,
   XBindingPath = "Country",
   YBindingPath = "Value",
   PaletteBrushes = viewModel.CustomBrushes,
};

chart.Series.Add(pieSeries);
this.Content=chart;

Step 2: To add a legend in the MAUI Circular Chart, configure the Legend property and initialize the ChartLegend bindable object

[XAML]

<chart:SfCircularChart>

   <chart:SfCircularChart.Legend>
       <chart:ChartLegend/>
   </chart:SfCircularChart.Legend>
   
</chart:SfCircularChart>

[C#]

chart.Legend = new ChartLegend();

Output:

The following screenshot explains the legend for each segment of the pie chart, highlighting the significance of each section to the users.

Legend Placement Customization

To customize the legend position, use the Placement property. It offers four built-in positions: Top, Bottom, Left, and Right.

[XAML]

<chart:SfCircularChart.Legend>
   <chart:ChartLegend Placement="Bottom">
   </chart:ChartLegend>
</chart:SfCircularChart.Legend>

[C#]

SfCircularChart chart = new SfCircularChart();
. . .
chart.Legend = new ChartLegend()
{ 
   Placement = LegendPlacement.Bottom 
};

this.Content = chart;

The legend has been shifted to the bottom of the chart, as you can see in the screenshot below.

Legend icon Customization

To customize the legend icon, use the LegendIcon property and set it to a value from the ChartLegendIconType enum.

[XAML]

<chart:SfCircularChart>

   <chart:SfCircularChart.Legend>
      <chart:ChartLegend Placement="Bottom"/>
   </chart:SfCircularChart.Legend>

   <chart:PieSeries ItemsSource="{Binding Data}"
                    XBindingPath="Country"
                    YBindingPath="Value"
                    LegendIcon = "Diamond"
                    PaletteBrushes="{Binding CustomBrushes}"/>
                    
</chart:SfCircularChart>

[C#]

SfCircularChart chart = new SfCircularChart();

chart.Legend = new ChartLegend()
{ 
   Placement = LegendPlacement.Bottom 
};

ViewModel viewModel = new ViewModel();

PieSeries pieSeries = new PieSeries ()
{
   ItemsSource = viewModel.Data,
   XBindingPath = "Country",
   YBindingPath = "Value",
   LegendIcon = ChartLegendIconType.Diamond,
   PaletteBrushes = viewModel.CustomBrushes,
};

chart.Series.Add(pieSeries);
this.Content=chart;

In the screenshot below, you can observe that the legend icon shape is diamond-shaped.

Legend labels Customization

The appearance of the legend label can be customized using the LabelStyle property.

TextColor – Gets or sets the color of the label.
FontFamily - Gets or sets the font family for the legend label.
FontAttributes - Gets or sets the font style for the legend label.
FontSize - Gets or sets the font size for the legend label.
Margin - Gets or sets the margin size of labels.

[XAML]

<chart:SfCircularChart.Legend>
   <chart:ChartLegend>
       <chart:ChartLegend.LabelStyle>
           <chart:ChartLegendLabelStyle TextColor="Blue" Margin="5" FontSize="18" FontAttributes="Bold" FontFamily="PlaywriteAUSA-VariableFont_wght"/>
       </chart:ChartLegend.LabelStyle>
   </chart:ChartLegend>
</chart:SfCircularChart.Legend>

[C#]

SfCircularChart chart = new SfCircularChart();

chart.Legend = new ChartLegend();
ChartLegendLabelStyle labelStyle = new ChartLegendLabelStyle()
{
   TextColor = Colors.Blue,
   FontSize = 18,
   FontAttributes = FontAttributes.Bold,
   Margin = 5,
   FontFamily = "PlaywriteAUSA-VariableFont_wght"
};
chart.Legend.LabelStyle = labelStyle;
.........
this.Content = chart;

In the screenshot below, you can observe that the legend label has been customized.

Legend Visibility

To hide the legend, use the IsVisible property. This will allow to enable or disable the legend in a chart.

[XAML]

<chart:SfCircularChart.Legend>
   <chart:ChartLegend IsVisible="False"/>
</chart:SfCircularChart.Legend>

[C#]

chart.Legend = new ChartLegend()
{ 
   IsVisible = false
};

You can see that the chart’s legend has been disabled in the screenshot below.

Toggle Series Visibility

To hide a specific segment in the MAUI Circular Charts by toggling the legend, use the ToggleSeriesVisibility property. This property allows for dynamically changing the visibility of a segment by tapping the respective legend item.

[XAML]

<chart:SfCircularChart.Legend>
   <chart:ChartLegend Placement="Bottom" ToggleSeriesVisibility="True">
   </chart:ChartLegend>
</chart:SfCircularChart.Legend>

[C#]

chart.Legend = new ChartLegend()
{ 
   Placement = LegendPlacement.Bottom ,
   ToggleSeriesVisibility = true 
};

In the screenshot below you can observe that the Thailand segment is disabled.

Item Template Customization

To customize the appearance of legend items, use the ItemTemplate property. This allows you to define how each item in the legend should be displayed. The BindingContext of the template is the corresponding underlying legend item provided in the LegendItem class.

[XAML]

<chart:SfCircularChart.Resources>
    <DataTemplate x:Key="legendTemplate">
        <Grid ColumnDefinitions="20,80,Auto" VerticalOptions="Center">
            <BoxView Grid.Column="0" 
                     HeightRequest="15" 
                     WidthRequest="15"
                     Margin="0,0,0,15"
                     Background="{Binding IconBrush}" 
                     VerticalOptions="Center"/>

            <Label Grid.Column="1"
                   Text="{Binding Item.Country}"
                   Margin="0,0,5,15"
                   Padding="0,0,0,3"
                   HorizontalTextAlignment="Start"
                   FontSize="14"
                   VerticalOptions="Center"/>

            <Label Grid.Column="2"
                   Text="{Binding Item.Value, StringFormat='{0}M'}"
                   FontSize="14"
                   HorizontalTextAlignment="End"
                   Margin="0,0,50,15"
                   Padding="0,0,0,3"
                   VerticalOptions="Center"/>
        </Grid>
    </DataTemplate>
</chart:SfCircularChart.Resources>

<chart:SfCircularChart.Legend>
   <chart:ChartLegend Placement="Right" ItemTemplate="{StaticResource legendTemplate}">
   </chart:ChartLegend>
</chart:SfCircularChart.Legend>

[C#]

SfCircularChart chart = new SfCircularChart();
ChartLegend legend = new ChartLegend();
legend.ItemTemplate = chart.Resources["legendTemplate"] as DataTemplate;
...
chart.Legend = legend;
this.Content = chart;

You can observe the customized chart legend items in the screenshot below.

Items layout Customization

Each legend item’s position and arrangement can be customized using the ItemsLayout property. Any layout type can be used with this feature.

[XAML]

<chart:SfCircularChart.Legend>
   <chart:ChartLegend>
       <chart:ChartLegend.ItemsLayout>
           <FlexLayout Wrap="Wrap"
                       WidthRequest="350">
           </FlexLayout>
       </chart:ChartLegend.ItemsLayout>
   </chart:ChartLegend>
</chart:SfCircularChart.Legend>

[C#]

SfCircularChart chart = new SfCircularChart();
. . .
ChartLegend legend = new ChartLegend();
legend.ItemsLayout = new FlexLayout()
{
   Wrap = FlexWrap.Wrap,
   WidthRequest = 350
};

chart.Legend = legend;
this.Content = chart;

In the screenshot below, you can observe that the legend layout is customized using FlexLayout. The legend will wrap if it exceeds the WidthRequest.

Legend maximum size request

The GetMaximumSizeCoefficient protected function of the ChartLegend class must be overridden to set the required size for the legend view. The value should be between 0 and 1.

[XAML]

<chart:SfCircularChart.Legend>
   <local:LegendExt Placement="Bottom">
         <local:LegendExt.ItemsLayout>
         <FlexLayout Wrap="Wrap" WidthRequest="600">
         </FlexLayout>
         </local:LegendExt.ItemsLayout>
   </local:LegendExt>
</chart:SfCircularChart.Legend>

[C#]

public class LegendExt : ChartLegend
{
    // Override the GetMaximumSizeCoefficient method to customize the legend size
    protected override double GetMaximumSizeCoefficient()
    {
        return 0.9;
    }
}

As you can see in the screenshot below, the legend view size has been increased with the help of overriding the GetMaximumSizeCoefficient method.

Download the complete sample from GitHub.

Conclusion

I hope you enjoyed learning how to use legends and their features in the .NET MAUI Circular Chart.

You can refer to our .NET MAUI Circular Chart feature tour page to know about its other groundbreaking feature representations. Explore our documentation to understand how to create and manipulate data.

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

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 use Legend and its Related Features in .NET MAUI CircularChart?

Output:

Legend Placement Customization

Legend icon Customization

Legend labels Customization

Legend Visibility

Toggle Series Visibility

Item Template Customization

Items layout Customization

Legend maximum size request

Conclusion

Access denied