How to render particular part of a data in Cartesian charts (SfCartesianChart) ?

SfCartesianChart widget provides support to view the required set of data from a larger collection. This can be achieved using the visibleMinimum and visibleMaximum properties of an axis.

Consider that, we are having 10 data pointsfrom which you need to view 4 data, then you can specify the visibleMinimum as 4 and visibleMaximum as 7 in an axis. Now, only the data from 4 to 7 will be visible in the axis.

The following steps explain how to achieve this in the SfCartesianChart.

Step 1: Initialize the Cartesian chart widget with the required parameters and initialize the visibleMinimum and visibleMaximum properties in the x-axis.

SfCartesianChart(
 // Assigning visible minimum and maximum to the x-axis.
  primaryXAxis: NumericAxis(
    visibleMinimum: 4, visibleMaximum: 7, interval: 1
  ),
)

Step 2: Then to view the remaining data, you can enable the panning in the zoomPanBehavior and pan the chart.

late ZoomPanBehavior zoomPanBehavior;
 
// Enable the panning
@override
 void initState() {
  zoomPanBehavior = ZoomPanBehavior(enablePanning: true);
  super.initState();
}
 
// Assigning zoom pan behavior to the chart
  SfCartesianChart(
    zoomPanBehavior: zoomPanBehavior,
  )

View the sample in GitHub