Articles in this section
Category / Section

How to show or hide the tooltip dynamically in Flutter Cartesian charts (SfCartesianChart) ?

3 mins read

‚ÄčIn this article, we described how to show or hide the tooltip dynamically in Flutter Cartesian charts.

 

 

https://help.syncfusion.com/flutter/cartesian-charts/overview widget provides support for showing or hiding the tooltip dynamically using the public methods. Public methods are methods that can be called by using the class object where they are defined. Likewise, chart widget also has some public methods to show or hide the tooltip dynamically such as.

 

  • show
  • showByIndex
  • showByPixel
  • hide

 

Refer the following instructions to use the tooltips public methods to show or hide the tooltip dynamically.

 

show method

 

The show method, activates the tooltip at the specified location provided by the user.

 

Step 1: Initialize the SfCartesianChart and TooltipBehavior globally.

 

late SfCartesianChart chart;
late TooltipBehavior  _tooltipBehavior;
 
@override
void initState(){
    _tooltipBehavior = TooltipBehavior(enable: true);
    super.initState();
}
 
@override
Widget build(BuildContext context) {
  chart = SfCartesianChart(
     tooltipBehavior: _tooltipBehavior,
     series: <CartesianSeries>[
      ColumnSeries<ChartData, double>(
        enableTooltip: true,
        dataSource: chartData,
        xValueMapper: (ChartData data, _) => data.x,
        yValueMapper: (ChartData data, _) => data.y)
    ]
 );
}

 

Step 2: Initialize the button and chart in the build method and in the button click event, you can initialize the public method to show the tooltip in the required point.

 

@override
Widget build(BuildContext context) {
return Scaffold(
  body: Center(
    child: Column(
      children: <Widget>[
        TextButton(
          child: Text('Show'),
          onPressed: show
        ),
        Container(child: chart)
      ]
    )
  )
);
 
void show() {
    // In the show method, you can pass the x and y values 
    _tooltipBehavior.show(10, 17);
}
 

 

showByIndex method

 

The showByIndex method, displays the tooltip at the specified series and point index.

 

Step 1: Initialize the SfCartesianChart and TooltipBehavior globally.

 

late SfCartesianChart chart;
late TooltipBehavior  _tooltipBehavior;
 
@override
void initState(){
    _tooltipBehavior = TooltipBehavior(enable: true);
    super.initState();
}
 
@override
Widget build(BuildContext context) {
  chart = SfCartesianChart(
     tooltipBehavior: _tooltipBehavior,
     series: <CartesianSeries>[
      ColumnSeries<ChartData, double>(
        enableTooltip: true,
        dataSource: chartData,
        xValueMapper: (ChartData data, _) => data.x,
        yValueMapper: (ChartData data, _) => data.y)
    ]
 );
}

 

Step 2: Initialize a button and chart in the build method and in the button click event, you can initialize the showByIndex public method to show the tooltip at the specified point and series index.

 

@override
Widget build(BuildContext context) {
 return Scaffold(
  body: Center(
    child: Column(
      children: <Widget>[
        TextButton(
          child: Text('Show'),
          onPressed:(){
               _tooltipBehavior.showByIndex(0,1);
          }
        ),
        Container(child: chart)
      ]
    )
  )
 );
}

 

 

showByPixel method

 

The showByPixel method, displays the tooltip at the specified x and y positions. The arguments x and y are the logical pixel values to position the tooltip, respectively.

 

Step 1: Initialize the SfCartesianChart and TooltipBehavior globally.

 

SfCartesianChart chart;
TooltipBehavior  _tooltipBehavior;
 
@override
void initState(){
    _tooltipBehavior = TooltipBehavior(enable: true);
    super.initState();
}
 
@override
Widget build(BuildContext context) {
  chart = SfCartesianChart(
     tooltipBehavior: _tooltipBehavior,
     series: <CartesianSeries>[
      ColumnSeries<ChartData, double>(
        enableTooltip: true,
        dataSource: chartData,
        xValueMapper: (ChartData data, _) => data.x,
        yValueMapper: (ChartData data, _) => data.y)
    ]
 );
}

 

Step 2: Initialize a button and chart in the build method and in the button click event, you can initialize the showByPixel public method to show the tooltip at the specified locations.

 

 

@override
Widget build(BuildContext context) {
 return Scaffold(
  body: Center(
    child: Column(
      children: <Widget>[
        TextButton(
          child: Text('Show'),
          onPressed:(){
            _tooltipBehavior.showByPixel(180.0, 100.0);
          }
        ),
        Container(child: chart)
      ]
    )
  )
 );
}

 

hide method

 

The hide method hides the displaying tooltip.

 

Step 1: Initialize the SfCartesianChart and TooltipBehavior globally.

 

late SfCartesianChart chart;
late TooltipBehavior  _tooltipBehavior;
 
@override
void initState(){
    _tooltipBehavior = TooltipBehavior(enable: true);
    super.initState();
}
 
@override
Widget build(BuildContext context) {
  chart = SfCartesianChart(
     tooltipBehavior: _tooltipBehavior,
     series: <CartesianSeries>[
      ColumnSeries<ChartData, double>(
        enableTooltip: true,
        dataSource: chartData,
        xValueMapper: (ChartData data, _) => data.x,
        yValueMapper: (ChartData data, _) => data.y)
    ]
 );
}

 

Step 2: Initialize a button and chart in the build method and in the button click event, you can initialize the hide public method to hide the tooltip.

 

@override
Widget build(BuildContext context) {
 return Scaffold(
  body: Center(
    child: Column(
      children: <Widget>[
        TextButton(
          child: Text('Hide'),
          onPressed: hide
        ),
        Container(child: chart)
      ]
    )
  )
 );
}
 
void hide(){
    _tooltipBehavior.hide();
}

 

Screenshots

 

Show by point

 

     show

 

 

Show by index

showByIndex

 

 

Show by pixel

showByPixel

 

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

 

 

View the sample in GitHub

 

Conclusion

I hope you enjoyed learning about how to show or hide the tooltip dynamically in Flutter Cartesian charts (SfCartesianChart).

You can refer to our Flutter Cartesian Chart feature tour page to know about its other groundbreaking feature representations. You can also explore our documentation to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forumsDirect-Trac, or feedback portal. We are always happy to assist you!

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