We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Platform: Flutter |
Control: 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,
  )

 

visible_range_320_500_40_40

 

 

 

 

 

 

 

 

 

View the sample in GitHub

ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile