How to perform an action on swiping over the cartesian chart (SfCartesianChart) ?
SfCartesianChart has support to act while swiping the plot area using the onPlotAreaSwipe callback in the chart. By using this, you can perform the required actions based on the swipe direction from this callback. Here, we have added the data points, while swiping the plot area towards the end. For more information, refer to this 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]);
}
}
Thus, the data point is added, while swiping in the chart area using the SfCartesianChart widget.
