Styling Area series charts

Ryan Scoopo

Asked On November 26, 2019 03:24 AM UTC

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

Reply | Reply with quote

Hemalatha Marikumar [Syncfusion]

Replied On November 26, 2019 07:12 AM UTC

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.

Reply | Reply with quote

Ryan Scoopo

Replied On December 6, 2019 01:55 AM UTC

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

Reply | Reply with quote

Hemalatha Marikumar [Syncfusion]

Replied On December 6, 2019 10:16 AM UTC

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.

Reply | Reply with quote

Thread ID:	Created:	Updated:	Platform:	Replies:
149423	Nov 26,2019 03:24 AM UTC	Dec 6,2019 10:16 AM UTC	Xamarin.Forms	3

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US