syncfusion xamarin line graph with gradient background for selective range

[Nitin Sawant]

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]

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. 

 

Sample – https://www.syncfusion.com/downloads/support/forum/147517/ze/147517-sample539914428.zip 

 

 

 

UG link – https://help.syncfusion.com/xamarin/sfchart/appearance 

https://www.syncfusion.com/kb/7731/how-to-update-an-existing-data-point-in-xamarin-forms-chart 

 

Please ler us know if you have any other queries.         

                

Thanks,   

Muneesh Kumar G. 

 

[Nitin Sawant]

Thanks Muneesh

[Muneesh Kumar G]

Hi Nitin,  

 

Please let us know if you have any other queries.  

                

Thanks,   

Muneesh Kumar G.