How to synchronize trackball in multiple Flutter SfCartesianChart ?
In this article, we described how to synchronize the trackball in multiple charts.
The following steps explains how to synchronize the trackball in multiple charts
Step 1: Define two TrackballBehavior variables with the required properties globally for the first and second charts respectively to use the public methods of trackball.
// Trackball behavior for first chart
late TrackballBehavior _trackballBehavior1;
// Trackball behavior for second chart
late TrackballBehavior _trackballBehavior2;
@override
void initState(){
_trackballBehavior1 =
TrackballBehavior(enable: true, activationMode: ActivationMode.singleTap);
_trackballBehavior2 =
TrackballBehavior(enable: true, activationMode: ActivationMode.singleTap);
super.initState();
}
Step 2: Initialize a Cartesian chart (First chart) as an individual StatefulWidget with all the necessary properties and also set the globally defined trackball behavior variable (trackBall1) of the first chart in the trackballBehavior property available in the chart.
class FirstChart extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return FirstChartState();
}
}
class FirstChartState extends State<FirstChart> {
@override
Widget build(BuildContext context) {
return SfCartesianChart(
primaryXAxis: CategoryAxis(),
title: ChartTitle(text: 'Chart 1'),
trackballBehavior: _trackballBehavior1, // Trackball behavior variable of the first chart.
series: <LineSeries<SalesData, String>>[
LineSeries<SalesData, String>(
dataSource: chartData,
xValueMapper: (SalesData sales, _) => sales.year,
yValueMapper: (SalesData sales, _) => sales.sales)
]);
}
}
Step 3: Initialize another Cartesian chart (Second chart) as an individual StatefulWidget with all the necessary properties and also set the globally defined trackball behavior variable (trackBall2) of the second chart in the trackballBehavior property available in the chart.
class SecondChart extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return SecondChartState();
}
}
class SecondChartState extends State<SecondChart> {
@override
Widget build(BuildContext context) {
return SfCartesianChart(
primaryXAxis: CategoryAxis(),
title: ChartTitle(text: 'Chart 2'),
trackballBehavior: _trackballBehavior2, // Trackball behavior of second chart.
series: <LineSeries<SalesData, String>>[
LineSeries<SalesData, String>(
dataSource: chartData,
xValueMapper: (SalesData sales, _) => sales.year,
yValueMapper: (SalesData sales, _) => sales.sales)
]);
}
}
Step 4: The synchronization of trackball can be done with the help of the onChartTouchInteractionMove callback event and the trackball’s show public method is available in the chart.
In the first chart, with the help of the pixel position arguments are obtained from the onChartTouchInteractionMove event on user interaction, call the trackball show method for the second chart with the obtained pixel position arguments (dx and dy) as the parameters.
class SecondChartState extends State<SecondChart> {
@override
Widget build(BuildContext context) {
return SfCartesianChart(
trackballBehavior: _trackballBehavior1, // Trackball behavior variable of the first chart.
onChartTouchInteractionMove: (ChartTouchInteractionArgs args) {
// Called the second chart’s trackball show method with pixel position arguments as parameters
_trackballBehavior2.show(args.position.dx, args.position.dy, 'pixel');
},
// Other configurations
)
}
}
Similarly, in the second chart, call the trackball show method for the first chart with the obtained pixel position arguments (dx and dy) from the onChartTouchInteractionMove as the parameters.
class SecondChartState extends State<SecondChart> {
@override
Widget build(BuildContext context) {
return SfCartesianChart(
trackballBehavior: _trackballBehavior2, // Trackball behavior of second chart.
onChartTouchInteractionMove: (ChartTouchInteractionArgs args) {
// Called the First chart’s trackball show method with pixel positional arguments as parameters
_trackballBehavior1.show(args.position.dx, args.position.dy, 'pixel');
},
// Other configurations
)
}
}
Thus, the trackballs can be synchronized in the multiple charts.
Screenshot
Conclusion
I hope you enjoyed learning about how to synchronize trackball in multiple charts (SfCartesianChart).
You can refer to our Flutter CartesianChart feature tour page to know about its other groundbreaking feature representations. You can also explore our Flutter CartesianChart 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!
