1. Feedback
  2. Flutter
  3. 52760

Welcome to the Flutter feedback portal. We’re happy you’re here! If you have feedback on how to improve the Flutter, we’d love to hear it!

  • Check out the features or bugs others have reported and vote on your favorites. Feedback will be prioritized based on popularity.
  • If you have feedback that’s not listed yet, submit your own.

Thanks for joining our community and helping improve Syncfusion products!

1
Vote

Bug Report: DateTimeAxis Labels(x-axis) Not Scrolling with Data in SfCartesianChart

There seems to be an issue with SfCartesianChart where the DateTimeAxis labels are not scrolling along with the data points. When users scroll through the chart, the data moves, but the time axis labels stay fixed, which leads to a mismatch between the data displayed and the timeline.

Expected Behavior: When users scroll horizontally through a chart, the DateTimeAxis labels should move in synchronization with the data points, maintaining the correct correspondence between the dates and the data visualized.

Actual Behavior: The DateTimeAxis labels remain static while the chart data scrolls, causing user confusion and potentially leading to misinterpretation of the data.

Steps to Reproduce:

This behavior can significantly affect the analysis of time-based data, especially for datasets that cover larger timeframes. I have attached screenshots demonstrating the issue. I request the team to look into this as a potential defect and provide a fix or a workaround.

key implementation: 














SfCartesianChart(


              margin: const EdgeInsets.only(right: 0, left: 10),


              plotAreaBorderWidth: 0,


              zoomPanBehavior: ZoomPanBehavior(


                enablePanning: true,


              ),


              primaryXAxis: DateTimeAxis(


                autoScrollingDelta: 7 * 5, // by DateTimeIntervalType.days


                autoScrollingMode: AutoScrollingMode.start,


                edgeLabelPlacement: EdgeLabelPlacement.shift,


                interval: 7,


                intervalType: DateTimeIntervalType.days,


                majorGridLines: const MajorGridLines(width: 0.5),


                labelAlignment: LabelAlignment.center,


                labelStyle: TextStyle(color: AppThemes.theme.colorScheme.onSurface),


                minimum: widget.startDate,


                maximum: widget.endDate,


                axisLabelFormatter: (AxisLabelRenderDetails details) {


                  return ChartAxisLabel(


                      viewModel.formatWeekLabel(details.value, widget.startDate), const TextStyle(color: Colors.black));


                },


              ),





              primaryYAxis: NumericAxis(


                labelFormat: '',


                interval: 5,


                maximum: 27,


                axisLine: const AxisLine(width: 0),


                majorGridLines: const MajorGridLines(width: 0.5, dashArray: <double>[3, 3]),


                plotBands: _getPlotBands(),


              ),