Aligning secondary axis with primary axis

Question

Hi, I had a question while using the SfCartesian Chart with multiple axis.

I'm creating a mobile app and below is my chart, with two different data series.

As you can see below, the first series has a max of 15 (blue) and second has a max of 60. Because the chart is generated in a way such that the second y-axis has a maximum value of 70, the chart ends up with multiple horizontal lines with random intervals.

I was wondering if there was a way I could align the secondary axis interval with the primary axis in a way such that [maximum value for the secondary axis] would be [maximum value of the primary axis * n]. In the below example, since the maximum value of the primary axis is 20, I would prefer the secondary axis to have a max value of either 60 or 80 so that the grid lines are aligned. Is there a way I could possibly do this?

Yuvaraj Gajaraj · Answer

Hi Daniel, 
 
Greetings from Syncfusion. The gridlines of the secondary y-axis can be aligned with primary y-axis by specifying range (minimum and interval) to both axes, so that if primary y-axis have 5 labels/gridlines, the secondary y-axis must also have sample label/gridlines. Find the code snippet below to accomplish this. 
 
Code snippet: 




axes: [ 
  NumericAxis( 
    opposedPosition: true, 
    name: 'yaxis', 
    minimum: 0, 
    interval: 20) 
], 
 
Screenshot: 
  
 
Hope this help you achieve your requirement. 
 
Regards, 
Yuvaraj.

Daniel · Answer

Thank you so much. This would partially solve my issue. The reason I said "partially" is because, while the second axis will always be larger than the primary axis, (the primary is avg value while the secondary is a sum)The primary isn't always 20. I was wondering if there was a way such that I could do sth like belowaxes: [ 
  NumericAxis( 
    opposedPosition: true, 
    name: 'yaxis', 
    minimum: 0, 
    interval: [PrimaryAxisMaxValue * 4]) 
], Thanks

Yuvaraj Gajaraj · Answer

Hi Daniel, 
 
Thanks for the information. Using the onActualRangeChanged callback you can customize each axis visible range based on their respective axis name. Here we have customized the secondary axis interval and maximum value based on primaryYAxis. We have provided the code snippet and sample below for your reference,  
 
Code snippet: 




int labelCount = 0; 
int max = 0; 
 
SfCartesianChart( 
  onActualRangeChanged: (ActualRangeChangedArgs args) { 
    if (args.axisName == 'primaryYAxis') { 
      labelCount = (args.visibleMax / args.visibleInterval).floor(); 
      max = args.visibleMax.floor(); 
    } 
    if (args.axisName == 'y-axis') { 
      args.visibleInterval = max * labelCount / labelCount; 
      args.visibleMax = max * labelCount; 
    } 
  } 
) 
 
Sample: https://www.syncfusion.com/downloads/support/forum/172614/ze/f1726141544376339 
  
UG: https://help.syncfusion.com/flutter/cartesian-charts/callbacks#onactualrangechanged  
 
Regards, 
Yuvaraj.