Candle stick chart with scrolling data.

[Ayush Tripathi]

Hi, I am creating a candle stick chart and want to show only 30 points in screen and user can scroll towards right. this means i want graph to be horizontally scrollable. I am using SFCartesian chart and candle stick series. I am struct and didnot get any resonable way to do so.

I get data from my in house API (rest).

[Hariharasudhan Kanagaraj]

Hi Ayush,

The requirement can be achieved by the visibleMinimum and visibleMaximum properties in the primaryXAxis and enabling the panning property in the ZoomPanBehavior widget. In the attached sample, we provided 30 data points for candle series and set visibleMinimum property to 1 and visibleMaximum property to 10 to show the first 10 data points, then you can see the other data points by panning the chart.

Please refer the following code snippet.

primaryXAxis: NumericAxis(

visibleMinimum: 1,

visibleMaximum: 10,

),

primaryYAxis: NumericAxis(),

zoomPanBehavior: ZoomPanBehavior(enablePanning: true),

And we have attached a sample below for your reference. Please modify the sample based on your requirement.

Regards,

Hari Hara Sudhan. K

Attachment:
181045_8856f615.zip

[Ayush Tripathi]

Hi team, Thanks for replying. Actually as we are using DATE Time to plot X axis. How should we plot 30 points on that basis. 

below is the code for Xaxis part. 
Thanks

[Yuvaraj Gajaraj]

Hi Ayush,

We have checked your code snippet and found that you have set the visibleMaximum of Duration(minutes: 3000) which means adding 50 hours from the 400th data point, in this case, if you have data source in the hour's difference it will show a 50 data points in the visible range. So, we have modified the code snippet and shared it below for your reference.

Code snippet:

primaryXAxis: DateTimeCategoryAxis(

visibleMinimum: data[400].x,

visibleMaximum: data[400].x.add(const Duration(minutes: 1800)),

),

If you want to show the last or first 30 points from the overall data points, you can use the autoScrollingDelta and autoScrollingMode properties in the axis. Here autoScrollingDelta is a number of data points that need to be visible in the viewport and autoScrollingMode represent where the data point starts to show like the start or end of the list. We have shared the code snippet and UG documentation below for your reference.

Code snippet:

primaryXAxis: DateTimeCategoryAxis(​

autoScrollingDelta: 30,

autoScrollingMode: AutoScrollingMode.end,

),

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

Regards,

Yuvaraj.