Legend in .NET MAUI Polar Chart

15 Jul 202624 minutes to read

The Legend provides a list of polar series, helping to identify the corresponding data series in the chart. Here’s a detailed guide on how to define and customize the legend in the polar chart.

NOTE

Prerequisite: Ensure that the required NuGet package is installed, the necessary namespaces are imported, and the SfPolarChart control is properly configured in your application. For detailed setup and configuration instructions, refer to the Getting Started guide.

Defining the legend

To define the legend in the chart, initialize the ChartLegend class and assign it to the Legend property.

<chart:SfPolarChart>
    <chart:SfPolarChart.Legend>
        <chart:ChartLegend/>
    </chart:SfPolarChart.Legend>
    <!-- code omitted for brevity -->
</chart:SfPolarChart>
SfPolarChart chart = new SfPolarChart();
chart.Legend = new ChartLegend();
// code omitted for brevity
this.Content = chart;

NOTE

Additionally, set a label for each series using the Label property of the chart series, which will be displayed in the corresponding legend. Set the BindingContext in the code-behind: this.BindingContext = new PlantViewModel();

<chart:SfPolarChart>
    <!-- code omitted for brevity -->
    <chart:PolarLineSeries ItemsSource = "{Binding PlantDetails}" XBindingPath = "Direction" YBindingPath = "Tree"
                           Label = "Tree"/>
    <chart:PolarLineSeries ItemsSource = "{Binding PlantDetails}" XBindingPath = "Direction" YBindingPath = "Weed" 
                           Label = "Weed"/>
    <chart:PolarLineSeries ItemsSource = "{Binding PlantDetails}" XBindingPath = "Direction" YBindingPath = "Flower" 
                           Label = "Flower"/>
</chart:SfPolarChart>
SfPolarChart chart = new SfPolarChart();
// code omitted for brevity
PolarLineSeries series1 = new PolarLineSeries(); 
series1.ItemsSource = (new PlantViewModel()).PlantDetails;
series1.XBindingPath = "Direction"; 
series1.YBindingPath = "Tree"; 
series1.Label = "Tree";

PolarLineSeries series2 = new PolarLineSeries();
series2.ItemsSource = (new PlantViewModel()).PlantDetails;
series2.XBindingPath = "Direction";
series2.YBindingPath = "Weed";
series2.Label = "Weed";

PolarLineSeries series3 = new PolarLineSeries();
series3.ItemsSource = (new PlantViewModel()).PlantDetails;
series3.XBindingPath = "Direction";
series3.YBindingPath = "Flower";
series3.Label = "Flower";

chart.Series.Add(series1);
chart.Series.Add(series2);
chart.Series.Add(series3);
this.Content = chart;

Legend visibility

The visibility of the chart legend can be controlled using the IsVisible property. By default, the IsVisible property is set to true.

<chart:SfPolarChart>
    <chart:SfPolarChart.Legend>
        <chart:ChartLegend IsVisible = "True"/>
    </chart:SfPolarChart.Legend>
    <!-- code omitted for brevity -->
</chart:SfPolarChart>
SfPolarChart chart = new SfPolarChart();
chart.Legend = new ChartLegend()
{ 
    IsVisible = true 
};
// code omitted for brevity
this.Content = chart;

Legend item visibility

The visibility of individual legend items for specific series can be controlled using the IsVisibleOnLegend property of the series. The default value for IsVisibleOnLegend is true.

<chart:SfPolarChart>
    <!-- code omitted for brevity -->
    <chart:SfPolarChart.Legend>
        <chart:ChartLegend/>
    </chart:SfPolarChart.Legend> 

    <chart:PolarAreaSeries ItemsSource = "{Binding  PlantDetails}" 
                           XBindingPath = "Direction"
                           YBindingPath = "Tree"
                           IsVisibleOnLegend = "True"
                           Label = "Tree"/>

    <chart:PolarAreaSeries ItemsSource = "{Binding PlantDetails}" 
                           XBindingPath = "Direction" 
                           YBindingPath = "Weed"
                           IsVisibleOnLegend = "False"
                           Label = "Weed"/>
</chart:SfPolarChart>
SfPolarChart chart = new SfPolarChart();
PlantViewModel plantViewModel = new PlantViewModel();
// code omitted for brevity
chart.Legend = new ChartLegend();

PolarAreaSeries series1 = new PolarAreaSeries()
{
    ItemsSource = plantViewModel.PlantDetails,
    XBindingPath = "Direction",
    YBindingPath = "Tree",
    Label = "Tree",
    IsVisibleOnLegend = true,
};

PolarAreaSeries series2 = new PolarAreaSeries()
{
    ItemsSource = plantViewModel.PlantDetails,
    XBindingPath = "Direction",
    YBindingPath = "Tree",
    Label = "Weed",
    IsVisibleOnLegend = false,
};

chart.Series.Add(series1);
chart.Series.Add(series2);

this.Content = chart;

Customizing Labels

The Label property of PolarSeries is used to define the label for the corresponding polar series legend item. The appearance of the 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.
<chart:SfPolarChart>
    <chart:SfPolarChart.Legend>
        <chart:ChartLegend>
            <chart:ChartLegend.LabelStyle>
                <chart:ChartLegendLabelStyle TextColor = "Blue" 
                                             Margin = "5" 
                                             FontSize = "18" 
                                             FontAttributes = "Bold" 
                                             FontFamily = "PlaywriteAR-Regular"/>
            </chart:ChartLegend.LabelStyle>
        </chart:ChartLegend>
    </chart:SfPolarChart.Legend>
    <!-- code omitted for brevity -->
</chart:SfPolarChart>
chart.Legend = new ChartLegend();
ChartLegendLabelStyle labelStyle = new ChartLegendLabelStyle()
{
    TextColor = Colors.Blue,
    FontSize = 18,
    FontAttributes = FontAttributes.Bold,
    Margin = 5,
    FontFamily = "PlaywriteAR-Regular"
};
chart.Legend.LabelStyle = labelStyle;
// code omitted for brevity
this.Content = chart;

Legend labels customization support in .NET MAUI Polar Chart

Legend icon

To specify the legend icon based on the associated series type, use the LegendIcon property and change its type using the ChartLegendIconType enum values. The default value of the LegendIcon property is Circle.

<chart:SfPolarChart>
    <!-- code omitted for brevity -->
    <chart:SfPolarChart.Legend>
        <chart:ChartLegend/>
    </chart:SfPolarChart.Legend> 

    <chart:PolarAreaSeries ItemsSource = "{Binding  PlantDetails}" 
                           XBindingPath = "Direction" 
                           YBindingPath = "Tree"
                           LegendIcon = "Diamond" 
                           Label = "Tree"/>
</chart:SfPolarChart>
SfPolarChart chart = new SfPolarChart();
PlantViewModel plantViewModel = new PlantViewModel();
// code omitted for brevity
chart.Legend = new ChartLegend();

PolarAreaSeries series = new PolarAreaSeries()
{
    ItemsSource = plantViewModel.PlantDetails,
    XBindingPath = "Direction",
    YBindingPath = "Tree",
    Label = "Tree",
    LegendIcon = ChartLegendIconType.Diamond,
};

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

Placement

The legend can be positioned to the left, right, top, or bottom of the chart area using the Placement property in the ChartLegend class. The default placement is Top.

<chart:SfPolarChart>
    <chart:SfPolarChart.Legend>
        <chart:ChartLegend Placement = "Bottom"/>
    </chart:SfPolarChart.Legend>
    <!-- code omitted for brevity -->
</chart:SfPolarChart>
SfPolarChart chart = new SfPolarChart();
chart.Legend = new ChartLegend()
{ 
    Placement = LegendPlacement.Bottom
};
// code omitted for brevity
this.Content = chart;

Toggle the series visibility

The visibility of polar series can be controlled by tapping the legend item using the ToggleSeriesVisibility property. The default value of ToggleSeriesVisibility is false.

