This article demonstrates how to use the legend and its related features in a .NET MAUI Circular Chart. Legends are used to provide information about the series or segments in the chart, making it easier for users to understand the data.
Step 1: Let’s configure the Syncfusion .NET MAUI SfCircular Chart using this getting started documentation and add the series to it 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 MAUI Circular Chart, need to 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(); The following screenshot explains the legend for each segment of the pie chart, highlighting the significance of each individual section to the users.
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.
To customize the legend icon in circular chart, use the LegendIcon property and set it to one of the values 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.
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.
To hide the legend, use the IsVisible property. This will allow to enable or disable the legend in 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.
To hide a particular segment in the MAUI circular charts by toggling the legend, use the ToggleSeriesVisibility property. This property allows to dynamically change 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.
To customize the appearance of legend items, can utilize the ItemTemplate property. This allows 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.
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.
The GetMaximumSizeCoefficient protected function of the ChartLegend class must be overridden in order 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.
Path too long exception
If you are facing a path too long exception when building this example project, close Visual Studio and rename the repository to a shorter name before building the project.
For more details, refer to the KB on How to use legend and its related features in .NET MAUI SfCircularChart.