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

How to align the SfDateTimeRangeNavigator axis with the underlying chart's primary axis?

I can't find a way to align the SfDateTimeRangeNavigator axis with the underlying chart's primary axis.




Without alignment you can't actually visually 'bin' data represented on the underlying graph.
Below it looks visually that I've selected a range to encompass the data point, but in fact the SfDateTimeRangeNavigator's range does not.



11 Replies

DA Devi Aruna Maharasi Murugan Syncfusion Team December 9, 2016 12:48 PM UTC

Hi Alan, 

  

Thanks for contacting Syncfusion Support. 

  

We would like to inform you that the SfDateTimeRangeNavigator lower label bar’s labels does not rendered based on the chart axis (content of SfDateTimeRangeNavigator). So, the alignment between its lower label bar and the chart axis(its content) gets differ.  

We suggest you to collapse the visibility of chart axis ,while placing chart as the content of SfDateTimeRangeNavigator. Since we can see the content range in lower label bar.  However, if your requirement is to align the chart axis with the lower label bar, then we can align both , by adjusting the position of chart axis. We have prepared a demo sample based on your requirement and it can be downloaded from below link, 

  

Sample: DateTimeRangeNavigatorAlignment 

  

Regards, 

Devi 


AL Alan L December 9, 2016 01:08 PM UTC

The chart axis is normally collapsed.  I just had it turned on in the example to illustrate the axis do not line up.

In the example you sent I moved the range navigator thumbs to select 8:01 -> 12:00 but the chart axis (and data within) appears to have the time period 4:00 to 8:00 selected.
The range navigator appears, visually, to include the data between the thumbs, but in reality the thumbs are not aligned to the chart axis and data selected is not what you see.





AL Alan L December 12, 2016 02:56 PM UTC

I think thread 127811 is the root of my problem - using CategoryAxis instead of NumericalAxis.


AL Alan L December 12, 2016 04:05 PM UTC

Nope, still can't get them to align.


SS Sheik Syed Abthaheer M Syncfusion Team December 13, 2016 12:46 PM UTC

Hi Alan, 
  
Thanks for your update. 
  
As we informed in our previous update, the SfDateTimeRangeNavigator lower label bar’s labels do not render based on the chart axis (content of SfDateTimeRangeNavigator). So, the alignment between its lower label bar and the chart axis (its content) gets differ. 
  
Regards, 
Devi 



AL Alan L December 13, 2016 12:53 PM UTC

Are you saying that a control to visually select data from the underlying chart is not visually aligned?
ie. data points that appear visually to fall within the SfDateTimeRangeNavigato's thumb range may not be selected?


DA Devi Aruna Maharasi Murugan Syncfusion Team December 14, 2016 01:19 PM UTC

Hi Alan, 
  
Thanks for your update. 
  
We have analyzed the reported problem.As , the range navigator is not aligned visually with its content(underlying chart).We have considered this as feature enhancement and it will be available in our Volume 1,2017 main release which is estimated to be available on mid of Febraury 2017. 
  
Regards, 
Devi
 



AL Alan L December 15, 2016 12:51 PM UTC

Great - thanks again.
Alan


DA Devi Aruna Maharasi Murugan Syncfusion Team December 16, 2016 03:33 AM UTC

Hi Alan, 
  
Thanks for your update. 
  
Please let us know, if you need any further assistance. 
  
Regards, 
Devi 



DA Devi Aruna Maharasi Murugan Syncfusion Team December 16, 2016 09:59 AM UTC

Hi Alan, 
  
Sorry for the inconvenience caused. 
  
We are able to align the selected data of SfDateTimeRangeNavigator and its content by setting the RangePadding property of SfDateTimeRangeNavigator as None.The default value of RangePadding property is Round. So, the DateTimeRangeNavigator will round off the input date .(i.e 1/12/2015 11:50 PM -> 2/12/2015 12:00 AM). Due to this, the selected data of datetime range navigator and its content(chart) gets differ.The RangePadding property can be set as below code snippet, 
  
<chart:SfDateTimeRangeNavigator RangePadding="None"> 
  
We have prepared the demo sample and it can be downloaded from below link, 
  
Sample : RangeNavigatorRangePadding 
  
Regards, 
Devi


 



DA Devi Aruna Maharasi Murugan Syncfusion Team December 16, 2016 10:06 AM UTC

Hi Alan, 
  
Sorry for the inconvenience caused. 
  
We are able to align the selected data of SfDateTimeRangeNavigator and its content by setting the RangePadding property of SfDateTimeRangeNavigator as None.The default value of RangePadding property is Round. So, the DateTimeRangeNavigator will round off the input date .(i.e 1/12/2015 11:50 PM -> 2/12/2015 12:00 AM). Due to this, the selected data of datetime range navigator and its content(chart) gets differ.The RangePadding property can be set as below code snippet, 
  
<chart:SfDateTimeRangeNavigator RangePadding="None"> 
  
We have prepared the demo sample and it can be downloaded from below link, 
  
Sample : RangeNavigatorRangePadding 
  
Regards, 
Devi


 


SIGN IN To post a reply.
Loader.
Live Chat Icon For mobile
Up arrow icon