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. Image for the cookie policy date

How to get the same NumericalAxis range for AreSeries as the default of the LineSeries


here is the code of my chart:

<syncfusionChart:SfChart   HorizontalAlignment="Stretch" Height="320" Margin="5,15,15,0"  >
                                <syncfusionChart:DateTimeAxis ShowGridLines="False" LabelFormat="MMM/yy" IntervalType="Months" RangePadding="Auto" />

                                <syncfusionChart:NumericalAxis  x:Name="IndexChartNumericalAxis" StartRangeFromZero="False" />

                            <syncfusionChart:LineSeries ItemsSource="{Binding SelectedIndexHistoricalPrices}" XBindingPath="Date" YBindingPath="Close">
                                    <SolidColorBrush Color="#FF0061A4" Opacity="0.6"/>

I uploaded a file (Imgs.zip) with two screenshots.

syncfusionLine.png shows how this looks. As you see the SecondaryAxis starts at 4200 and ends at 5800. This was calculated automatically. I did not do anything. Now this chart is nice, but I don't like the white space below the chart line (aka below the LineSeries) ... I would like to fill it with a nice color with some transparency.

I changed the LineSeries to AreaSeries (just replace the LineSeries in the sample..).
syncfusionArea.png Show how this looks: As you see the NumericalAxis starts at 0. I already set the StartRangeFromZero to false and some other tings, but no success.

Of course I could calculate the Minimum and Maximum, but you guys have this range calculation magic in your code anyway...
So the question is: how to get the same NumericalAxis.VisibleRange for the AreaSeries as for the LineSeries? If there is an option to fill the area below the line chart it is also fine for me...


Attachment: Imgs_39bb6219.zip

1 Reply

DA Devi Aruna Maharasi Murugan Syncfusion Team January 27, 2017 12:42 PM UTC

Hi Gergely, 
Thanks for contacting Syncfusion Support. 
Query 1: To hide the WhiteSpace below the LineSeries 
We can achieve this requirement by setting Stroke, Stroke Thickness, Interior property for AreaSeries as shown in the below code snippet, 
           <chart:AreaSeries Stroke="DeepSkyBlue" 
                    <SolidColorBrush Color="#4000BFFF"/> 
We have prepared a demo sample based on your requirement and it can be downloaded from below link, 
Sample: VisibleRange 
Query 2: how to get the same NumericalAxis.VisibleRange for the AreaSeries as for the LineSeries? 
We would like to inform you that the AreaSeries is rendered based on Origin of XAxis and the LineSeries is not rendered based on the Origin. However, we can achieve your requirement by setting the Origin for chart primary axis as shown in the below code snippet, 
                <chart:DateTimeAxis Origin="4200"/> 
Query 3: Regarding StartRangeFromZero property behavior 
The behavior of StartRangeFromZero property is force the axis’s start range to zero when its actual range is greater than zero. In your case, the actual range of the chart secondary axis is zero. So, the axis range starts from zero only. 
Note: Attached image does not contain any images related to chart. 

Live Chat Icon For mobile
Up arrow icon