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 initialVisibleMinimum and initialVisibleMaximum properties of an axis.
Consider that, we are having 10 data points from which you need to view 4 data, then you can specify the initialVisibleMinimum as 4 and initialVisibleMaximum 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 initialVisibleMinimum and initialVisibleMaximum properties in the x-axis.
SfCartesianChart( // Assigning visible minimum and maximum to the x-axis. primaryXAxis: NumericAxis( initialVisibleMinimum: 4,
initialVisibleMaximum: 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,
)
