How to display the tooltip always in the first data point in dynamic updates ?
This article explains how to display a tooltip at the first point during dynamic updates of the Flutter cartesian chart.
The SfCartesianChart widget provides an option to show tooltip programmatically using showByIndex method. This allows you to display a tooltip at a specific point. Follow these steps to implement this functionality.
To know more about public methods in the tooltip, refer to our user guide on Cartesian chart methods.
Step 1: Import the necessary packages.
/// To bind the tooltip after updating data source. import 'package:flutter/scheduler.dart'; /// To use the timer which helps to update data source. import 'dart:async'; /// To get the random values to update the data source. import 'dart:math' as math; /// Chart import import 'package:syncfusion_flutter_charts/charts.dart';
Step 2: Initialize the chartData variable which holds the data source for the chart. And initialize the necessary variables timer,_chartSeriesController and dataCount of type Timer, ChartSeriesController and int respectively. These are used to update the chart series dynamically. In timer call the _updateDataSource method which updates the data into the data source dynamically.
In addition to that initialize the _tooltipBehavior variable which determines the rendering of the tooltip for series. Set shouldAlwaysShow property as true in TooltipBehavior to show the tooltip always.
List<ChartData>? chartData;
Timer? timer;
ChartSeriesController? _chartSeriesController;
late int dataCount;
late TooltipBehavior _tooltipBehavior;
@override
void initState() {
chartData = [
ChartData(0, 42),
ChartData(1, 47),
ChartData(2, 33),
ChartData(3, 49),
ChartData(4, 54),
ChartData(5, 41),
ChartData(6, 58),
ChartData(7, 51),
ChartData(8, 98),
ChartData(9, 41),
ChartData(10, 53),
ChartData(11, 72),
ChartData(12, 86),
ChartData(13, 52),
ChartData(14, 94),
ChartData(15, 92),
ChartData(16, 86),
ChartData(17, 72),
ChartData(18, 94)
];
dataCount = chartData!.length;
_tooltipBehavior = TooltipBehavior(
enable: true,
shouldAlwaysShow: true
);
timer = Timer.periodic(const Duration(milliseconds: 2000), (timer) {
_updateDataSource();
});
super.initState();
}
Step 3: Create the SfCartesianChart widget with the LineSeries, assign the chartData to the dataSource property, and initialize the other necessary properties.
Use the onRendererCreated property, set the series controller value to the _chartSeriesController variable.
@override
Widget build {
return SfCartesianChart(
tooltipBehavior: _tooltipBehavior,
series: <LineSeries<ChartData, int>>[
LineSeries<ChartData, int>(
onRendererCreated: (ChartSeriesController controller) {
_chartSeriesController = controller;
},
dataSource: chartData!,
xValueMapper: (ChartData sales, _) => sales.country,
yValueMapper: (ChartData sales, _) => sales.sales,
animationDuration: 0,
)
]
);
}
Step 4: Add new data to the chartData by using getRandomInt() in _updateDataSource method. By passing the currently added point’s index as an argument in updateDataSource method, the newly added points can be rendered. In addPostFrameCallback method, call the showByIndex method by passing series and point indexes as an argument to show the tooltip for the first point after the data source has been updated.
/// Continously updating the data source based on timer.
void _updateDataSource() {
chartData!.add(ChartData(dataCount, _getRandomInt(10, 100)));
if (chartData!.length == 20) {
chartData!.removeAt(0);
_chartSeriesController?.updateDataSource(
addedDataIndexes: <int>[chartData!.length - 1],
removedDataIndexes: <int>[0],
);
} else {
_chartSeriesController?.updateDataSource(
addedDataIndexes: <int>[chartData!.length - 1],
);
}
SchedulerBinding.instance.addPostFrameCallback((_) {
// Here we have shown the tooltip at first point, this can be customized.
_tooltipBehavior.showByIndex(0, 0);
});
dataCount = dataCount + 1;
}
///Get the random data
int _getRandomInt(int min, int max) {
final math.Random random = math.Random();
return min + random.nextInt(max - min);
}
The above code will display the tooltip always at the first data point during dynamic updates in SfCartesianChart.
