Trackball tooltip customization
Hi.
I want to ask if I can change the color of tooltip's tail. I used trackball behavior, not tooltip behavior, and nearestPoint display Mode. I made my own tooltip using by builder. How can I change that color?
And I have one more to ask.
There are times when the speech bubble goes beyond the bottom of the chart, and at that time, the speech bubble becomes slightly transparent. Therefore, the legend part below overlaps with the tooltip. Is it possible to prevent this or adjust the position of the speech bubble?
Thanks for hel
Hi,
How can I change the arrow color of the trackball tooltip?
To change the arrow color of the trackball tooltip, you can use the color property along with the tooltipSettings property in the TrackballBehavior. Additionally, you can customize the border color, length, and width of the arrow by using the borderColor, arrowLength, and arrowWidth properties along with the tooltipSettings property.
Shared the User Guide Documentation regarding the customization of trackball tooltip for your reference.
UG : https://help.syncfusion.com/flutter/cartesian-charts/trackball-crosshair#trackball.
Is it possible to prevent the tooltip from overlapping with the legend or adjust the position of the speech bubble?
We would like to inform you that there is currently no direct option to render the tooltip on top of the legend when they overlap, and this is the current behavior. However, you can align the position of the trackball tooltip by using the tooltipAlignment property, but only when the tooltipDisplayMode property of the TrackballBehavior is set to TrackballDisplayMode.groupAllPoints.
Alternatively, you can render the tooltip above the legend by implementing a custom widget for the legend and using a stack widget to render the chart above the custom legend widget. We have ensured that when the trackball tooltip overlaps with the legend, the tooltip will always appear on top of the custom legend widget.
Kindly refer the code snippet below :
|
class MainApp extends StatefulWidget { const MainApp({super.key});
@override State<MainApp> createState() => _MainAppState(); }
class _MainAppState extends State<MainApp> { late List<SalesData> _salesData; late TrackballBehavior _trackballBehavior; bool isVisible = true;
@override void initState() { _salesData = [ SalesData(DateTime(2023, 01), 70), SalesData(DateTime(2023, 02), 60), SalesData(DateTime(2023, 03), 20), SalesData(DateTime(2023, 04), 10), SalesData(DateTime(2023, 05), 50), SalesData(DateTime(2023, 06), 10), SalesData(DateTime(2023, 07), 30), SalesData(DateTime(2023, 08), 20), SalesData(DateTime(2023, 09), 40), SalesData(DateTime(2023, 10), 90), SalesData(DateTime(2023, 11), 70), SalesData(DateTime(2023, 12), 30), ];
_trackballBehavior = TrackballBehavior( enable: true, lineWidth: 0, shouldAlwaysShow: true, activationMode: ActivationMode.singleTap, tooltipDisplayMode: TrackballDisplayMode.nearestPoint, tooltipSettings: const InteractiveTooltip( // Customizes the arrow of the trackball tooltip. arrowLength: 8, arrowWidth: 6, color: Colors.blueAccent, borderColor: Colors.blue, ), builder: (context, trackballDetails) { final String formattedText = DateFormat('yyyy MMM') .format(_salesData[trackballDetails.pointIndex!].date); return Container( height: 120, width: 200, decoration: BoxDecoration( borderRadius: BorderRadius.circular(10), border: Border.all( width: 2, color: Colors.blue, ), color: Colors.lightBlueAccent, ), padding: const EdgeInsets.all(10), child: Column( mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.start, children: [ const Center( child: Text( 'Details', style: TextStyle( fontWeight: FontWeight.bold, fontSize: 16, ), ), ), const SizedBox(height: 5), const Divider(thickness: 1, color: Colors.black), const SizedBox(height: 5), Text('Xvalue : $formattedText'), const SizedBox(height: 5), Text( 'Yvalue : ${_salesData[trackballDetails.pointIndex!].sales}', ), ], ), ); }, );
super.initState(); }
@override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, home: Scaffold( body: Stack( alignment: Alignment.bottomCenter, children: [ // Custom legend widget for line series. Padding( padding: const EdgeInsets.only(bottom: 05), child: Container( height: 50, width: 100, decoration: BoxDecoration( border: Border.all( width: 2, color: Colors.black, ), color: Colors.amberAccent.shade100, ), child: Row( mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: [ GestureDetector( onTap: () { setState(() { isVisible = !isVisible; }); }, child: const Icon( Icons.line_axis, color: Colors.red, size: 20, ), ), const Text('Line Series'), ], ), ), ), Column( children: [ SizedBox( height: 600, // Renders the cartesian chart above the custom legend widget. child: SfCartesianChart( primaryXAxis: DateTimeAxis( intervalType: DateTimeIntervalType.months, interval: 1, ), primaryYAxis: NumericAxis(), series: <ChartSeries>[ LineSeries<SalesData, DateTime>( isVisible: isVisible, dataSource: _salesData, xValueMapper: (SalesData sales, _) => sales.date, yValueMapper: (SalesData sales, _) => sales.sales, markerSettings: const MarkerSettings(isVisible: true), color: Colors.red, ), ], trackballBehavior: _trackballBehavior, ), ), ], ), ], ), ), ); } }
class SalesData { final DateTime date; final num sales;
SalesData(this.date, this.sales); } |
Snapshot :
Also attached the workaround sample below for your reference and you can modify the sample according to your needs. If you have further queries, please get back to us.
Regards,
Hari Hara Sudhan. K.
Attachment: 185217_c20b59e7.zip
