How to have a vertical line that shows the x value (DateTime) as the mouse hover or keyboard forward and backward key

Question

How to have a vertical line that shows the x value (DateTime) as the mouse hover or keyboard forward and backward key?I am using TrackballBehavior but I want the DateTime value appear at the X-axis.Can be done?

Sriram Kiran Senthilkumar · Answer

Hi Peter, 
  
Greetings from Syncfusion. We have analyzed your scenario at our end and in order to show the x-axis values using the TrackballBehavior feature, you can use the onTrackballPositionChanging callback to format the trackball tooltip to show the x-axis values. For reference, please check the code snippet and screenshot below. 
Code snippet: 




SfCartesianChart( 
            // Trackball behavior callback 
            onTrackballPositionChanging: (TrackballArgs args) { 
              // Formatted the trackball tooltip display label to show x and y values 
              args.chartPointInfo.label = DateFormat.MMMd() 
                      .format(args.chartPointInfo.chartDataPoint!.x) + 
                  ' : ' + 
                  args.chartPointInfo.chartDataPoint!.y.toString(); 
            }, 
            // Trackball behavior 
            trackballBehavior: TrackballBehavior( 
              enable: true, 
            ), 
            //… 
) 

Screenshot: 
  
  
Also, if you want to show the x-axis values in a vertical line on the x-axis you can use the CrosshairBehavior feature available in the SfCartesianChart widget. For reference, please check the code snippet and screenshot below. 
Code Snippet: 





SfCartesianChart( 
            primaryYAxis: NumericAxis( 
              // To disable the tooltip which gets rendered along y-axis 
              interactiveTooltip: InteractiveTooltip( 
                enable: false 
              ) 
            ), 
            crosshairBehavior: CrosshairBehavior( 
              enable: true, 
              // To show only the vertical line of the crosshair. 
              lineType: CrosshairLineType.vertical, 
            ), 
            //… 
)  
 
Screenshot: 
  
  
Sample: https://www.syncfusion.com/downloads/support/forum/168350/ze/f168350_trackballwithxvalue-262594836 
  
Kindly please check with the above sample and revert us if you still have further concerns. 

For further reference on the TrackballBehavior and crosshairBehavior, please refer the user guide links below. 
·        https://help.syncfusion.com/flutter/cartesian-charts/trackball-crosshair 
·        https://help.syncfusion.com/flutter/cartesian-charts/callbacks#ontrackballpositionchanging 
  
Regards, 
Sriram Kiran