<chart:SfPolarChart>
    <!-- code omitted for brevity -->
    <chart:SfPolarChart.Legend>
        <chart:ChartLegend ToggleSeriesVisibility = "True"/>
    </chart:SfPolarChart.Legend>
    
    <chart:PolarAreaSeries ItemsSource = "{Binding  PlantDetails}" 
                           XBindingPath = "Direction"
                           YBindingPath = "Tree"
                           IsVisibleOnLegend = "True" 
                           Label = "Tree"/>

    <chart:PolarAreaSeries ItemsSource = "{Binding PlantDetails}" 
                           XBindingPath = "Direction" 
                           YBindingPath = "Weed" 
                           IsVisibleOnLegend = "False" 
                           Label = "Weed"/>
</chart:SfPolarChart>
SfPolarChart chart = new SfPolarChart();
PlantViewModel plantViewModel = new PlantViewModel();
// code omitted for brevity
chart.Legend = new ChartLegend()
{ 
    ToggleSeriesVisibility = true 
};

PolarAreaSeries series1 = new PolarAreaSeries()
{
    ItemsSource = plantViewModel.PlantDetails,
    XBindingPath = "Direction",
    YBindingPath = "Tree",
    Label = "Tree",
};

PolarAreaSeries series2 = new PolarAreaSeries()
{
    ItemsSource = plantViewModel.PlantDetails,
    XBindingPath = "Direction",
    YBindingPath = "Tree",
    Label = "Weed",
};

chart.Series.Add(series1);
chart.Series.Add(series2);
this.Content = chart;

Legend maximum size request

To set the maximum size request for the legend view, override the GetMaximumSizeCoefficient protected method in ChartLegend class. The value should be between 0 and 1, representing the maximum size request, not the desired size for the legend items layout.

<chart:SfPolarChart>
    <chart:SfPolarChart.Legend>
        <chart:LegendExt/>
    </chart:SfPolarChart.Legend>
    <!-- code omitted for brevity -->
</chart:SfPolarChart>
public class LegendExt : ChartLegend
{
    protected override double GetMaximumSizeCoefficient()
    {
        return 0.7;
    }
}

SfPolarChart chart = new SfPolarChart();
chart.Legend = new LegendExt();
this.Content = chart;

Items layout

An ItemsLayout property is used to customize the arrangement and position for each legend item. The default value is null. It accepts any layout type in ItemsLayout property.

<chart:SfPolarChart>
    <!-- code omitted for brevity -->
    <chart:SfPolarChart.Legend>
        <chart:ChartLegend>
            <chart:ChartLegend.ItemsLayout>
                    <FlexLayout HorizontalOptions = "Start" 
                                Margin = "10"
                                WidthRequest = "{Binding Width, Source={x:Reference Chart1}}">
                    </FlexLayout>
            </chart:ChartLegend.ItemsLayout>
        </chart:ChartLegend>
    </chart:SfPolarChart.Legend>

    <chart:PolarAreaSeries ItemsSource = "{Binding PlantDetails}" 
                           XBindingPath = "Direction"
                           YBindingPath = "Tree"
                           Label = "Tree"/>

    <chart:PolarAreaSeries ItemsSource = "{Binding PlantDetails}"
                           XBindingPath = "Direction" 
                           YBindingPath = "Weed" 
                           Label = "Weed"/>

    <chart:PolarLineSeries ItemsSource = "{Binding PlantDetails}" 
                           XBindingPath = "Direction"
                           YBindingPath = "Flower" 
                           Label = "Flower"/>
</chart:SfPolarChart>
SfPolarChart chart = new SfPolarChart();
PlantViewModel plantViewModel = new PlantViewModel();

ChartLegend legend = new ChartLegend();

FlexLayout layout = new FlexLayout();
layout.Wrap = FlexWrap.Wrap;
layout.HorizontalOptions = LayoutOptions.Start;
layout.SetBinding(WidthRequestProperty, nameof(SfPolarChart.WidthProperty));
legend.ItemsLayout = layout;

PolarAreaSeries series1 = new PolarAreaSeries()
{
    ItemsSource = plantViewModel.PlantDetails,
    XBindingPath = "Direction",
    YBindingPath = "Tree",
    Label = "Tree",
};

PolarAreaSeries series2 = new PolarAreaSeries()
{
    ItemsSource = plantViewModel.PlantDetails,
    XBindingPath = "Direction",
    YBindingPath = "Weed",
    Label = "Weed",
};

