How to Customize an Individual Legend Item in .NET MAUI Cartesian Chart?

This article provides a detailed walkthrough on how to customize the legend item in a .NET MAUI Cartesian Chart using the LegendItemCreated event.

The SfCartesianChart provides a LegendItemCreated event, which is triggered when a chart legend item is created. This event is particularly useful for customizing the legend to match your application’s design.

The event argument contains the LegendItem object, which includes the following properties:

• 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.
• IconBrush – used to change the color of the legend icon.
• Text – used to get or set the text of the label.
• TextColor – used to get or set the color of the label.
• TextMargin – used to get or set the margin size of labels.
• FontSize – used to get or set the font size for the legend label.
• FontAttribute – used to get or set the font style for the legend label.
• FontFamily – used to get or set the fontfamily for the legend label.
• IsToggled – used to get or set the toggle visibility of the legend.
• DisableBrush – used to get or set the legend icon and text disable color when toggled.
• Index – used to get the corresponding index for legend item.
• Item – used to get the corresponding series for the legend item.

Learn step-by-step instructions and gain insights to customize the legend items for each individual series.

Step 1: Initialize the SfCartesianChart and add the series to it as follows

XAML

<chart:SfCartesianChart>
   <chart:SfCartesianChart.Series>
   
   <chart:LineSeries ItemsSource="{Binding France}"
                     XBindingPath="Year"
                     YBindingPath="Revenue"
                     Label="France"
                     StrokeWidth="1.5"/>

   <chart:LineSeries ItemsSource="{Binding Germany}"
                     XBindingPath="Year"
                     YBindingPath="Revenue"
                     Label="Germany"
                     StrokeWidth="1.5"/>

   <chart:LineSeries ItemsSource="{Binding Italy}"
                     XBindingPath="Year"
                     YBindingPath="Revenue"
                     Label="Italy"
                     StrokeWidth="1.5"/>
   
   <chart:LineSeries ItemsSource="{Binding Spain}"
                     XBindingPath="Year"
                     YBindingPath="Revenue"
                     Label="Spain"
                     StrokeWidth="1.5"/>

   </chart:SfCartesianChart.Series>
</chart:SfCartesianChart> 

Step 2: Initialize the ChartLegend in SfCartesianChart and setting up the LegendItemCreated event

XAML

<chart:SfCartesianChart>
 
   <chart:SfCartesianChart.Legend>
        <chart:ChartLegend LegendItemCreated="ChartLegend_LegendItemCreated"/>
   </chart:SfCartesianChart.Legend>

</chart:SfCartesianChart> 

Step 3: Customize the legend item for each series using the LegendItemCreated event handler method.

C#

private void ChartLegend_LegendItemCreated(object sender, LegendItemEventArgs e)
{
   e.LegendItem.FontSize = 20;
   e.LegendItem.IconHeight = 17;
   e.LegendItem.IconWidth = 17;
   switch (e.LegendItem.Index)
   {
       case 0:
           SetLegendItem(e, ShapeType.Hexagon, FontAttributes.Bold, Colors.Crimson, "Arial");
           break;
       case 1:
           SetLegendItem(e, ShapeType.Rectangle, FontAttributes.Italic, Colors.Indigo, "TimesNewRoman");
           break;
       case 2:
           SetLegendItem(e, ShapeType.Diamond, FontAttributes.Italic, Colors.DarkCyan, "Verdana");
           break;
       default:
           SetLegendItem(e, ShapeType.Circle, FontAttributes.None, Colors.YellowGreen, "Georgia");
           break;
   }
}

private void SetLegendItem(LegendItemEventArgs e, ShapeType iconType, FontAttributes fontAttributes, Color textColor, string fontFamily)
{
   e.LegendItem.IconType = iconType;
   e.LegendItem.FontAttributes = fontAttributes;
   e.LegendItem.TextColor = textColor;
   e.LegendItem.FontFamily = fontFamily;
}

Output:

Conclusion:
I hope you enjoyed learning about how to customize legend item via LegendItemCreated in MAUI Chart.
You can refer to our .NET MAUI CartesianChart feature tour page to know about its other groundbreaking feature representations. You can also explore our .NET MAUI Chart documentation to understand how to present 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 trail to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!