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

syncfusion xamarin line graph with gradient background for selective range

Thread ID:

Created:

Updated:

Platform:

Replies:

147517 Sep 13,2019 02:43 PM UTC Sep 16,2019 12:57 PM UTC Xamarin.Forms 3
loading
Tags: SfChart
Nitin Sawant
Asked On September 13, 2019 02:45 PM UTC

how do I create xamarin syncfusion line graph with gradient background for selective range
e.g. green for 0-20
yellow for 21-40
red for 41-abovee


Muneesh Kumar G [Syncfusion]
Replied On September 16, 2019 12:36 PM UTC

Hi Nitin, 
 
Greetings from Syncfusion.  
 
We have achieved your requirement by using the StackingArea100Series and CustomGradientColors of ChartColorModel. Please refer the below code. 
 
Code snippet [XAML]: 
<chart:StackingArea100Series x:Name="stackingSeries" ItemsSource="{Binding Data}" XBindingPath="XValue" YBindingPath="YValue"  > 
    <chart:StackingArea100Series.XAxis> 
        <chart:NumericalAxis IsVisible="False"/> 
    </chart:StackingArea100Series.XAxis> 
    <chart:StackingArea100Series.YAxis> 
        <chart:NumericalAxis IsVisible="False" /> 
    </chart:StackingArea100Series.YAxis> 
    <chart:StackingArea100Series.ColorModel> 
        <chart:ChartColorModel Palette="Custom"> 
            <chart:ChartColorModel.CustomGradientColors> 
                <chart:ChartGradientColor StartPoint="0.5,1" EndPoint="0.5, 0"> 
                    <chart:ChartGradientColor.GradientStops> 
                        <chart:ChartGradientStop x:Name="stop1" Color="Red" Offset= "0"/> 
                        <chart:ChartGradientStop Color="Yellow" Offset= "0.6"/> 
                        <chart:ChartGradientStop x:Name="stop3" Color="Green" Offset= "1"/> 
                    </chart:ChartGradientColor.GradientStops> 
                </chart:ChartGradientColor> 
            </chart:ChartColorModel.CustomGradientColors> 
        </chart:ChartColorModel> 
    </chart:StackingArea100Series.ColorModel> 
</chart:StackingArea100Series> 
 
Code snippet[C#]: 
if (Device.RuntimePlatform == Device.UWP) 
{ 
    stop1.Offset = 1; 
    stop3.Offset = 0; 
} 
 
Note – You can change the Offset value to adjust the gradient color for selective range. 
 
 
 
 
 
Please ler us know if you have any other queries.         
                
Thanks,   
Muneesh Kumar G. 
 


Nitin Sawant
Replied On September 16, 2019 12:48 PM UTC

Thanks Muneesh

Muneesh Kumar G [Syncfusion]
Replied On September 16, 2019 12:57 PM UTC

Hi Nitin,  
 
Please let us know if you have any other queries.  
                
Thanks,   
Muneesh Kumar G. 


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