How to Achieve Auto-Scrolling Delta in Flutter CartesianChart?

This article explains how to implement an auto-scrolling behavior in a Flutter CartesianChart without utilizing the autoScrollingDelta property in SfCartesianChart. This technique allows for dynamic adjustment of the visible range in a chart, which is used for real-time data visualization applications.

The data is plotted using an SfCartesianChart and uses the DateTimeCategoryAxis to organize and display data points based on their dates. Once the user enters the input for the number of days and selects either the Start or End range, clicking the Apply button triggers the function where the visibleMinimum and visibleMaximum properties of the DateTimeCategoryAxisController are updated dynamically. These properties adjust the visible range of data displayed on the chart.

The following steps outline how to achieve auto-scrolling behavior in Flutter Charts without using the autoScrollingDelta property.

Step 1: Initialize Chart Data

Prepare a list of initial data points to displayed on the chart.

@override
void initState() {
  super.initState();
  _initializeChartData();
}

void _initializeChartData() {
  chartData = [
    ChartData(DateTime(2023, 01, 01), 35),
    ChartData(DateTime(2023, 01, 02), 23),
    ChartData(DateTime(2023, 01, 03), 34),
    ChartData(DateTime(2023, 01, 04), 32),
    ChartData(DateTime(2023, 01, 05), 42),
    ChartData(DateTime(2023, 01, 06), 35),
    ChartData(DateTime(2023, 01, 07), 28),
    ChartData(DateTime(2023, 01, 08), 34),
    ChartData(DateTime(2023, 01, 09), 32),
    ChartData(DateTime(2023, 01, 10), 42),
    ChartData(DateTime(2023, 01, 11), 35),
    ChartData(DateTime(2023, 01, 12), 28),
    ChartData(DateTime(2023, 01, 13), 34),
    ChartData(DateTime(2023, 01, 14), 32),
    ChartData(DateTime(2023, 01, 15), 42),
    ChartData(DateTime(2023, 01, 16), 35),
    ChartData(DateTime(2023, 01, 17), 28),
    ChartData(DateTime(2023, 01, 18), 34),
    ChartData(DateTime(2023, 01, 19), 32),
    ChartData(DateTime(2023, 01, 20), 42),
  ];
}

Step 2: Building the Chart UI

The chart is embedded within an SfCartesianChart, where the primaryXAxis is sets to DateTimeCategoryAxis, which formats the date as day. The onRendererCreated callback in the SfCartesianChart enables programmatic control over the axis after the chart has been rendered. In this case, the callback provides a DateTimeCategoryAxisController object, which is stored in the _xAxisRenderer variable. This controller allows dynamic updates to the axis, such as changing the visible range initialVisibleMinimum and initialVisibleMaximum even after the chart has been displayed.

SfCartesianChart(
  primaryXAxis: DateTimeCategoryAxis(
    dateFormat: DateFormat.d(),
    initialVisibleMinimum: DateTime(2023, 1, 1),
    initialVisibleMaximum: DateTime(2023, 1, 20),
    onRendererCreated: (DateTimeCategoryAxisController controller) {
      _xAxisRenderer = controller;
    },
  ),
  series: <ColumnSeries<ChartData, DateTime>>[
    ColumnSeries<ChartData, DateTime>(
      dataSource: chartData,
      xValueMapper: (ChartData chartData, int index) => chartData.x,
      yValueMapper: (ChartData chartData, int index) => chartData.y,
      animationDuration: 0,
    ),
  ],
)

Step 3: Apply auto-scrolling

1. Custom auto-scrolling-delta: A text input field to enter the number of days for where the charts visible range should be adjusted.

Widget _customAutoScrollingDelta() {
 return SizedBox(
   width: 100,
   child: TextField(
     controller: _textController,
     keyboardType: TextInputType.number,
     decoration: const InputDecoration(
       labelText: 'Enter Days',
     ),
   ),
 );
}

2. Mode of auto-scrolling: A dropdown to choose whether to adjust the range starting from the first day or the last day.

Widget _autoScrollingMode() {
  return DropdownButton<String>(
    value: customAutoScrollingMode,
    onChanged: (String? newValue) {
      setState(() {
        customAutoScrollingMode = newValue!;
      });
    },
    items: <String>['Start', 'End']
        .map<DropdownMenuItem<String>>((String value) {
      return DropdownMenuItem<String>(
        value: value,
        child: Text(value),
      );
    }).toList(),
  );
}

3. Apply auto-scrolling: This button adjusts the visible range of the x-axis based on the selected number of days and based on selected Start or End.

Widget _applyAutoScrolling() {
  return ElevatedButton(
    onPressed: () {
      int days = int.tryParse(_textController.text) ?? 1;
      days = days.clamp(1, chartData.length);
      if (customAutoScrollingMode == 'Start') {
        _xAxisRenderer?.visibleMinimum = chartData[0].x;
        _xAxisRenderer?.visibleMaximum = chartData[days - 1].x;
      } else {
        _xAxisRenderer?.visibleMinimum = chartData[chartData.length - days].x;
        _xAxisRenderer?.visibleMaximum = chartData.last.x;
      }
    },
    child: const Text('Apply'),
  );
}

By following provided code snippet, you can achieve the auto-scrolling delta behavior without using the autoScrollingDelta property in Flutter Chart.

Go through the sample on GitHub.

Conclusion

I hope you enjoyed learning about how to achieve auto-scrolling delta in Flutter CartesianChart.

You can refer to our Flutter CartesianChart feature tour page to know about its other groundbreaking feature representations. You can also explore our 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!