1. Home
  2. Forum
  3. Flutter
  4. ColumnSeries Column is Cropped in Half at the start and end of the DateTime Axis

ColumnSeries Column is Cropped in Half at the start and end of the DateTime Axis

Hi SyncFusion Support,

Im using SFCartesianChart Widget with DateTimeAxis X Axis and NumericalAxis Y Axis, with a ColumnSeries. I want to display Weekly, Monthly & Yearly Columns in my Chart. I have set minimum & visibleMinimum to 'First Day of Current Week' and maximum & visibleMaximum to 'Last Day of Current Week', for the Weekly Data and respectively, for Month and Year.

My Weekly Chart ranges from Monday to Sunday. The Data is mapped correctly, but the Monday & Sunday Columns are cropped by Half the Width of the Column on either sides. 

I cant seem to figure out how to Pad the X Axis on both sides so that the columns are not cropped. Pls look at the attached screenshot for reference.

Kindly suggest how i can see Column Series where all the 7 Columns of a Week can be seen without Cropping the Columns. Thank You. Awaiting your response eagerly.

Happy New Year!!


Attachment: Screenshot_20201229_at_4.30.10_AM_86e43174.zip

5 Replies 1 reply marked as answer
SK Sriram Kiran Senthilkumar Syncfusion Team December 29, 2020 12:52 PM UTC

Hi Devraj, 
  
Greetings from Syncfusion. We have analyzed your scenario with the provided information at our end and if you are using visibleMinimum and visibleMaximum property to set the visible range for the chart, then the first and last data points in the chart will get cropped if you are using rect series types. So, to overcome this, you can add additional duration before setting the necessary visible minimum and maximum values in the axis. That is, before setting the visible minimum datetime value, you can decrease the duration (say -1 day or -12 hour) according to the respective axis interval by adding duration to that datetime value and before setting visible maximum datetime value, you can add additional duration (say +1 day or +12 hour) according to the respective axis interval so that the first and last data point in the chart will not get cropped. Please refer the code snippet below for further reference.  
SfCartesianChart(  
         primaryXAxis: DateTimeAxis(  
                 visibleMinimum: DateTime(2020, 12, 28).add(Duration(hours: -12)),  
                 visibleMaximum: DateTime(2021, 01, 3).add(Duration(hours: 12))  
         )   
) 
 
We have also created a simple chart sample similar to the provided example screenshot in which we have added certain duration in the visible minimum and visible maximum datetime values accordingly to avoid cropping of the first and last data points in the chart. We have also attached the sample below for your reference. 
Screenshot: 
  
 
The sample for reference can be found below. 
  
Please check with the above attached sample and revert us if you still have further concerns. 
  
Regards, 
Sriram Kiran 


Marked as answer
DE Devraj December 30, 2020 10:21 AM UTC

Hi,

Thank U so Much for the quick response. Your solution worked perfectly. I was just wondering that Columns should not be Cropped in a Chart as a Default behaviour. I shouldnt have to add a +/- 12 Hours to the Min / Max Values to see the full Column. Hope it gets updated in future releases. 

Thanks.

DP Dharanitharan Palanisamy Syncfusion Team December 31, 2020 05:14 PM UTC

Hi Devraj,

 

Thanks for your revert. We would like to let you know that your requirement to place the column without getting cropped can be achieved using the date-time category axis and we have already logged a feature request for this, and this will be available in any of our upcoming release yet to come. You can track the status of the feature with below feedback portal.

 

Feedback link: https://www.syncfusion.com/feedback/14083

 

Thanks,

Dharanitharan.P


XA Xavier February 11, 2022 07:14 PM UTC

Same here, quite annoying to have to add extra time to see the last column without cropping.


YG Yuvaraj Gajaraj Syncfusion Team February 14, 2022 05:42 PM UTC

Hi Xavier, 
 
We have analyzed your query and we suggest using the DateTimeCategoryAxis type for showing the column without cropping at the start and end of the axis. In DateTimeCategory axis data can be placed between the ticks, using this you can achieve your requirement without adding extra time at both ends in the x-axis. We have added the DateTimeCategoryAxis UG below for your reference. 
 
 
Regards, 
Yuvaraj. 


Loader.
Up arrow icon