How to customize the segment color based on the Y value in MAUI Chart (SfCartesianChart)?

This article explains how to set the different colors for the chart column segments based on their Y values in the .NET MAUI Charts.

MAUI charts allow you to customize the appearance of the series segment colors by applying custom brushes through the PaletteBrushes property.

Consider the use-case to apply different colors for the column segments based on some ranges, i.e., set CadetBlue color for the segment’s Y value less than 20, set Gray color for the segment’s Y value between 20 and 40, and set Orange color for the segment’s Y value greater than 40. It has been achieved by setting the series PaletteBrushes property with its Brush collection as in the following code example.

XAML

<chart:ColumnSeries ItemsSource="{Binding Data}"
                    XBindingPath="XValue" YBindingPath="YValue"
                    ShowDataLabels="True"
                    PaletteBrushes="{Binding CustomBrushes}">
 </chart:ColumnSeries>

[C#]

public ObservableCollection<Brush> CustomBrushes { get; set; }
 
…
CustomBrushes = new ObservableCollection<Brush>();
 
foreach (var item in Data)
{
    if (item.YValue <= 20)
    {
        CustomBrushes.Add(new SolidColorBrush(Colors.CadetBlue));
    }
    else if (item.YValue > 20 && item.YValue <= 40)
    {
        CustomBrushes.Add(new SolidColorBrush(Colors.DarkGray));
    }
    else if (item.YValue > 40) 
    {
        CustomBrushes.Add(new SolidColorBrush(Colors.Orange));
    }
}

Output

Download the complete sample on GitHub.

Conclusion

I hope you enjoyed learning how to customize the segment colors in a .NET MAUI Chart.

You can refer to our .NET MAUI 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 .NET MAUI components from the License and Downloads page. If you are new to Syncfusion®, try our 30-day free trial to check out our .NET MAUI Charts and other .NET MAUI components.

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!