AreaSeries with a range of colors in background

[Catarina Carneiro]

Hi, 

I'm using a AreaSeries chart and i would like to change the background color.

Can i change the background to a range of colors? or an image? 

Like the image in attachment?

Attachment: graph_ad2aefa4.zip

[Suyamburaja Jayakumar]

Hi Catarina Carneiro, 

 

Greetings from Syncfusion.  

  

We have analyzed your requirement and can be achieved by using CustomGradientColors and by providing the GradientStops Offset values for the range as per your requirement as shown in the code snippet below. 

  

XAML:   

<chart:SfChart x:Name="chart" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">  

….  

        <chart:SfChart.Series>  

            <chart: SplineAreaSeries x:Name="series" ItemsSource="{Binding Data}" XBindingPath="XValue" YBindingPath="YValue"/>  

        </chart:SfChart.Series>  

  

        <chart:SfChart.ColorModel>  

            <chart:ChartColorModel Palette="Custom" CustomGradientColors="{Binding   

                                                           GradientColors}">  

            </chart:ChartColorModel>  

        </chart:SfChart.ColorModel>  

 </chart:SfChart>  

 

  

C#: [ViewModel.cs]  

GradientColors = new ChartGradientColorCollection()  

            {  

               new ChartGradientColor()  

               {  

StartPoint = new Point(0, 0.5) , EndPoint = new Point(1,0.5), 

                   GradientStops = new ChartGradientStopCollection() 

                    { 

                        new ChartGradientStop(){Offset = 0.05f, Color = Color.Violet}, 

                        new ChartGradientStop(){Offset = 0.25f, Color = Color.Blue}, 

                        new ChartGradientStop(){Offset = 0.30f, Color = Color.LightBlue}, 

                        new ChartGradientStop(){Offset = 0.40f, Color = Color.LightGreen}, 

                        new ChartGradientStop(){Offset = 0.65f, Color = Color.Yellow}, 

                        new ChartGradientStop(){Offset = 0.80f, Color = Color.Red}, 

                   }  

              }  

      };  

 

  

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/directtrac/general/ze/AreaSeries152333-265060030.zip  

  

Screenshot:   

 

 

Please refer the below help document link for more details,  

  

Link: https://help.syncfusion.com/xamarin/charts/appearance#gradient-colors  

 

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

  

Regards,  

Suyamburaja J. 

[Catarina Carneiro]

Thanks!

[Suyamburaja Jayakumar]

Hi Catarina Carneiro,  

  

We are glad to hear that your requirement has been achieved.  

  

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

  

Regards,  

Suyamburaja J.