How to show or hide the tooltip dynamically in Flutter Cartesian charts (SfCartesianChart) ?
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 by index
Show by pixel
For more information on tooltip public method, find the user guide.
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 forums, Direct-Trac, or feedback portal. We are always happy to assist you!
