Articles in this section
Category / Section

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

6 mins read

This article explains how to set varying colors for chart column segments based on their Y values in WinUI charts.

 

WinUI charts allow you to customize the appearance of series segment colors by adding your own brushes in a preferred order and applying them to the series PaletteBrushes property.

 

Consider the following use case: apply different colors to the column segments based on specific ranges. For example, set  CadetBlue color for the segment’s Y value less than 20, set DarkGray color for the segment’s Y value between 20 and 40, and Orange for a segment with a Y value greater than 40. You can achieve this 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

Column color based on the Y value.

See also

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

How to create a Column Chart in WinUI (SfCartesianChart)?

 

For a detailed view, explore the sample on GitHub.

Conclusion

I hope you enjoyed learning about how to customize the segment color based on the y value in WinUI Chart (SfCartesianChart).

You can refer to our WinUI Chart’s feature tour page to know about its other groundbreaking feature representations. You can also explore our WinUI Chart documentation to understand how to present and manipulate data.

For current customers, you can check out our WinUI components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our WinUI Chart and other WinUI components.

If you have any queries or require clarifications, please let us know in comments below. You can also contact us through our support forumsDirect-Trac, or feedback portal. We are always happy to assist you!

 

 

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please  to leave a comment
Access denied
Access denied