How to show or hide trackball dynamically in Flutter Cartesian charts (SfCartesianChart) ?
In this article, we described how to show or hide the trackball dynamically in Flutter Cartesian charts.
Flutter Cartesian chart widget provides support for showing or hiding the trackball 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 trackball dynamically such as.
- show
- showByIndex
- hide
Refer the following instructions to use the trackballs public methods to show or hide the trackball dynamically.
Add the following dependencies in the pubspec.yaml file.
dependencies: syncfusion_flutter_charts: ^20.2.46
Then import the following packages in dart file.
import 'package:flutter/material.dart'; import 'package:syncfusion_flutter_charts/charts.dart';
show method
The show method. activates the trackball at the specified location provided by the user.
Step 1: Initialize the SfCartesianChart and TrackballBehavior globally.
late SfCartesianChart chart;
late TrackballBehavior _trackballBehavior;
@override
Void initState(){
_ trackballBehavior = TrackballBehavior(enable: true);
super.initState();
}
@override
Widget build(BuildContext context) {
chart = SfCartesianChart(
trackballBehavior: _trackballBehavior,
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 methods to show the trackball in the required point.
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Column(
children: <Widget>[
TextButton(
child: Text('Show'),
onPressed:() {
_trackballBehavior.show(30, 25);
}
),
Container(child: chart)
]
)
)
);
}
By default, the show method will show the trackball for the specified data points (x and y). If you wish to show the trackball based on the pixel values, then you can pass the optional argument in the show method as pixel. Find the following code to accomplish this.
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Column(
children: <Widget>[
TextButton(
child: Text('Show'),
onPressed:() {
_trackballBehavior.show(100, 100, ‘pixel’);
}
),
Container(child: chart)
]
)
)
);
}
showByIndex method
The showByIndex method, displays the trackball at the specified point index.
Step 1: Initialize the SfCartesianChart and TrackballBehavior globally.
late SfCartesianChart chart;
late TrackballBehavior _trackballBehavior;
@override
Void initState(){
_ trackballBehavior = TrackballBehavior(enable: true);
super.initState();
}
@override
Widget build(BuildContext context) {
chart = SfCartesianChart(
trackballBehavior: _trackballBehavior,
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 methods to show the trackball at the specified point index.
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Column(
children: <Widget>[
TextButton(
child: Text('Show'),
onPressed: (){
_trackballBehavior.showByIndex(3);
},
),
Container(child: chart)
]
)
)
);
}
hide method
The hide method hides the displaying trackball.
Step 1: Initialize the SfCartesianChart and TrackballBehavior globally.
late SfCartesianChart chart;
late TrackballBehavior _trackballBehavior;
@override
Void initState(){
_ trackballBehavior = TrackballBehavior(enable: true);
super.initState();
}
@override
Widget build(BuildContext context) {
chart = SfCartesianChart(
trackballBehavior: _trackballBehavior,
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 methods to hide the trackball.
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Column(
children: <Widget>[
TextButton(
child: Text('Hide'),
onPressed: hide
),
Container(child: chart)
]
)
)
);
}
void hide() {
_trackballBehavior.hide();
}
Screenshots
Show by point
Show by pixel
Show by index
For more information on tooltip public method, find the user guide.
