1. Home
  2. Forum
  3. WinForms
  4. Gridline distance & x-axes too crowded

Gridline distance & x-axes too crowded

Hello Team.

I am using the Syncfusion Community license and would request for help  on getting clarification of 2 points.


From the above picture,

1. How do we control the distance between the grid lines, in both X and Y axes. Option to hide the grid line is possible but not the distance between them.

2. Looking at the X-values which are dates, one can see that its too crowded. Is there a way to display either weekly or monthly dates only?

Thanks and Regards

Senthil

3 Replies
SK Sanjith Kesavan Syncfusion Team December 11, 2018 01:22 PM UTC

Hi Senthil, 
  
Greetings from Syncfusion, 
  
Please find the below response for your queries. 
  
Query 1: . How do we control the distance between the grid lines, in both X and Y axes. Option to hide the grid line is possible but not the distance between them 
  
By default, grid lines are rendered based on the axis range interval. If you want to do space between the axis, you can change the axis range interval. 
  
Please find the below code snippet to achieve this requirement, 
// Date time axis 
chart.PrimaryXAxis.DateTimeRange = new ChartDateTimeRange( 
                new DateTime(2007, 8, 1), // min 
                new DateTime(2010, 10, 1), // max 
                5,  // interval 
                ChartDateTimeIntervalType.Months // interval types 
); 
// Numeric axis 
chart.PrimaryYAxis.Range.Interval = 4000; 
  
  
Query 2: Looking at the X-values which are dates, one can see that its too crowded. Is there a way to display either weekly or monthly dates only? 
  
Interval for date time axis gets calculated by IntervalType property. Those interval types are, 
  1. Years,
  2. Months,
  3. Weeks,
  4. Days,
  5. Hours,
  6. Minutes,
  7. Seconds,
  8. Milliseconds.
  
Default value IntervalTypes is “Auto”.  So, you can set intervalType as Months or Weeks to display only weekly or monthly dates. 
  
For more information of axis range and intervals, kindly find the below documentation link, 
  
Please find the below code snippet to achieve this requirement, 
  
IntervalType as Months: 
  
chart.PrimaryXAxis.DateTimeRange = new ChartDateTimeRange( 
                new DateTime(2007, 8, 1), // min 
                new DateTime(2010, 10, 1), // max 
                3,  // interval 
                ChartDateTimeIntervalType.Months // interval types 
); 
  
  
 
  
  
IntervalType as Weeks: 
  
chart.PrimaryXAxis.DateTimeRange = new ChartDateTimeRange( 
                new DateTime(2007, 8, 1), // min 
                new DateTime(2010, 10, 1), // max 
                10,  // interval 
                ChartDateTimeIntervalType.Weeks // interval types 
); 
  
 
  
Sample for your reference, can be found from below link, 
  
Kindly revert us, if you have any concerns. 
  
Regards, 
Baby. 


SK senthil kumar December 13, 2018 02:08 PM UTC

Hi

I tried your approach and adapted the code to accommodate the data from a sql server table. However, still I have some issues.

1. If the Me.sfChart.Indexed = True, then the graph looks like


which is not desired. Even if one sets the
     Me.sfChart.PrimaryXAxis.IntervalType = ChartDateTimeIntervalType.Weeks
     Me.sfChart.PrimaryXAxis.LabelRotate = True
      Me.sfChart.PrimaryXAxis.LabelRotateAngle = 45
    

they fail to work.

2. If the Me.sfChart.Indexed = False is set then the graph looks like


which is nice but again, there a lot of empty spaces on the left and right of the actual graph. Also, the code

  Me.sfChart.PrimaryXAxis.LabelRotate = True
      Me.sfChart.PrimaryXAxis.LabelRotateAngle = 45

has no effect.

The question is 

a. How to use the combination of Indexed = True and achieve like in Pt.2.
b. When starting the program, one would not know the Min and Max value of the date range and hence this could not be set initially.
c. The date appears long date despite mentioning the format as "dd-MM-yyyy"

The program is in VB.Net and attached the project.


Attachment: SyncChart_76f17fce.rar

MK Muneesh Kumar G Syncfusion Team December 14, 2018 11:52 AM UTC

Hi Senthil, 
 
Please find the below response for your queries. 
 
Query 1: How to use the combination of Indexed = True and achieve like in Pt.2. 
 
We would like to inform you that we have provided IsIndexed support only for the category axis. For date time axis, you have set this property as false.   
 
And we have found in your application you have set LabelIntersectAction as MultiplRows and labelRotate for axis.  
 
While setting LabelIntersectAction and labelRotate in axis, LabelIntersectAction is the priority for axis, this is our actual behavior. So that the labelRotate has no effect in axis.  
 
If you like to show the axis label with rotate, please set this property only axis.  
 
Query 2: When starting the program, one would not know the Min and Max value of the date range and hence this could not be set initially. 
 
We have analyzed your query. You can resolve this problem by using already calculated range values with custom interval as per the below code snippet.  
 
Code snippet 
chart.PrimaryXAxis.DateTimeRange = new ChartDateTimeRange( 
                chart.PrimaryXAxis.DateTimeRange.Start, // min 
                chart.PrimaryXAxis.DateTimeRange.End, // max 
                3,  // interval 
                ChartDateTimeIntervalType.Months // interval types 
); 
 
 
Query 3: The date appears long date despite mentioning the format as "dd-MM-yyyy" 
 
We have found in your sample, you have used dd-MM-yyyy for Format property in x axis. We would like to inform you that Format property is only for numeric axis. For date time axis, DateTimeFormat property is available to set format. 
 
Please find the below code snippet to achieve this requirement, 
 
 
chart.PrimaryXAxis.DateTimeFormat = "dd-MM-yyyy"; 
 
 
Screenshot: 
 
 
Sample for your reference, can be found from below link, 
 
Please let us know if you have any queries.  
 
Regards, 
Muneesh Kumar G. 


Loader.
Up arrow icon