Colors from Bound Data point

[Mark]

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]

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.

Sample :  https://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]

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]

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(this, new PropertyChangedEventArgs(propertyname));  

        }  

   

    }  

   

 

And we have prepared a sample based on your requirement and download the sample from the below link. 

 

Sample: https://www.syncfusion.com/downloads/support/forum/148314/ze/148314_NEw928290655.zip  

 

For more details please refer below ug link. 

https://help.syncfusion.com/xamarin/charts/appearance#apply-palette-for-series  

 

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

 

Thanks, 

Lavanya A. 

[Matthias Gehrke]

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]

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.