Articles in this section
Category / Section

How to customize the tooltip using callback events (SfCartesianChart) ?

4 mins read

In this article, we described how to customize the tooltip in Flutter Cartesian Charts by using the callback events.

 

‚ÄčFlutter Cartesian chart widget provides support for customizing the tooltip in the chart using the callback events on rendering. Callback events are callback function or a method, which you pass as an argument into another function or method and can perform an action when you require it. Likewise, the chart widget provides a callback event called onTooltipRender to customize the tooltip contents as required.

Refer the following instructions to customize the tooltip contents using their callback event.

 

Customization of tooltip

 

Step 1: Initialize the SfCartesianChart with TooltipBehavior enabled as true and with all other required properties.

late TooltipBehavior  _tooltipBehavior;
 
@overrride
void initState(){
   _tooltipBehavior = TooltipBehavior(enable: true),
   super.initState();
}
@override
 Widget build(BuildContext context) {
return SfCartesianChart(
                primaryXAxis: CategoryAxis(),
                // Enable tooltip
                tooltipBehavior: _tooltipBehavior,
                series: <LineSeries<SalesData, String>>[
                  LineSeries<SalesData, String>(
                      enableTooltip: true,
                      dataSource: ChartData,
                      xValueMapper: (SalesData sales, _) => sales.year,
                      yValueMapper: (SalesData sales, _) => sales.sales,
                      //Enable datalabel settings
                      dataLabelSettings: DataLabelSettings(isVisible: true)
                  )
                ]
  );
}

 

Step 2: Define the onTooltipRender event in the SfCartesianChart and you can customize the tooltip contents with the arguments such as header, text, pointIndex, seriesIndex, dataPoints, locationX, and locationY.

SfCartesianChart(
onTooltipRender: (TooltipArgs args) {
                if (args.pointIndex == 0) {
                  //Tooltip without header
                  args.header = '';
                }
                if (args.pointIndex == 1) {
                  //Tooltip with customized header
                  args.header = 'Sold';
                }
                if (args.pointIndex == 2) {
                  //Tooltip with X and Y positions of data points
                  args.header = 'x : y';
                  args.text = '${args.locationX!.floor()} : ${args.locationY!.floor()}';
                }
                if(args.pointIndex == 3) {
                  //Tooltip with formatted DateTime values
                  List<dynamic>? chartdata = args.dataPoints;
                  args.header = DateFormat('d MMM yyyy').format(chartdata[3]!.x);
                  args.text = '${chartdata[3].y}';
                }
              }
)

 

Screenshots

 

Tooltip without header

 

Tooltip without header

 

Tooltip with customized header

 

Tooltip with customized header

 

Tooltip with X and Y positions of data points

 

Tooltip with X and Y positions of data points

 

Tooltip with formatted DateTime values

 

Tooltip with formatted Date Time values

 

For more information on tooltip public method, find the user guide.

 

View the sample in GitHub

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please  to leave a comment
Access denied
Access denied