AreaChart display problem with high range of AreaSeries

[Rainer]

Hi,

I want to display historical stock price data in an AreaChart.

It is a child of a card.

When the range of the data gets to big, the following problem occurs:

There is a kind of margin between the chart and the card.

Any tips how to get rid of this?

Code:

SfCartesianChart(

                                      margin: EdgeInsets.all(0),

                                      trackballBehavior: TrackballBehavior(

                                        enable: true,

                                        tooltipDisplayMode:

                                            TrackballDisplayMode.floatAllPoints,

                                        tooltipSettings: InteractiveTooltip(

                                            enable: true,

                                            color: Colors.black87,

                                            format: 'point.x : point.y\$'),

                                      ),

                                      primaryXAxis:

                                          DateTimeAxis(isVisible: false),

                                      primaryYAxis: NumericAxis(

                                        isVisible: false,

                                        rangePadding:

                                            ChartRangePadding.additional,

                                      ),

                                      series: <ChartSeries<History, dynamic>>[

                                        AreaSeries<History, dynamic>(

                                            dataSource: history,

                                            borderDrawMode: BorderDrawMode.top,

                                            borderColor: color,

                                            xValueMapper: (History data, _) => data.date,

                                            yValueMapper: (History data, _) => data.close)

                                      ],

                                    ),

[Sriram Kiran Senthilkumar]

Hi Rainer, 

  

Greetings from Syncfusion. We have analyzed your scenario with the provided code snippet, and we found that the setting of the rangePadding property of y-axis as additional caused the chart to render with additional padding in the bottom. So,  kindly change the rangePadding property to auto or none values in order to resolve the reported problem. 

  

Also, if you are in need of setting the value of the rangePadding property to additional then, kindly please revert us with more detail information on your requirement on why you need to use additional as value for the rangePadding property in your chart so that it will help provide the solutions sooner. 

  

Please get in touch with us if you require further assistance on this. 

  

Regards, 

Sriram Kiran. 

[Rainer]

Hi Sriram,

thanks for your answer.

In my first picture it's basically how it should look like. The Chart is displayed to the edges, but max points also got some space between the card.

If I turn rangePadding to .zero, the maximum values are at the boarder of the chart. Thas is not as I want it to be displayed.

If I turn rangePadding to .auto, then the value picked for distancing min value to the bottom is way to high (at least in the very same chart I've shown before):

I tried using rangePadding .value[3] but here I get the same problem with padding as mentioned in my first place.

So basically I need a proper distance between the max values and the boarder. RangePadding auto is not working, because it adds to much space to the bottom of the chart.

Maybe there is a way to use .value or .additional without getting the padding?

[Sriram Kiran Senthilkumar]

Hi Rainer, 

  

We have analyzed your scenario and we found a way to use the .additional value for rangePadding property without getting additional padding at the bottom. To overcome this, you need to set the minimum property of y-axis to “0” so that the additional padding at the bottom will be removed. We have also modified your code snippet for testing this behavior and also attached the sample below for your reference. 

Screenshot: 

Before setting 0 for minimum property 

  

After setting 0 for minimum property 

  

  

The sample used for testing can be found below 

https://www.syncfusion.com/downloads/support/forum/156609/ze/sample325593828 

  

Please check the above test sample and get in touch with us if you require further assistance on this. 

Regards, 

Sriram Kiran 

[Rainer]

Hey Sriram,

thank you very much for your suggestion. However, here is the same problem as with .auto:

Left side is with y min = 0 and right side is without y min.

since the share is dated at a value far above 0, the graph is set relatively high up and compressed in the y movement, because the y axis goes from 0 to 400, instead of 200 - 400.

The original problem with the padding is solved with this setting, but the presentation of the first chart is not yet as i expect it to be...

By your suggestion to set the minimum value to 0, I came to a workaround: I look for the minimum and maximum values in the list and add a buffer. then I specify these values as min and max y values. This does work. it is not the cleanest way.. but it's ok for me.

Regards,

Rainer

[Sriram Kiran Senthilkumar]

Hi Rainer, 

  

Thanks for the revert. We are glad that with your workaround, you are able to achieve your requirement. 

Please get in touch with us if you require further assistance. 

  

Regards, 

Sriram Kiran