We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Colors from Bound Data point


Is it at all possible to set the colors of a series as a bound property from the  items source? I've got a Doughnut chart, and i'd like the user to be able to specify a color which is stored in the underlying itemsource and used else where in my app. I've seen a few examples that populate the Custom Brushes manually, but was hoping this be something that could be in the XAML code to bind to my items source.


5 Replies

HM Hemalatha Marikumar Syncfusion Team October 16, 2019 07:49 AM

Hi Mark,

Greetings from Syncfusion.

We would like to let you know that your requirement has been achieved with the help of CustomBrushes property in ChartColorModel. We have created a ChartColorCollection property in ViewModel and added the custom colors based on YValues as referred in below provided code snippet. 
Code snippet [XAML]:    
<chart:DoughnutSeries ItemsSource="{Binding Data}" XBindingPath="XValue" YBindingPath="YValue"> 
                        <chart:ChartColorModel Palette="Custom" CustomBrushes="{Binding Colors}"/> 
Code snippet [C#]:    
public class ViewModel 
        public ChartColorCollection Colors { get; set; } 
        public ViewModel() 
            Colors = new ChartColorCollection(); 
            foreach (var value in Data) 
                if (value.YValue < 20) 
                else if (value.YValue > 21 && value.YValue < 60) 
We have prepared a sample based on your requirement and you can download the sample from the below link.


Please let us know if you need any further assistance on this.

Hemalatha M. 

MG Matthias Gehrke January 15, 2020 09:58 AM

Is it possible to change the color later?
I always see demos showing CustomBrushes set at the creation of the ViewModel.

In my case, i need to change the Items and the colors at runtime. So i have:

     ObservableCollection<myData> MyDataList
     ObservableCollection<Color> MyColors //first this was a IList<Color>

     public void UpdateData()
          ... load data ...

          If (data1)
           If (data2)
          ... and so on ...


My problem with that:
- When first called (in a ContentPage in OnAppearing) The Chart is getting the Items but is displaying it transparent (so i cannot see the chart but only the Labels indicating the values)
- When called a second time, even the items are gone, the chart is empty then

I've tested to call this update-function in the ContentPage-Constructor - then the Chart is shown with colors ... so i think setting the colors later doesn't work (or i have to do something differently)?

Thank you

LA Lavanya Anaimuthu Syncfusion Team January 17, 2020 10:05 AM

Hi Matthias Gehrke, 
Greetings from Syncfusion. 
Query 1: Is it possible to change the color later? 
Yes, you can change the CustomBrushes colors dynamically also. 
Query 2: I always see demos showing CustomBrushes set at the creation of the ViewModel. In my case, i need to change the Items and the colors at runtime. 
We have validated the provided code snippet and we suspect that you are not properly called PropertyChanged event for the “MyColors” property. So that only values are not dynamically updated for CustomBrushes.   
You can resolve this problem by creating your ViewModel class from the INotifyPropertyChanged interface and calling PropertyChanged event for the MyColors property. Since, we have maintained the ChartColorCollection class for custom colors, we suggest that you use ChartColorCollection class instead of ObservableCollection<Color> as per the below code snippet.  
Code Snippet [Xaml]:  
<chart:DoughnutSeries ItemsSource="{Binding MyDataList}" XBindingPath="XValue" YBindingPath="YValue"> 
                        <chart:ChartColorModel Palette="Custom" CustomBrushes="{Binding MyColors}"/> 
Code Snippet [C#]:  
public class ViewModel : INotifyPropertyChanged  
        private ChartColorCollection myColors; 
        public ChartColorCollection MyColors 
            get { return myColors; } 
                myColors = value; 
        public event PropertyChangedEventHandler PropertyChanged;  
        private void OnPropertyChanged(string propertyname)  
            PropertyChanged?.Invoke(thisnew PropertyChangedEventArgs(propertyname));  
And we have prepared a sample based on your requirement and download the sample from the below link. 
For more details please refer below ug link. 
Please let us know if need any further assistance on this. 
Lavanya A. 

MG Matthias Gehrke January 22, 2020 02:21 AM

Thank you, this works so far.
I don't know what my problem was, it could be either one:

- Older Syncfusion Version (i've updated yesterday)
- ObservableCollection<Color> vs. ChartColorCollection
- Changing existing Color-Entries in the existing instance of CustomColors instead of creating a new instance and using the Setter of the Property

Anyway - it works :) Thank you

HM Hemalatha Marikumar Syncfusion Team January 23, 2020 08:10 AM

Hi Matthias Gehrke, 
Thanks for your update. 
We are glad to hear that given solution works. 
Please let us know if you need any further assistance. 
Hemalatha M. 

Live Chat Icon For mobile
Up arrow icon