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.
Unfortunately, activation email could not send to your email. Please try again.

Custom Colors for ChartSeries in XAML

Thread ID:

Created:

Updated:

Platform:

Replies:

117976 Jan 15,2015 09:34 AM Jul 27,2018 07:27 AM Xamarin.Forms 8
loading
Tags: SfChart
Markus Demmler
Asked On January 15, 2015 09:34 AM

Could you please provide me an example showing how to set custom color for a ChartSeries in XAML?

Thanks.

Magesh Kumar Krishnan [Syncfusion]
Replied On January 15, 2015 01:44 PM

Hi Markus,

We have prepared the sample to set custom color for chart series from XAML page, please find the sample from the following attachment.

Please let us know if you have any queries.

Thanks,
Magesh Kumar K

Attachment: ChartColorModel_70413b5f.zip

Markus Demmler
Replied On January 16, 2015 01:51 AM

Thanks for the example. Is it also possible to declare the list of colors directly in XAML and assign that list directly in XAML?

Magesh Kumar Krishnan [Syncfusion]
Replied On January 19, 2015 08:15 AM

Hi Markus,

We are analyzing the reported requirement and we will update you the status in one business day (20th January, 2015).

Thanks,
Magesh Kumar K

Magesh Kumar Krishnan [Syncfusion]
Replied On January 20, 2015 08:55 AM

Hi Markus,

We can use the following code to assign the custom colors directly through XAML, but currently we found exception with this code, also we have fixed this issue and it will be available on or before end of this week. We will let you know through this incident once release has been rolled out.

 

[XAML]

<chart:ColumnSeries ItemsSource="{Binding Data1}">

<chart:ColumnSeries.ColorModel>

<chart:ChartColorModel Palette="Custom" >

<chart:ChartColorModel.CustomBrushes>

<Color>Red</Color>

<Color>Blue</Color>

<Color>Yellow</Color>-->

</chart:ChartColorModel.CustomBrushes>           

</chart:ChartColorModel>

</chart:ColumnSeries.ColorModel>

</chart:ColumnSeries>

Please let us know if you have any queries.

Thanks,
Magesh Kumar K





Bernd Unger
Replied On July 25, 2018 08:15 AM

This works so far, but how can i reference a static color from resource dictionary here?

In WPF it would look like this  

<SolidColorBrush Color="{StaticResource MyStaticResourceColor}"/>

https://www.syncfusion.com/kb/5480/how-to-add-custom-color-model-to-series

But in Xamarin forms SolidColorBrush is missing and Color has no Color attribute.

Michael Prabhu M [Syncfusion]
Replied On July 26, 2018 01:45 AM

Hi Bernd, 
 
Greetings from Syncfusion, your requirement can be achieved by following the below code snippet. 
 
Code Snippet Xaml 
<ContentPage.Resources>    <ResourceDictionary>        <chart:ChartColorCollection x:Key="Colors">            <Color>Red</Color>            <Color>Gray</Color>            <Color>Blue</Color>            <Color>Maroon</Color>            <Color>Pink</Color>        </chart:ChartColorCollection>    </ResourceDictionary></ContentPage.Resources><chart:SfChart>    <chart:SfChart.ColorModel>        <chart:ChartColorModel Palette="Custom" CustomBrushes="{StaticResource Colors}"/>    </chart:SfChart.ColorModel>    ...</chart:SfChart>
 
 
  
You can follow your user guide for more on this. 
 
 
Hope this helps. 
 
Thanks, 
Michael 



Bernd Unger
Replied On July 26, 2018 02:31 AM

Yes you are right - thanks for the answer.

In this case everything is defined in XAML.

But i cannot reuse es defined color here. E.g. i want to define style colors only once and with SolidColorBrush i could reuse this color in the chart colors.
Strange thing is still - this works in the WPF syncfusion chart, cause there is a SolidColorBrush - in Xamarin Forms this is missing.

Michael Prabhu M [Syncfusion]
Replied On July 27, 2018 07:27 AM

Hi Bernd, 
 
Yes, in Xamarin.Forms SolidColorBrush is not available instead of that we can use Color collection in C#. Also, we can reuse the collection to multiple series or chart as like in below code snippet.  
 
Code snippet [XAML]: 
<chart:SfChart.Series> 
                    <chart:ColumnSeries XBindingPath="XValue"  
                                        YBindingPath="YValue1"  
                                        ItemsSource="{Binding Data}"> 
                        <chart:ColumnSeries.ColorModel> 
                            <chart:ChartColorModel Palette="Custom" CustomBrushes="{Binding CustomColors}"> 
                            </chart:ChartColorModel> 
                        </chart:ColumnSeries.ColorModel> 
                    </chart:ColumnSeries> 
                    <chart:ColumnSeries XBindingPath="XValue"  
                                        YBindingPath="YValue2"  
                                        ItemsSource="{Binding Data}"> 
                        <chart:ColumnSeries.ColorModel> 
                            <chart:ChartColorModel Palette="Custom" CustomBrushes="{Binding CustomColors}"> 
                            </chart:ChartColorModel> 
                        </chart:ColumnSeries.ColorModel> 
                    </chart:ColumnSeries> 
                    
                </chart:SfChart.Series> 
 
 
Code snippet [C#]: 
public class ViewModel 
    { 
        public ObservableCollection<Model> Data { get; set; } 
        Random rd = new Random(); 
 
        public ViewModel() 
        { 
            Data = new ObservableCollection<Model>(); 
.. 
            CustomColors = new List<Color>(); 
            CustomColors.Add(Color.Red); 
            CustomColors.Add(Color.Green); 
            CustomColors.Add(Color.Blue); 
        } 
 
        private IList<Color> customColors; 
        public IList<Color> CustomColors 
        { 
            get 
            { 
                return customColors; 
            } 
            set 
            { 
                customColors = value; 
            } 
        } 
    } 
 
 
Based on this we have prepared a sample and it can be downloaded  
 
Thanks, 
Michael 
 


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.

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.

;