We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

Set maximum data displayed chart.

Hi, I'm working with SplineAreaSeries, my primary XAxis is a DateTimeAxis type, I'm working with the format of hours and minutes. Exists a property for setting the maximum number of data displayed in X axis? But with the possibility of seeing the rest of the data using panning in the chart.

For example, If I have values between 7:00 - 9:00, And I want to set just for display the information between 7:00 - 8:00, but with the possibility of access the rest data (8:00 - 9:00) with panning.

I explored the properties of primaryXAxis, but the property 'maximum' doesn't make this feature that I want. 


2 Replies

DD Dharanidharan Dharmasivam Syncfusion Team January 5, 2020 02:45 PM UTC

Hi Arturo, 
Thanks for using the Syncfusion Flutter chart widget. Your requirement can be achieved using the visibleMinimum and visibleMaximum properties of axis. As of now, we are having an issue with panning while using these properties of datetime axis. So, we have logged defect report in our feedback portal. The fix for the issue will be available for volume 4 sp1 release which is expected to be out at the end January 2020. You can track the status of the bug from feedback portal. 

We will update you once the issue fix got published. We appreciate your patience until then. 


DD Dharanidharan Dharmasivam Syncfusion Team February 3, 2020 10:14 AM UTC

Hi Arturo, 
Thanks for being patience. The issue related to the visibleMinimum and visibleMaximum properties have been fixed. Kindly use the below package to fix the issue. 
Now your requirement can be achieved using the visibleMinimum and visibleMaximum properties of the axis. Here you need to specify the range which needs to be visible in the view and enable the panning to pan the data which are not in the view.   
We have prepared a sample in which we have 50 days, out of that we have shown the last 30 days in the viewport. To see the remaining days, you can pan the chart to view others.You can change this based on your scenario. Find the code snippet below.   
      primaryXAxis: DateTimeAxis(   
        visibleMinimum: chartData[chartData.length-29].x,   
        visibleMaximum: chartData[chartData.length-1].x   
      zoomPanBehavior: ZoomPanBehavior(   
        enablePanning: true,    
      //Other configurations   
Sample for reference can be found from below link. 

Live Chat Icon For mobile
Up arrow icon