We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to add a vertical line and update it dynamically in the Cartesian charts?

Platform: Flutter |
Control: SfCartesianChart

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: <ChartSeries<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.

Flutter chart vertical line with plot band

View the sample in GitHub

ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile