How to display trackball tooltip in a fixed position?

[Eduardo Urias]

Hello, I want to display the trackball tooltip for a cartesian chart on a fixed position in my chart, like in the image below, but I cannot find how to do it, I tried using onTrackballPositionChanging and setting trackballArgs.chartPointInfo x and y position to a fixed value but that didn't work, the y value continues to be dynamic, any suggestions?

Thanks

[Dharanitharan Palanisamy]

Hi Eduardo,  

 

Greetings from Syncfusion. We have analyzed your query and your requirement for displaying trackball in the static position can be done by placing the custom widget at the top of the chart. We have attached a sample for your reference and please make use of it. 

 

Step1: Initialize the object trackball of type TrackballBehavior with the required properties. Here, we given the linewidth as 0 to disable track line, and in tooltipSettings property we set false to enable property to disable trackball tooltip. 

trackballBehavior: TrackballBehavior(  

  enable: true,  

  activationMode: ActivationMode.singleTap,  

// To disable the track line.  

  lineWidth: 0,  

  // To disable the trackball tooltip.  

  tooltipSettings: InteractiveTooltip(  

    enable: false  

  )  

),  

  

Step2: Declare the String label with default value and key of type GobalKey to access the custom widget state.   

// String label value with default value  

String label = "High: " + "\n" "Low: " + "\n" "Open: " + "\n" "Close: ";  

// Key for accessing the custom widget state  

GlobalKey<CustomWidgetState> key = GlobalKey<CustomWidgetState>();  

  

Step3: Define the CustomWidget and a refresh method which calls ‘setstate’ of custom widget  

// Creates the custom widget which returns the container which going to acts as static tooltip  

class CustomWidget extends StatefulWidget {  

  CustomWidget({this.key});  

  Key key;  

  @override  

  CustomWidgetState createState() => CustomWidgetState();  

}  

// Method to refresh the custom widget state   

void refresh() {  

  if (mounted) {  

    setState(() {});  

  }  

  }  

  

Step4: Using the onTrackballPositionChanging callback assign the trackball label value to the globally declared variable label and refresh the custom widget state.  

onTrackballPositionChanging: (TrackballArgs args) {  

//Assigning the trackball label value to the label  

  label = args.chartPointInfo.label;  

  // Refreshing the custom widget state.  

   key.currentState.refresh();  

 },  

  

Step5: Finally, place the custom widget in the required positon by using Stack and Positioned widget  

Positioned(  

top: 20,  

 left: 50,  

 // Placed the custom widget.  

 child: CustomWidget(  

   key: key,  

 )  

)  

  

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/f162727-static-trackball1616140121  

 

Screenshot: 

 

 

 

 

Thanks,  

Dharanitharan. P   

  

[Eduardo Urias]

Thank you, that worked great!

[Dharanitharan Palanisamy]

Hi Eduardo, 

 

Most welcome and thanks for your revert. Kindly get in touch with us if you need further assistance. We are always happy in assisting you. 

 

  

Thanks, 

Dharanitharan. P 

[Iyar Avital]

Hi, I need the same thing with a crosshair, there is a way to get the index or any other value from CrosshairRendererArgs?

[Yuvaraj Gajaraj]

Hi Iyar,

We are validating your query at our end and we will update further details in one business day on 14 March 2023. We appreciate your patience until then.

Regards,

Yuvaraj.

[Yuvaraj Gajaraj]

Hi Iyar,

Currently, in the onCrosshairPositionChanging event, you can only able to customize the tooltip value of crosshair only and not able to get the tooltip values. However, you can achieve your requirement with the help of onChartTouchInteractionMove callback, it will give you the offset value of the chart touch using this position you can find the respective x and y point values with the help of the pixelToPoint method and display them in the static position. We have created the sample and shared it below for your reference.

Screenshot:

Regards,

Yuvaraj.

Attachment: f1662727statictrackball_9598d9e6.zip