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;
void initState(){
   _tooltipBehavior = TooltipBehavior(enable: true),
 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.

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}';




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?
Help us improve this page
Please provide feedback or comments
Comments (0)
Please  to leave a comment
Access denied
Access denied