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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Colors from Bound Data point

Thread ID:

Created:

Updated:

Platform:

Replies:

148314 Oct 15,2019 11:26 AM UTC Jan 23,2020 01:10 PM UTC Xamarin.Forms 5
loading
Tags: SfChart
Mark
Asked On October 15, 2019 11:26 AM UTC

Hi,

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.

Cheers,
Mark

Hemalatha Marikumar [Syncfusion]
Replied On October 16, 2019 12:49 PM UTC

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:DoughnutSeries.ColorModel> 
                        <chart:ChartColorModel Palette="Custom" CustomBrushes="{Binding Colors}"/> 
             </chart:DoughnutSeries.ColorModel> 
</chart:DoughnutSeries> 
  
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) 
                    Colors.Add(Color.Red); 
                else if (value.YValue > 21 && value.YValue < 60) 
                    Colors.Add(Color.Green); 
                else 
                    Colors.Add(Color.Blue); 
            } 
  
        } 
    } 
  
   
We have prepared a sample based on your requirement and you can download the sample from the below link.

Samplehttps://www.syncfusion.com/downloads/support/forum/148314/ze/148314-1010194886.zip

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

Regards,
Hemalatha M. 
 


Matthias Gehrke
Replied On January 15, 2020 02:58 PM UTC

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:

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

     public void UpdateData()
     {
          ... load data ...
          MyColors.Clear()
          MyDataList.Clear();

          If (data1)
          {
               MyColors.Add(color1)
               MyDataList.Add(data1data)    
          }      
           If (data2)
          {
               MyColors.Add(color2)
               MyDataList.Add(data2data)    
          }              
          ... and so on ...

          OnPropertyChanged("MyDataList")
          OnPropertyChanged("MyColors")
     }

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


Lavanya Anaimuthu [Syncfusion]
Replied On January 17, 2020 03:05 PM UTC

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:DoughnutSeries.ColorModel> 
                        <chart:ChartColorModel Palette="Custom" CustomBrushes="{Binding MyColors}"/> 
                    </chart:DoughnutSeries.ColorModel> 
 </chart:DoughnutSeries>  
   
   
Code Snippet [C#]:  
   
public class ViewModel : INotifyPropertyChanged  
    {  
          …..  
   
        private ChartColorCollection myColors; 
        public ChartColorCollection MyColors 
        { 
            get { return myColors; } 
            set 
            { 
                myColors = value; 
                OnPropertyChanged("MyColors"); 
            } 
        } 
      
        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. 
 
Thanks, 
Lavanya A. 


Matthias Gehrke
Replied On January 22, 2020 07:21 AM UTC

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

Hemalatha Marikumar [Syncfusion]
Replied On January 23, 2020 01:10 PM UTC

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. 
 
Regards, 
Hemalatha M. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon