Custom Colors for ChartSeries in XAML

[Markus Demmler]

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

Thanks.

[Magesh Kumar Krishnan]

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]

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]

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]

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

[Unknown]

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]

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. 

 

UG Link: https://help.syncfusion.com/xamarin/sfchart/appearance  

 

Hope this helps. 

 

Thanks, 

Michael 

[Unknown]

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]

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  

Sample : http://www.syncfusion.com/downloads/support/forum/117976/ze/Chart_Xamarin-1251445898 

 

Thanks, 

Michael