How to perform an action on swiping in Flutter CartesianChart ?

Flutter CartesianChart supports performing actions while swiping the plot area using the onPlotAreaSwipe callback in the chart. This feature allows you to execute specific actions based on the swipe direction. In this article, we'll demonstrate how to add data points when swiping the plot area towards the end. For more detailed information, refer to our help document.

The following steps explain how to add data while swiping in the chart area.

Step 1: Declare the series controller and chart data as shown in the following code sample.

ChartSeriesController? seriesController;
late List<ChartSampleData> chartData;

Step 2: Define the chart data with the initial data in the initState as follows.

// Defining the initial data for the chart data source.
chartData = <ChartSampleData>[
  ChartSampleData(xValue: 0, y: 326),
  ChartSampleData(xValue: 1, y: 416),
  ChartSampleData(xValue: 2, y: 290),
  ChartSampleData(xValue: 3, y: 70),
  ChartSampleData(xValue: 4, y: 500),
  ChartSampleData(xValue: 5, y: 416),
  ChartSampleData(xValue: 6, y: 290),
  ChartSampleData(xValue: 7, y: 120),
  ChartSampleData(xValue: 8, y: 500),
];

Step 3: Define the required type of series with the required properties and assign the controller from the onRendererCreated callback to the series controller.

 SplineSeries<ChartSampleData, num>(
  dataSource: chartData,
  color: const Color.fromRGBO(75, 135, 185, 0.6),
  xValueMapper: (ChartSampleData sales, _) => sales.xValue,
  yValueMapper: (ChartSampleData sales, _) => sales.y,
//Assigining controller to the seriesController
  onRendererCreated: (ChartSeriesController controller) {
    seriesController = controller;
  },
)

Step 4: Define the SfCartesianChart with the required properties and assign the performSwipe method to the onPlotAreaSwipe callback as follows.

SfCartesianChart(
// Assigning the performSwipe method to the onPlotAreaSwipe callback
  onPlotAreaSwipe: (ChartSwipeDirection direction) =>
    performSwipe(direction),
)

Step 5: Define the performSwipe method as shown in the following code sample.

 void performSwipe(ChartSwipeDirection direction) {
  if (direction == ChartSwipeDirection.end) {
 // Adding new data when swiping to the end of the plot area.
    chartData.add(ChartSampleData(
      xValue: chartData[chartData.length - 1].xValue + 1,
      y: getRandomInt(50, 600)));
    if (seriesController != null)
// Updating the chart with the newly added data.
      seriesController!
        .updateDataSource(addedDataIndexes: <int>[chartData.length - 1]);
  }
}

With these steps, you can add data points while swiping the chart area using the SfCartesianChart widget.

Conclusion

I hope you enjoyed learning about how to add data while swiping in the Flutter Cartesian chart.

You can refer to our Flutter Cartesian Chart page to learn about its other groundbreaking feature representations and 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!