Chart not automatically panning.

Question

I have a realtime chart that reads adds data to the list of data every couple seconds however I only want to show the latest 5 data points at a time. I have enabled panning and set visibleminimum, visiblemaximum but the graph acts strangely because the line disappears after the first few points on build and I have to pan it manually for it to work properly.

As you can see here the last point remains in the middle and sometimes will even disappear to the left. This will only fix itself when I manually pan it)

(How I want my chart to automatically look like from the start.

SfCartesianChart(
  zoomPanBehavior: ZoomPanBehavior(enablePanning: true),
  enableAxisAnimation: false,
  margin: EdgeInsets.all(5),
  primaryXAxis: CategoryAxis(
    interval: 2,
    zoomFactor: 0.95,
    visibleMinimum: ((chartData.length <= 5) ? 0 : ((chartData.length).toDouble() - 5)),
    visibleMaximum: ((chartData.length).toDouble()),
    edgeLabelPlacement: EdgeLabelPlacement.hide,
    labelPlacement: LabelPlacement.onTicks,
    labelIntersectAction: AxisLabelIntersectAction.hide,
  ),
  primaryYAxis: NumericAxis(
    anchorRangeToVisiblePoints: true,
    decimalPlaces: 2,
    zoomFactor: 0.95,
    desiredIntervals: 5,
    labelFormat: '{value} °C',  // '%' will be append to all Y-axis labels
    labelIntersectAction: AxisLabelIntersectAction.multipleRows,
    majorTickLines: MajorTickLines(size: 1.5),
    majorGridLines: MajorGridLines(width: 0),
    minorGridLines: MinorGridLines(width: 0.0),
  ),
  legend: Legend(isVisible: false),  //Enable tooltip
  tooltipBehavior: TooltipBehavior(enable: true),
  series: <ChartSeries<SensorData, dynamic>>[
    LineSeries<SensorData, dynamic>(
      name: 'Realtime Temperature',
      color: chartColors,
      dataSource: chartData,
      xValueMapper: (SensorData data, _) => data.now,
      yValueMapper: (SensorData data, _) => data.sen1,
      animationDuration: 500,
      //Enable Label Settings
      dataLabelSettings: DataLabelSettings(isVisible: false),
      markerSettings: MarkerSettings(isVisible: false),
    ),
  ],
)

Sriram Kiran Senthilkumar · Accepted Answer

Hi Corvo, 
  
Greetings from Syncfusion. We have analyzed your scenario with the provided information at our end and on analyzing your code snippet, we found that you have provided the visibleMaximum value for the x-axis as chartData.length which is one value greater than the last index value of the chart data source and due to this only there is one extra interval added in the axis after the last point which results in blank space after the last rendered point in the chart. To overcome this issue, we kindly request you to set the visibleMaximum value as “chartData.length – 1” so that the chart when updating in realtime will be rendering similar to the provided second screenshot. We have created a simple real time live chart sample similar to the provided code snippet and made the above-explained changes in it to overcome the reported issue. We have also attached the test sample below for your reference. 
Sample: https://www.syncfusion.com/downloads/support/forum/159792/ze/realtime_chart_sample-358112657 
  
Also to mention that, if the provided solution didn’t resolve the reported issue then we kindly request you to replicate the reported issue in the above-attached test sample and revert us that sample so that it will help provide the solutions sooner. 
  
Regards, 
Sriram Kiran