How to display SplineSeries chart at particular index?

Question

I am using SplineSeries Chart and I have 30 days record. I want to display only 6 records at the time and the user scroll to display more records all is working fine.

But my point is that 6 records displayed only the last 6 records I want to display the record today record at the centre of the chart so how to display my record at a particular index?

My code is below

SfCartesianChart(

tooltipBehavior:TooltipBehavior(enable: true),

primaryYAxis: NumericAxis(

maximum: 100,

minimum: -100,

),

primaryXAxis: DateTimeAxis(

intervalType: DateTimeIntervalType.days,

visibleMinimum: chartData[chartData.length - 6].x,

visibleMaximum: chartData[chartData.length - 1].x),

zoomPanBehavior: ZoomPanBehavior(

enablePanning: true,

),

series: <CartesianSeries<ChartData, DateTime>>[

SplineSeries(

dataSource: chartData,

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

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

)

],

);

My data is always found month all days dates and accordingly his value.

So graph always display last 6 days. But I want to display today's date and its value in the center.

Like if today's date is Dec 10 then the graph displays Dec 10 in the center.

Please help me.

Yuvaraj Gajaraj · Answer

Hi Nikhil Vachhani, 
 
Greetings from Syncfusion. We have analyzed your query, and we have created a simple sample that display the 6 data points with the current date at the center of the chart as per your requirement. We have attached the code snippet and sample below for your reference, hope this will help you to achieve the requirement. 
 
Code snippet: 




// Here we have given static data, you can change the based on your exact requirement 
int todayRecord = chartData.indexWhere((element) => 
        element.x == DateTime(2021,12,10)); 
 
// Use the todayRecord value and set the visible minimum and maximum value. Here we have got the index value and based on that we have set the visible minimum and maximum range, you can also set the range by subtracting month/day/hour etc based on your data source. 
 primaryXAxis: DateTimeAxis( 
   visibleMinimum: chartData[todayRecord - 2].x, 
   visibleMaximum: chartData[todayRecord + 3].x) 
 
 
 
  
Sample:  https://www.syncfusion.com/downloads/support/forum/170809/ze/f170809-326457415 
  
Regards, 
Yuvaraj.

Nikhil Vachhani · Answer

Thank you give a perfect answer. it is working fine.

Yuvaraj Gajaraj · Answer

Hi Nikhil Vachhani, 
 
Thanks for the update, we are always happy to assist you. If you have any further query, please get back to us. 
 
Thanks, 
Yuvaraj.