Tooltip not showing data
Hello,
I have implemented tooltip in piechart of SfCircularChart but the tooltip has not showed the data. Could you please advice?
late TooltipBehavior _tooltipBehaviorCaseContribution;
@override
void initState() {
super.initState();
_tooltipBehaviorCaseContribution = TooltipBehavior(
enable: true,
format: 'data.country: data.value',
borderColor: Colors.red,
borderWidth: 5,
color: Colors.white);
}
Regards
Sao
Hi Sao,
Based on the provided snapshot and code snippet, we suspect that text given to the format property is not valid or the color of the text might also be in black. As a result, it may appear that the tooltip is not showing the data properly. However, we have achieved your mentioned requirement by customizing the borderColor, borderWidth, color of the tooltip and formatted the text using the format property of the TooltipBehavior. Also, shared the User Guide Documentation regarding the tooltip for your reference.
UG : https://help.syncfusion.com/flutter/circular-charts/tooltip.
Kindly refer the code snippet below :
|
class MyApp extends StatelessWidget { const MyApp({super.key});
@override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, theme: ThemeData( colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple), useMaterial3: true, ), home: const MyHomePage(), ); } }
class MyHomePage extends StatefulWidget { const MyHomePage({super.key});
@override State<MyHomePage> createState() => _MyHomePageState(); }
class _MyHomePageState extends State<MyHomePage> { late List<ChartSampleData> _chartData; late TooltipBehavior _tooltipBehavior;
@override void initState() { _chartData = <ChartSampleData>[ ChartSampleData('India', 83.2, Colors.blue), ChartSampleData('America', 14.5, Colors.orange), ChartSampleData('London', 0.3, Colors.red), ChartSampleData('Japan', 1.2, Colors.green), ChartSampleData('China', 0.6, Colors.pink), ]; _tooltipBehavior = TooltipBehavior( enable: true, activationMode: ActivationMode.singleTap, format: 'point.x : point.y%', borderColor: Colors.red, borderWidth: 5, color: Colors.black, shouldAlwaysShow: true, textStyle: const TextStyle( color: Colors.white, fontSize: 14, fontWeight: FontWeight.bold, ), ); super.initState(); }
@override Widget build(BuildContext context) { return Scaffold( body: SfCircularChart( series: <CircularSeries<ChartSampleData, String>>[ PieSeries<ChartSampleData, String>( dataSource: _chartData, xValueMapper: (ChartSampleData data, _) => data.x, yValueMapper: (ChartSampleData data, _) => data.y, dataLabelSettings: const DataLabelSettings( isVisible: true, textStyle: TextStyle( fontSize: 14, fontWeight: FontWeight.bold, ), ), dataLabelMapper: (ChartSampleData data, _) => '${data.y}%', pointColorMapper: (ChartSampleData data, _) => data.color, ), ], tooltipBehavior: _tooltipBehavior, ), ); } }
class ChartSampleData { final String x; final num y; final Color color;
ChartSampleData( this.x, this.y, this.color, ); } |
Snapshot :
You can modify the above shared code snippet according to your needs and if you have further queries, please get back to us.
Regards,
Hari Hara Sudhan. K.
