How to set separate color for each bar in bar chart .NET MAUI (SFCartesianChart)

Question

Hello Syncfusion Community,We are working with the SfCartesianChart control in .NET MAUI, using a ColumnSeries to represent data for hourly attendance. Each data point (bar) needs a distinct color based on certain thresholds. For example, we want to color the bars green, amber, red, or gray depending on the capacity level at each time slot.Expected Behavior:
We would like each bar in the ColumnSeries to reflect its own Color property, which is part of the data source. Our data model includes a Color property, which we have bound to the chart's ItemsSource, with the expectation that each bar would take on its specified color from this property.Current Workaround Attempted:
We tried using a LabelTemplate for data labels, which allows us to customize label colors using the data’s Color property. However, this only applies to the label text and does not affect the actual color of the bar itself.We also explored setting the Color property within the data points directly and tried using templates, but it appears that ColumnSeries lacks a feature for applying individual colors to each bar directly in .NET MAUI.Steps Taken to Resolve:Set Color in the data source for each individual item.Bound the data model with Color to ColumnSeries, but the bars still default to a single color.Tested with LabelTemplate to confirm data binding works for label colors, but this approach doesn't affect bar colors.Desired Solution:
Could you please advise on a solution or provide a feature update that allows binding individual colors to each bar in a ColumnSeries? This functionality would greatly improve our user experience by allowing us to visually distinguish different capacity levels in the chart.Thank you for your assistance.Regards!

Arul Jenith Berkmans · Accepted Answer

Hi Usman,Sorry for the miscommunication. We would like to inform you that the palette brush type is set as a Brush. We suggest changing the CustomBrushes property type to ObservableCollection.Here is an example code snippet: private ObservableCollection customBrushes; public ObservableCollection CustomBrushes { get { return customBrushes; } set { customBrushes = value; OnPropertyChanged(); } } Public ViewModel { CustomBrushes = new ObservableCollection() { new SolidColorBrush(Colors.Red), new SolidColorBrush(Colors.Blue), new SolidColorBrush(Colors.Green), }; } Thank you for your patience and understanding.Best regards,Arul Jenith B.

Arul Jenith Berkmans · Answer

Hi USMAN,To set a separate color for each bar in a ColumnSeries of a SfCartesianChart in .NET MAUI based on data thresholds, you can use the PaletteBrushes property. This property allows you to define a list of colors that can be applied to each data point in the series. Here's how you can implement this:Define a ViewModel: Create a ViewModel that includes your data and a collection of custom brushes.Generate Custom Brushes: Based on your data model, generate a list of colors that correspond to the thresholds you want to apply.Bind the PaletteBrushes: Bind the generated custom brushes to the PaletteBrushes property of ColumnSeries.Here's an example code snippet to illustrate this approach:public class ViewModel : INotifyPropertyChanged{ public ObservableCollection Data { get; set; } public ObservableCollection CustomBrushes { get; set; } public ViewModel() { CustomBrushes = new ObservableCollection(); Data = new ObservableCollection() { new ChartDataModel(){XValue = "2001", YValue = 20, SegmentColor = Colors.Red}, new ChartDataModel(){XValue = "2002", YValue = 40, SegmentColor = Colors.Green}, new ChartDataModel(){XValue = "2003", YValue = 30, SegmentColor = Colors.Yellow}, }; GeneratePalette(Data); } private void GeneratePalette(ObservableCollection collection) { CustomBrushes.Clear(); foreach (var data in collection) { CustomBrushes.Add(new SolidColorBrush(data.SegmentColor)); } }} In your XAML or C# code, bind the PaletteBrushes property of the ColumnSeries to the CustomBrushes collection from your ViewModel: . . . This approach ensures that each bar in your ColumnSeries is colored according to the thresholds defined in your data model.For more detailed instructions, you can refer to the Appearance in .NET MAUI Chart control Syncfusion.Thank you for your patience and understanding.Best regards,Arul Jenith B.

USMAN - ITBS LTD · Answer

Hi Arul,Thanks for reaching back to us. We really appreciate that but we already tried above mentioned steps and also from the given article.I've tried binding three simple colors via my ViewModel i.e Red, Blue & Gray.I've attached my POC project since posting code snippets here makes the reply longer.Let me know if I'm doing something wrong or against the documentation.Regards!Attachment: POC_b1581ab.zip