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. Image for the cookie policy date

syncfusion xamarin line graph with gradient background for selective range

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


3 Replies

MK Muneesh Kumar G Syncfusion Team September 16, 2019 04:36 AM

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. 
 



NS Nitin Sawant September 16, 2019 04:48 AM

Thanks Muneesh


MK Muneesh Kumar G Syncfusion Team September 16, 2019 04:57 AM

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


Loader.
Live Chat Icon For mobile
Up arrow icon