PolarAreaSeries series3 = new PolarAreaSeries()
{
    ItemsSource = plantViewModel.PlantDetails,
    XBindingPath = "Direction",
    YBindingPath = "Flower",
    Label = "Flower",
};

chart.Legend = legend;
chart.Series.Add(series1);
chart.Series.Add(series2);
chart.Series.Add(series3);
this.Content = chart;

Item template

The ChartLegend supports customizing the appearance of legend items using the ItemTemplate property. The default value of ItemsTemplate is null.

NOTE

The BindingContext of the template is the corresponding underlying legend item provided in the ChartLegendItem class.

<chart:SfPolarChart >
    <chart:SfPolarChart.Resources>
        <DataTemplate x:Key = "legendTemplate">
            <StackLayout Orientation = "Horizontal">
                <Rectangle HeightRequest = "12" 
                           WidthRequest = "12" 
                           Margin = "3"
                           Background = "{Binding IconBrush}"/>
                <Label Text = "{Binding Text}" 
                       Margin = "3"/>
            </StackLayout>
        </DataTemplate>
    </chart:SfPolarChart.Resources>  
    
    <chart:SfPolarChart.Legend>
        <chart:ChartLegend ItemTemplate = "{StaticResource legendTemplate}">
        </chart:ChartLegend>
    </chart:SfPolarChart.Legend>

    <chart:PolarAreaSeries ItemsSource = "{Binding  PlantDetails}" 
                           XBindingPath = "Direction"
                           YBindingPath = "Tree"
                           Label = "Tree"/>

    <chart:PolarAreaSeries ItemsSource = "{Binding PlantDetails}" 
                           XBindingPath = "Direction" 
                           YBindingPath = "Weed" 
                           Label = "Weed"/>
</chart:SfPolarChart>
SfPolarChart chart = new SfPolarChart();
PlantViewModel plantViewModel = new PlantViewModel();
    
ChartLegend legend = new ChartLegend();
legend.ItemTemplate = chart.Resources["legendTemplate"] as DataTemplate;

PolarAreaSeries series1 = new PolarAreaSeries()
{
    ItemsSource = plantViewModel.PlantDetails,
    XBindingPath = "Direction",
    YBindingPath = "Tree",
    Label = "Tree",
};

PolarAreaSeries series2 = new PolarAreaSeries()
{
    ItemsSource = plantViewModel.PlantDetails,
    XBindingPath = "Direction",
    YBindingPath = "Weed",
    Label = "Weed",
};

chart.Legend = legend;
chart.Series.Add(series1);
chart.Series.Add(series2);
this.Content = chart;

Legend layout in .NET MAUI Polar Chart

Event

LegendItemCreated

The LegendItemCreated event is triggered when the chart legend item is created. Use this event to customize legend item properties dynamically. The following example shows how to change the legend item text color based on conditions:

  • C#
    • ChartLegend legend = new ChartLegend();
legend.LegendItemCreated += (sender, args) =>
{
    if (args.LegendItem.Text == "Tree")
    {
        args.LegendItem.TextColor = Colors.Green;
        args.LegendItem.IconBrush = new SolidColorBrush(Colors.DarkGreen);
    }
};

chart.Legend = legend;

    The LegendItem object contains the following properties that can be modified in the event handler:

    • Text – used to get or set the text of the label.
    • TextColor – used to get or set the color of the label.
    • FontFamily - used to get or set the font family for the legend label.
    • FontAttributes - used to get or set the font style for the legend label.
    • FontSize - used to get or set the font size for the legend label.
    • TextMargin - used to get or set the margin size of labels.
    • IconBrush - used to change the color of the legend icon.
    • IconType - used to get or set the icon type for the legend icon.
    • IconHeight - used to get or set the icon height of the legend icon.
    • IconWidth - used to get or set the icon width of the legend icon.
    • IsToggled - used to get or set the toggle visibility of the legend.
    • DisableBrush - used to get or set the color of the legend when toggled.
    • Index - used to get index position of the legend.
    • Item - used to get the corresponding series for the legend item.