Consistant evenly spaced X Axis Labels

Question

I'm using the SfCartesianChart widget and supplying the X-Axis with:

primaryXAxis: DateTimeAxis(...)
I'm not using interval or intervalType (although I've tried).

I've set maximumLabels to 3 (even though it says 3 is the default). And sometimes the number of labels exceeds 3. But more than that, 80% of the time, the labels are not evenly spaced on the X-Axis.

How can I go about setting an evenly spaced X-Axis?

Yuvaraj Gajaraj · Answer

Hi Todd, 
 
Greetings from Syncfusion. We have analyzed your query, and we would like to let you know that the maximum label property is used to show number of labels in the 100 pixels, and we have tried to reproduce the reported issue, regarding the unevenly spaced x-axis labels, but this is not replicated at our end. So, we have attached the sample below and try to reproduce the issue with this. Also share some screenshots for your expected behavior of the x-axis labels. It will be more helpful to us to provide you the solution sooner.  
 
Screen shot: 
  
  
Sample: https://www.syncfusion.com/downloads/support/forum/169730/ze/forum_169730-16455006 
  
Regards, Yuvaraj.

Todd · Answer

Thank you for the sample. My question really is if you look at the charts on apps like Coinbase and Robinhood. When you select the 1H range: There are always 5 consistent labels, exactly in the same positions.

For me when I set the intervalType to 'minutes', I get a lot of unexpected behavior when the numbers are just floating at random intervals, etc. Do you have any suggestions on how to keep is consistent, when the data is changing and when the dates are not perfect (strange seconds, strange milliseconds, et

Todd · Answer

For example; How can I precisely put a label every 5 minutes, or every 15 minutes?

Yuvaraj Gajaraj · Answer

Hi Todd, 
 
Your requirement can be achieved by specifying the range (minimum, maximum, interval) to the x-axis. We have created a sample based on this, here we have assigned the minimum and maximum to the x-axis, and since your requirement is to display only 5 labels with respect to minutes, we have found the interval dynamically from the minimum and maximum ranges. Find the code snippet below to accomplish this and you can changes based on your exact use case at your end. 
 
Code snippet: 
 




final DateTime minimum = DateTime(2010, 1, 1, 01, 11); 
final DateTime maximum = DateTime(2010, 1, 1, 01, 20); 
const int noOfLabelToDisplay = 5; 
 
primaryXAxis: DateTimeAxis( 
    minimum: minimum, 
    maximum: maximum, 
    //For 5 consistent labels, here we have divided by 5, 
    //you can change this based on your scenario 
    interval: (maximum.minute - minimum.minute) / noOfLabelToDisplay, 
    intervalType: DateTimeIntervalType.minutes 
    ), 
  
Hope this helps. 
 
We have also attached the sample below for your reference. 
 
Sample: https://www.syncfusion.com/downloads/support/forum/169730/ze/forum_169730-1504024468 
  
Regards, 
Yuvaraj.

Todd · Answer

Doesn't this assume that you are only displaying data for the last hour or so?

when maximum minute is 30 and minimum is 50 then (30 - 50) / 5 = -4 ?

Also if I want to be able to scroll the graph, does changing these to visibleMax/Min the way to go? It's strange that I can't tell the graph library that I only want X labels and that they should be spaced 5 minutes apart.

Rokesh Karthikeyan · Answer

Hi Todd, 
We regret for the inconvenience. Now we have modified the code to find the exact difference between the dates using difference method available in framework. We have attached the modified sample for your and code snippet below. 
Code Snippet: 




    final DateTime minimum = DateTime(2010, 1, 1, 01, 50); 
    final DateTime maximum = DateTime(2010, 1, 1, 02, 30); 
    const int noOfLabelToDisplay = 5; 
 
 
 primaryXAxis: DateTimeAxis( 
              minimum: minimum, 
              maximum: maximum, 
              interval: maximum.difference(minimum).inMinutes.toDouble() / 
                  noOfLabelToDisplay 
  ), 
 
  
Sample:   https://www.syncfusion.com/downloads/support/forum/169730/ze/forum_169730998924460 
In one of the previous update you have told that you need to have 5 consistent label in while setting interval type as minutes, we have provided code by finding difference between the dates in minutes. You can change this based on your scenario.  
 
If you specify the visibleMinimum and visibleMaximum, then in the viewport of chart, the range specified in visibleMinimum and visibleMaximum will only be visible. If you wish to see the data other than in viewport, then you can enable panning. Find the user guide for these below, 
  
Visible minimum:  
https://help.syncfusion.com/flutter/cartesian-charts/axis-customization#visible-minimum  
Panning: https://help.syncfusion.com/flutter/cartesian-charts/zoom-pan#panning 
  
Regards,  
Rokesh.

Todd · Answer

Was there a regression, when using the above with visibleMinimum property, there are some strange results on non-retina devices? The strange results that I'm referring to, mainly are: The number of intervals are no longer working as expected when they are computed, as prescribed above. In fact interval seems to be 100% ignored. I'm on 19.3.53 now.

Sriram Kiran Senthilkumar · Answer

Hi Todd, 

Query #1: (when using the above with visibleMinimum property, there are some strange results on non-retina devices?) 
We have analyzed the above query and in your query, you have mentioned that when using the visibleMinimum property, you are getting strange results on non-retina devices, and we are not sure what type of devices you are referring to by the term “non-retina devices”. So, we kindly request you to share us with more information on this in detail so that it will be helpful in further analysis to provide solutions sooner. 

Query #2: (The strange results that I'm referring to, mainly are: The number of intervals are no longer working as expected when they are computed, as prescribed above. In fact interval seems to be 100% ignored.)  
We have analyzed the above query regarding the strange results you are referring to due to the setting of visibleMinimum property and you have reported that the computed interval value which you set for the chart axis is getting ignored when visibleMinimum property is set for that axis and as we are not exactly sure on the reported scenario whether the interval is calculating improperly or the axis label interval is rendered improperly, we kindly request you to share us with more information on the reported issue in detail along with screenshots so that it will help provide the solutions sooner. 

Regards, 
Sriram Kiran