How to add a vertical line and update it dynamically in the Cartesian charts?
In this article, we explain how to add a vertical line in the chart that moves to the right as the time of the day passes using the Flutter SfCartesianChart widget.
Our Flutter Cartesian chart has a plotBand property of axis. You can render a vertical line by specifying the plot band start and end value then update the start and end value in a specific period to update the line dynamically.
The following steps explain how to add a vertical line in the SfCartesianChart widget.
Step 1: Declare the _timer, _index, _chartData variable to store the data source of the chart, _start and _end values to draw the vertical line.
late List<ChartData> _chartData; Timer?_timer; int _index = 0; DateTime _start = DateTime.now(); DateTime _end = DateTime.now();
Step 2: In initState(), initialize the _chartData and _timer with the required interval of time, then assign the _start and _end value for updating the plotBand in a specific time duration.
@override
void initState() {
_chartData = updateData(DateTime.now());
_timer = Timer.periodic(const Duration(milliseconds: 1), (_timer) {
_start = _start.add(Duration(minutes: 1));
_end = _end.add(Duration(minutes: 1));
_index++;
setState(() {});
});
super.initState();
}
Step 3: Define the updateData method, which returns the list of data with randomly generated data point.
List<ChartData> updateData(DateTime now) {
late List<ChartData> data = <ChartData>[];
for (int i = 0; i < 12; i++) {
i == 0
? data.add(ChartData(now, _getRandomInt(10, 50)))
: data.add(ChartData(data.last.x.add(const Duration(hours: 1)),
_getRandomInt(10, 50)));
}
return data;
}
// Method to generate random numbers in the given range
int _getRandomInt(int min, int max) {
final Random random = Random();
return min + random.nextInt(max - min);
}
Step 4: Then add the plotBands property to the primaryXAxis and set the start and end values. Here we have used the DateTimeAxis as primaryXAxis, so you need to specify the date time value in the start and end properties.
SfCartesianChart( primaryXAxis: DateTimeAxis(plotBands: <PlotBand>[ PlotBand( start: _start, end: _end, shouldRenderAboveSeries: true, borderWidth: 3, borderColor: Colors.red) ] ), series: <ColumnSeries<ChartData, DateTime>>[ ColumnSeries<ChartData, DateTime>( borderRadius: BorderRadius.circular(3), dataSource: _chartData, xValueMapper: (ChartData data, _) => data.x, yValueMapper: (ChartData data, _) => data.y) ] ) ) ) ); }
Thus, the vertical line moves to the right as the time of the day passes achieved by plot band feature in the chart.
Conclusion
I hope you enjoyed learning about how to add a vertical line and update it dynamically in the Cartesian charts.
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!
