README.md

How to customize the individual legend item based on a condition in Xamarin.Forms Chart (SfChart)?

This example demonstrates the customization of individual legend item based on a condition in Xamarin.Forms chart.

You can customize all the legend items by setting individual style using the LegendItemCreated event. This event will be fired when a chart legend item is created. For more details about the event arguments, refer to this documentation.

The following code sample demonstrates how to set individual style to all the legend items.

XAML

<chart:SfChart x:Name="chart" LegendItemCreated="Chart_LegendItemCreated">

C#

chart.LegendItemCreated += Chart_LegendItemCreated;
 
private void Chart_LegendItemCreated(object sender, ChartLegendItemCreatedEventArgs e)
{
   Model model = e.LegendItem.DataPoint as Model;
   e.LegendItem.Label = model.XValue + ": " + model.YValue.ToString();
   e.LegendItem.LabelStyle = new ChartLegendLabelStyle()
   {
        TextColor = model.YValue > 50 ? Color.Green : Color.Red,
        FontFamily = model.YValue > 50 ? "Times New Roman" : "Arial"
    };
}

Output:

KB article - How to customize the individual legend item based on a condition in Xamarin.Forms Chart?

Requirements to run the demo

• Visual Studio 2017 or Visual Studio for Mac.
• Xamarin add-ons for Visual Studio (available via the Visual Studio installer).

Troubleshooting

Path too long exception

If you are facing path too long exception when building this example project, close Visual Studio and rename the repository to short and build the project.