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

[Gergely Kalapos]

Hi,

here is the code of my chart:

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

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

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

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...

Thanks,
Greg

Attachment: Imgs_39bb6219.zip

[Devi Aruna Maharasi Murugan]

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" 

                    StrokeThickness="4"> 

                <chart:AreaSeries.Interior> 

                    <SolidColorBrush Color="#4000BFFF"/> 

                </chart:AreaSeries.Interior> 

           </chart:AreaSeries> 

  

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:SfChart.PrimaryAxis> 

                <chart:DateTimeAxis Origin="4200"/> 

            </chart:SfChart.PrimaryAxis> 

  

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. 

  

Regards, 

Devi