How to Show or Hide Trackball Dynamically in Flutter Cartesiancharts?
In this article, we describe how to show or hide the trackball dynamically in Flutter Cartesian charts.
The Flutter Cartesian chart widget provides support for showing or hiding the trackball dynamically using public methods. Public methods are methods that can be called by using the class object where they are defined. The chart widget has several public methods to show or hide the trackball dynamically such as:
- show
- showByIndex
- hide
Follow these instructions to use the trackball's 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 use the public methods to show the trackball at 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 display the trackball for the specified data points (x and y). If you wish to show the trackball based on pixel values, you can pass the optional argument in the show method as 'pixel':
@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 trackball public methods, refer to the user guide.
View the Github Sample here.
