Zoom in one axis when opening

[Iyar Avital]

Hi,

I have a chart with the following zoom behavior:

ZoomPanBehavior(

        enablePinching: true,

        zoomMode: ZoomMode.xy,

        enablePanning: true,

        enableMouseWheelZooming: kIsWeb ? true : false,

      );

The chart:

I want that the first time the chart is loaded, only the last 10 points will be displayed and it will be possible to scroll and zoom in order to see the full chart. 

My x-axis is dates. How should I do it?

I tried ZoomByRect, ZoomIn and ZoomToSingleAxis but they didn't work as excepted.

[Hariharasudhan Kanagaraj]

Hi Iyar Avital,

We have analyzed your query, and this can be achieved with the help of autoScrollingDelta property in the SfCartesianChart. In the SfCartesianChart, the autoScrollingDelta property of the chart axis can be used to set the number of data points to be always visible in the chart.

It always shows the recently added data points and scrolling will be reset to the start or end of the range, based on autoScrollingMode property’s value, whenever a new point is added dynamically.

For DateTimeAxis, we can apply auto scrolling delta value in any date time format by setting the autoScrollingDeltaType property.

We can decide whether the axis should be scrolled from start position or end position with the help of the autoScrollingMode property.

Kindly review the code snippet below:

SfCartesianChart(

  primaryXAxis: DateTimeAxis(

    autoScrollingDelta: 5,

    autoScrollingMode: AutoScrollingMode.start,

    autoScrollingDeltaType: DateTimeIntervalType.years,

    interval: 01,

    intervalType: DateTimeIntervalType.years,

    enableAutoIntervalOnZooming: true,

  ),

  primaryYAxis: NumericAxis(),

  series: <CartesianSeries<ChartSampleData, DateTime>>[

    ColumnSeries(

      dataSource: chartLineData1,

      xValueMapper: (ChartSampleData sales, int index) => sales.x,

      yValueMapper: (ChartSampleData sales, int index) => sales.high,

      color: Colors.blue,

    ),

  ],

  zoomPanBehavior: _zoomPanBehavior,

),

Shared the User Guide documentation on below to gather more details.

UG: https://help.syncfusion.com/flutter/cartesian-charts/axis-customization#auto-scrolling

Also Shared the sample and the recording below for you reference.

Regards,

Hari Hara Sudhan. K

Attachment: 183234_104623db.zip