Styling Area series charts

[Ryan Scoopo]

Hello

I am trying to stylize my area series chart. I would like to add three capabilities that I can't seem to get right.

1. I would like to add a gradient to the color under series that goes from transparent to solid, top to bottom.

2. I would like to make the line of the series thicker so it can be seen compared to the rest of the area

3. Be able to just show the data maker that was tapped instead of showing all data markers on the chart.

Thank you

[Hemalatha Marikumar]

Hi Ryan Scoopo, 

  

Greetings from Syncfusion. 

  

Query 1: I would like to add a gradient to the color under series that goes from transparent to solid, top to bottom. 

  

We have achieved this requirement by using CustomGradientColors in ChartColorModel as per in below code snippet 

  

Code Snippet [Xaml]: 

  

<chart:SfChart.Series> 

                <chart:SplineAreaSeries StrokeWidth="3" StrokeColor="#FF0080DF" ItemsSource="{Binding Data}" XBindingPath="XValue" YBindingPath="YValue"> 

                    <chart:SplineAreaSeries.ColorModel> 

                        <chart:ChartColorModel Palette="Custom"> 

                            <chart:ChartColorModel.CustomGradientColors> 

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

                                    <chart:ChartGradientColor.GradientStops> 

                                        <chart:ChartGradientStop Color="White" Offset= "0"/> 

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

                                    </chart:ChartGradientColor.GradientStops> 

                                </chart:ChartGradientColor> 

                            </chart:ChartColorModel.CustomGradientColors> 

                        </chart:ChartColorModel> 

                    </chart:SplineAreaSeries.ColorModel> 

                </chart:SplineAreaSeries>                 

            </chart:SfChart.Series> 

  

  

Note: Please change your offset values to change the position of colors based on your requirement. Please refer below link to know more details about GradientColors.     

  

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

  

Query 2: I would like to make the line of the series thicker so it can be seen compared to the rest of the area. 

  

You can achieve this requirement by setting value to the StrokeWidth and color to StrokeColor properties which is available in ChartSeries as per in below code snippet. 

  

Code Snippet [Xaml]: 

  

<chart:SplineAreaSeries StrokeWidth="3" StrokeColor="#FF0080DF" EnableTooltip="True" ItemsSource="{Binding Data}" XBindingPath="XValue" YBindingPath="YValue"> 

</chart:SplineAreaSeries> 

  

  

  

Query 3: Be able to just show the data maker that was tapped instead of showing all data markers on the chart. 

  

We have validated your query and we suspect that your requirement to show the DataMarker while tapping the series. You can achieve this requirement by enable the Tooltip in ChartSeries. By setting true to the EnbaleTooltip property, you can show the DataMarker when tapping inside the Series Area. Please refer below code snippet. 

  

Code Snippet [Xaml]: 

  

<chart:SplineAreaSeries StrokeWidth="3" StrokeColor="#FF0080DF" EnableTooltip="True" ItemsSource="{Binding Data}" XBindingPath="XValue" YBindingPath="YValue"> 

</chart:SplineAreaSeries> 

            

  

Note: Please let us know that you need to show one by one data marker while tapping or only one data marker shown when tapping. 

  

Please refer below link to know more about Tooltip. 

  

https://help.syncfusion.com/xamarin/charts/tooltip 

  

And 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/forum/149423/ze/149423_Gradient_Area1613585872.zip 

  

Screenshot: 

  

 

  

  

Regards, 

Hemalatha M. 

[Ryan Scoopo]

Can you show me how I could do the gradient in C#. What are the start, stop, and offset represent. All the data is external and I can't seem to get the gradient stuff working. 

https://photos.app.goo.gl/LRcgnnVBHWcfXBUU9

[Hemalatha Marikumar]

Hi Ryan Scoopo, 

  

Query: Can you show me how I could do the gradient in C#. What are the start, stop, and offset represent? All the data is external, and I can't seem to get the gradient stuff working. 

  

The StartPoint and EndPoint properties of ChartGradientColor is used to configure the direction of gradient color.  

 

By default, the value of StartPoint is (0,0) and the value of EndPoint is (1,1).  

 

GradientStops property is used to set the color based on the offset. The Color and Offset properties of ChartGradientStop is used to configure the color and offset position of each color. 

  

You can set the CustomGradientColors in C# as per the below code snippet. 

  

Code Snippet[C#]: 

  

           chart.ColorModel.Palette = ChartColorPalette.Custom; 

  

            ChartGradientColor gradientColor = new ChartGradientColor() { StartPoint = new Point(0.5, 1), EndPoint = new Point(0.5, 0) }; 

            ChartGradientStop stop1 = new ChartGradientStop() { Color = Color.White, Offset = 0 }; 

            ChartGradientStop stop2 = new ChartGradientStop() { Color = Color.DarkGreen, Offset = 1 }; 

            gradientColor.GradientStops.Add(stop1); 

            gradientColor.GradientStops.Add(stop2); 

  

            chart.ColorModel.CustomGradientColors.Add(gradientColor); 

  

  

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/forum/149423/ze/149423_Gradient_SplineArea780887002.zip 

  

Screenshot: 

 

  

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

  

Regards, 

Hemalatha M.