Semi-full area line chart

[Marco Gobbi]

Hello, I need to create a chart like the one attached, what kind of chart should I create?

Do I have to play with the opacity of the color to have that kind of effect as a semi-filled area?

Thanks for your support.

Attachment: Chart_3a49ae37.zip

[Yuvaraj Palanisamy]

Hi Marco Gobbi,  

  

You can achieve your requirement the semi-full area line chart with the help of CustomGradientColors support in the SfChart as per the below code example. 

 

CodeSnippet:  

<chart:AreaSeries ItemsSource="{Binding Data}" 

                  StrokeColor="Green" 

                  StrokeWidth="2" 

                  XBindingPath="XValue"  

                  YBindingPath="YValue" > 

    <chart:AreaSeries.ColorModel> 

        <chart:ChartColorModel Palette="Custom"> 

            <chart:ChartColorModel.CustomGradientColors> 

                <chart:ChartGradientColor StartPoint="0.5,1" EndPoint="0.5,0"> 

                    <chart:ChartGradientColor.GradientStops>                         

                        <chart:ChartGradientStop Color="#50FFFFFF" Offset= "0"/> 

                        <chart:ChartGradientStop Color="#50FFFFFF" Offset= "0.3"/> 

                        <chart:ChartGradientStop Color="#50008f00" Offset= "1"/> 

                    </chart:ChartGradientColor.GradientStops> 

                </chart:ChartGradientColor> 

            </chart:ChartColorModel.CustomGradientColors> 

        </chart:ChartColorModel> 

    </chart:AreaSeries.ColorModel> 

</chart:AreaSeries> 

 

Also, we have attached the sample for your reference. For more details about gradient support, please refer the below UG link. 

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

 

Sample: https://www.syncfusion.com/downloads/support/forum/173107/ze/AreaSeries_Gradient274791119 

 

Output: 

 

 

Please let us know if you have any further assistance. 

 

Regards, 

Yuvaraj.