Custom tooltip behavior
My team is trying to figure out how to create a custom tooltip , we understand that we need to use the trackball behavior and builder property but we can't seem to figure out the missing piece.
we've looked at https://www.syncfusion.com/forums/180113/custom-tooltip --> however this person wants tooltip to open only when double tapped.
our trackball is with hover. Please help
This is what our current tooltip looks like 
This tooltip is what we want.
Hi William Anputra,
Yes, as you mentioned in the query, you can achieve the mentioned requirement, using the builder property in the trackball behavior and to render the trackball on hovering you can use the ActivationMode.singleTap to the activationMode property.
You can use the trackball behavior to customize the trackball line according to your needs and to customize the size and color of the trackball marker, you can use the TrackballMarkerSettings in the markerSettings property.
To render the tooltip based on your requirement, you can use the builder property in the trackball behavior and we suspect that you are using the tooltipDisplayMode as TrackballDisplayMode.groupAllPoints, and for that mode, the arrow for the trackball tooltip will not be rendered as it is the current behavior of SfCartesianChart. We suggest you use other tooltipDisplayMode to show the arrow of the trackball tooltip, and the size and color of the arrow can be customized using the InteractiveTooltip in the tooltipSettings property.
Kindly refer the code snippet below:
|
class _MainAppState extends State<MainApp> { late List<ChartSampleData> _data; late TrackballBehavior _trackballBehavior;
@override void initState() { _data = [ ChartSampleData(01, 40), ChartSampleData(02, 80), ChartSampleData(03, 40), ChartSampleData(04, 60), ChartSampleData(05, 50), ChartSampleData(06, 90), ChartSampleData(07, 110), ChartSampleData(08, 70), ChartSampleData(09, 120), ChartSampleData(10, 100), ];
_trackballBehavior = TrackballBehavior( enable: true, activationMode: ActivationMode.singleTap, markerSettings: TrackballMarkerSettings( markerVisibility: TrackballVisibilityMode.visible, color: Colors.green.shade500.withOpacity(0.5), borderWidth: 0, width: 20, height: 20, ), tooltipSettings: InteractiveTooltip( enable: true, arrowWidth: 15, borderWidth: 1.5, color: Colors.amber.shade100.withOpacity(0.30), borderColor: Colors.green, ), builder: (BuildContext context, TrackballDetails trackballDetails) { return Container( height: 100, width: 200, decoration: BoxDecoration( color: Colors.amber.shade100.withOpacity(0.30), border: Border.all( color: Colors.green, width: 1, ), ), child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Text( 'xValue => ${_data[trackballDetails.pointIndex!].x.toString()}', ), Text( 'yValue => ${_data[trackballDetails.pointIndex!].y.toString()}', ), ], ), ); }, );
super.initState(); }
@override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, home: Scaffold( body: Stack( children: [ SfCartesianChart( primaryXAxis: NumericAxis(), primaryYAxis: NumericAxis(), series: <CartesianSeries<ChartSampleData, num>>[ LineSeries<ChartSampleData, num>( dataSource: _data, xValueMapper: (ChartSampleData sales, int index) => sales.x, yValueMapper: (ChartSampleData sales, int index) => sales.y, ), ], trackballBehavior: _trackballBehavior, ), ], ), ), ); } } |
Snapshot:
Also attached the sample below and you can modify the sample based on your requirement. If you have further queries, please get back to us.
Regards,
Hari Hara Sudhan. K.
Attachment: 183902_18cf5bbe.zip
Hi William Anputra,
To achieve the mentioned requirement, you can add the volume field to your data model and assign it with the required data. You can then display it inside the tooltip using the trackballDetails.pointIndex in the builder property, as shown in the snippet below.
|
class _MainAppState extends State<MainApp> { late List<ChartSampleData> _data; late TrackballBehavior _trackballBehavior;
@override void initState() { _data = [ ChartSampleData(x: 01, y: 40, price: '30,3463', volume: '10,329,354'), ChartSampleData(x: 02, y: 80, price: '30,3035', volume: '10,353,643'), ChartSampleData(x: 03, y: 40, price: '31,3343', volume: '10,853,346'), ChartSampleData(x: 04, y: 60, price: '30,9043', volume: '11,643,654'), ChartSampleData(x: 05, y: 50, price: '32,3453', volume: '13,862,785'), ChartSampleData(x: 06, y: 90, price: '36,6543', volume: '10,932,983'), ChartSampleData(x: 07, y: 110, price: '38,3230', volume: '19,294,743'), ChartSampleData(x: 08, y: 70, price: '30,9903', volume: '14,379,514'), ChartSampleData(x: 09, y: 120, price: '31,9386', volume: '11,339,324'), ChartSampleData(x: 10, y: 100, price: '36,4630', volume: '18,749,434'), ];
_trackballBehavior = TrackballBehavior( enable: true, activationMode: ActivationMode.singleTap, markerSettings: TrackballMarkerSettings( markerVisibility: TrackballVisibilityMode.visible, color: Colors.green.shade500.withOpacity(0.5), borderWidth: 0, width: 20, height: 20, ), tooltipSettings: InteractiveTooltip( enable: true, arrowWidth: 15, borderWidth: 1.5, color: Colors.amber.shade100.withOpacity(0.30), borderColor: Colors.green, ), builder: (BuildContext context, TrackballDetails trackballDetails) { DateTime now = DateTime.now(); String desiredFormat = "EEE d MMMM y, HH:mm:ss"; String formattedDateTime = DateFormat(desiredFormat).format(now);
return Container( height: 100, width: 250, padding: const EdgeInsets.all(10), decoration: BoxDecoration( color: Colors.amber.shade100.withOpacity(0.30), border: Border.all( color: Colors.green, width: 1, ), ), child: Column( mainAxisAlignment: MainAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start, children: [ Text( formattedDateTime, style: const TextStyle( fontWeight: FontWeight.bold, ), ), const SizedBox( height: 10, ), Row( children: [ const Text( 'Price: ', style: TextStyle( fontWeight: FontWeight.bold, fontSize: 14, ), ), Text( '\$${_data[trackballDetails.pointIndex!].price}', ), ], ), Row( children: [ const Text( 'Volume: ', style: TextStyle( fontWeight: FontWeight.bold, fontSize: 14, ), ), Text( '\$${_data[trackballDetails.pointIndex!].volume}', ), ], ), ], ), ); }, );
super.initState(); }
@override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, home: Scaffold( body: Stack( children: [ SfCartesianChart( primaryXAxis: NumericAxis(), primaryYAxis: NumericAxis(), series: <CartesianSeries<ChartSampleData, num>>[ LineSeries<ChartSampleData, num>( dataSource: _data, xValueMapper: (ChartSampleData sales, int index) => sales.x, yValueMapper: (ChartSampleData sales, int index) => sales.y, ), ], trackballBehavior: _trackballBehavior, ), ], ), ), ); } } |
Snapshot:
Also attached the sample below for your reference and if you have any queries, please get back to us.
Regards,
Hari Hara Sudhan. K.
Attachment: _183902_e4fc4bff.zip
