How to customize an individual legend items 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 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 set 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 how to customize legend items via LegendItemCreated in MAUI Chart.
You can refer to our .NET MAUI Cartesian Chart feature tour page to learn about its other groundbreaking feature representations. Explore our .NET MAUI Chart documentation to understand how to present and manipulate data.
For current customers, check out our components from the License and Downloads page. If you are new to Syncfusion®, 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!