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

This article explains how to set the different colors for the chart column segments based on its Y value in the WinUI charts.

WinUI charts allow you to customize the appearance of the series segments color by adding your own brushes in the preferred order and applying for the series 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 value greater than 40. It has been achieved by setting the series PaletteBrushes property with its own Brush collection as in the below 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:

KB article - How to customize the segment color based on the Y value in WinUI Chart (SfCartesianChart)?

See also

How to customize the appearance in WinUI Chart (SfCartesianChart)?

How to create a Column Chart in WinUI?