Auto scaling of charts

Question

For a better analysis of data, I need the bars to be as big as possible. As of now I'm taking the maximum value from the incoming data that I have and passing it to the "maximum" property in the primaryYAxis, but this seems to fail when I filter out the data with some UI buttons that I have.
Is there any way to make the bars take most of the space vertically?

The attached picture illustrates my situation and would give you a clearer picture. https://ibb.co/34dnM5W

Dharanidharan Dharmasivam · Answer

Hi Yudhisthir, 

Thanks for using Syncfusion widgets. 
We have analyzed your query. By default, the minimum and maximum range for the axis will be calculated automatically based on the data point values. You can change that by specifying values manually to the minimum and maximum properties in the axis. Also the automatic range calculation can be controlled by specifying values to the rangePadding property in the axis.  

Default value is auto. On specifying the value as additional, an additional interval will be added to axis min and max value. For your scenario, you can set as none. Thus, the maximum and minimum data point value will be assigned to the axis maximum and minimum.  





[Dart] 
SfCartesianChart( 
  primaryYAxis: NumericAxis(rangePadding: ChartRangePadding.none) 
) 

The below screenshot shows the chart output for none range padding. 
  

Also please refer the below user guide documentation link for more details on range padding. 
https://help.syncfusion.com/flutter/chart/axis-types#applying-padding-to-the-range 

Thanks, 
Dharani.

Yudhisthir Singh Rajawat · Answer

Thanks, It worked like a charm.
Additionally, Can I make all the numbers on the y-axis as whole numbers and not decimal ones? And, Is there any way to set the interval in such a way that all the charts have an equal number of gridLines (I want 4 gridlines for all the charts irrespective of the highest data point fed to them)?

As you quoted, "By default, the minimum and maximum range for the axis will be calculated automatically based on the data point values"... Is there any way for me to get that maximum value? So I can pass it in the interval as--> interval: maximum/4

Dharanidharan Dharmasivam · Answer

Hi Yudhisthir, 
 
Kindly find the response for your queries below. 
 
Query #1:  Can I make all the numbers on the y-axis as whole numbers and not decimal ones? 
Yes, using the decimalplaces and globalized number format property of the axis, your requirement can be achieved. Find the code snippet to achieve this. 




 
SfCartesianChart( 
     primaryYAxis: NumericAxis( 
              numberFormat: NumberFormat.compact(), 
              decimalPlaces: 0) 
) 
 
 
Query #2: Is there any way to set the interval in such a way that all the charts have an equal number of gridLines 
Yes, using the onActualRangeChangedEvent, your requirement can be achieved. Find the code snippet below to achieve this. 
 




SfCartesianChart( 
     onActualRangeChanged:  (ActualRangeChangedArgs args){ 
            final double gridLineCount = 4; 
            if(args.axisName == 'primaryYAxis') 
              args.visibleInterval = (args.visibleMax - args.visibleMin) / gridLineCount; 
          }, 
) 
 
 
Query #3: Is there any way for me to get that maximum value? 
Yes, your requirement can be achieved as a workaround. Before assigning the data source to chart, we have found the maximum y-value from the data source using the getMaxYValue method in the sample. 
 
Sample for above can be found below. 
https://www.syncfusion.com/downloads/support/forum/151921/ze/sample-475812181  
 
Thanks, 
Dharani.