Smooth Scrolling In sfCartesianChart

[vikram]

I have used Infinite scrolling which you have provide here (https://help.syncfusion.com/flutter/cartesian-charts/on-demand-loading )

But my requirement is slightly different  , i want smooth scrolling  like scroll feature in list view .we can scroll from both side without any lazy load. Because on demand loading has very bad user experience .if you have smooth scrolling  in paid version then let us know .As this smooth scrolling is need for our development

[Yuvaraj Gajaraj]

Hi Vikram,

Greetings from Syncfusion.

Your requirement can be achieved with help of the autoScrollingDelta property in the axis to show the specified number of data points from the start or end of the chart based on the autoScrollingMode property. The default value for autoScrollingMode is `end`. Then you can see hidden data by swiping on the chart area by enabling the panning in the zoomPanBehavior in the chart. We have shared a code snippet and sample below for your reference.

Code snippet:

SfCartesianChart(

zoomPanBehavior: ZoomPanBehavior(

enablePanning: true,

),

primaryXAxis: NumericAxis(

autoScrollingDelta: 15,

autoScrollingMode: AutoScrollingMode.start,

),

series: <ChartSeries<ChartData, num>>[

ColumnSeries(

dataSource: chartData,

xValueMapper: (ChartData data, _) => data.x,

yValueMapper: (ChartData data, _) => data.y,

)

],

),

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

Regards,

Yuvaraj.

Attachment: f179576_819107ae.zip

[vikram]

Hi Yuvaraj Gajaraj ,

we are using  category axis for X axis so how can we  manage it 

[Yuvaraj Gajaraj]

Hi Vikram,

We would like to inform you that the auto-scrolling delta feature is also available for category axes. You can use the same code for category axes, please change the value of the autoScrollingDelta property based on your requirements.

We have attached a simple sample with a category axis for your reference. Please modify it based on your requirement. 

Code snippet:

SfCartesianChart(

zoomPanBehavior: ZoomPanBehavior(

enablePanning: true,

),

primaryXAxis: CategoryAxis(

autoScrollingDelta: 10,

autoScrollingMode: AutoScrollingMode.start,

),

series: <ChartSeries<ChartData, String>>[

ColumnSeries(

dataSource: chartData,

xValueMapper: (ChartData data, _) => data.x,

yValueMapper: (ChartData data, _) => data.y,

)

],

),

Regards,

Yuvaraj.

Attachment: f179576_82c958eb.zip

[vikram]

Hi Yuvaraj Gajaraj ,

I have tried your solution .scroll is very smooth as compare to before .There is any   props or event in Line series to know when user start scrolling the  graph using above solution.

Thanks 
Swagatika

[Lokesh Palani]

Hi Vikram,

You can achieve your requirement with the help of onZooming callback in the chart. By using the onZooming callback, you can get the previous and current zoom positions. We have provided a User Guide documentation below for your reference. Please let us know if you require any further assistance.

UG,

https://help.syncfusion.com/flutter/cartesian-charts/callbacks#onzooming

Regards,

Lokesh.