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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Styling Area series charts

Thread ID:

Created:

Updated:

Platform:

Replies:

149423 Nov 26,2019 03:24 AM UTC Dec 6,2019 10:16 AM UTC Xamarin.Forms 3
loading
Tags: SfChart
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

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.     
  
  
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. 
  
  
And we have prepared a sample based on your requirement and you can download the sample from the below link. 
  
  
Screenshot: 
  
 
  
  
Regards, 
Hemalatha M. 


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

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. 
  
  
Screenshot: 
 
  
Please let us know if need any further assistance on this. 
  
Regards, 
Hemalatha M. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon