1. Home
  2. Forum
  3. Flutter
  4. How to show a vertical line in the chart that follows the cursor?

How to show a vertical line in the chart that follows the cursor?

Platform: Flutter Desktop

(a) I have a sfCartesian Chart with X axis as DateTime.
(b) I want to display a vertical line that follows the user cursor as he move about int the chart.
(c) I want to line not to 'stick' to existing data points but free moving.
(d) Can it also display the current DateTime too? 

Thanks and hope to hear from you soon.


5 Replies
YG Yuvaraj Gajaraj Syncfusion Team November 23, 2021 03:14 PM UTC

Hi Peter, 
 
Greetings from Syncfusion. We have analyzed your query and we would like to let you know that the required scenario can be achieved by crosshairBehavior, it has a lineType property to enable the line in vertical or horizontal and it is not stick to the existing data points and it also have the tooltip at the end of the line that is on the axis, so you can display the current date time. Find the code to accomplish this from below. 
 
crosshairBehavior: CrosshairBehavior ( 
  enable: true,  
  lineType: CrosshairLineType.vertical), 
 
 
// If you want to hide the axis tooltip for the crosshair, disable the tooltip with below code in the respective axis 
 
primaryYAxis: NumericAxis( 
                      interactiveTooltip: 
                          const InteractiveTooltip(enable: false)), 
 
   
You can find the more information on crosshair from below user guide. 
 
We have also attached the sample for your reference. 
 
  
Regards, 
Yuvaraj. 


PE Peter November 24, 2021 08:04 AM UTC

I can't get crosshair to show at all. Even though I set trackBallBehaviour as null.

Is it dependent on other parameters like zoomPanBehaviour, toolTipBehaviour, etc?


YG Yuvaraj Gajaraj Syncfusion Team November 25, 2021 11:32 AM UTC

Hi Peter, 
 
We have analyzed your query and we would like to inform you that selection zooming and crosshair both having the axis tooltip feature, when both features are enabled, the tooltips will get overlapped. To avoid this, we have given priority selection zooming and this is our default behaviour. So, we suggest you set the crosshairBehavior activation mode as ActivationMode.singleTap it will help you to enable crosshair at single tap and selection zooming at the long press because in default selection zooming is enabled at the long press. 
 
crosshairBehavior: CrosshairBehavior( 
    enable: true, 
    lineType: CrosshairLineType.vertical, 
    activationMode: ActivationMode.singleTap), 
 
If you have any further query, please get back to us. 
 
Regards, 
Yuvaraj. 


PE Peter November 26, 2021 04:59 AM UTC

It works now for CrosshairBehavior. Thanks.

But SelectionZooming is not working. Any tips?


SK Sriram Kiran Senthilkumar Syncfusion Team November 29, 2021 04:59 AM UTC

Hi Peter, 

We have analyzed your query at our end, and we tried to replicate the reported issue regarding the selection zooming is not working with crosshair enabled with singleTap activation gesture. Unfortunately, the selection zooming, and crosshair were working fine at our end. To ensure this from our side, we have also attached the screen recording below along with the sample used in testing phase for your reference. So, kindly please check with the attached sample and try to replicate the reported issue with that sample and revert us so that it will be helpful in providing the solutions sooner. 
  
Regards, 
Sriram Kiran 


Loader.
Up arrow icon