We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

DateTime as x- axis with ColumnSeries scrolling issue


I am trying to create a cartesian chart with DateTimeAxis as the x-axis and NumericAxis as the y-axis. also, I am using the ColumnSeries.

now as you can see in the video that I attached when I scroll the x-axis the labels of the x-axis are not scrolling with it instead they are refreshing and also the gridline is refreshing weirdly.

I want to scroll the label when I scroll on the x-axis.

Is there any solution or workaround for this problem?

Attachment: issue_3640671b.zip

3 Replies

YG Yuvaraj Gajaraj Syncfusion Team January 3, 2023 02:42 PM UTC

Hi Het,

Greetings from Syncfusion.

Currently, we don’t have axis label scrolling support when performing panning in the chart and we have already logged the feature request for this requirement. We will prioritize the features of every release based on demand and priority. So, this feature will be available in any of our upcoming releases. You can also track the status of the feature with the feedback below.


To avoid grid line refreshing set the false to anchorRangeToVisiblePoints property in NumericAxis it will help you to resolve this issue.



HE Het January 5, 2023 08:51 AM UTC

Thanks, Yuvaraj for your reply.

I tried setting anchorRangeToVisiblePoints to false but I still have the same behaviour. This is the complete code i am using right now.

List chartData = [
ChartSampleData(DateTime(2020, 1, 1), 4),
ChartSampleData(DateTime(2021, 1, 1), 4),
ChartSampleData(DateTime(2021, 1, 1), 4),
ChartSampleData(DateTime(2021, 2, 1), 12),
ChartSampleData(DateTime(2021, 3, 1), 6),
ChartSampleData(DateTime(2021, 4, 1), 12),
ChartSampleData(DateTime(2021, 5, 1), 15),
ChartSampleData(DateTime(2021, 6, 1), 15),
ChartSampleData(DateTime(2021, 7, 1), 18),

enableAxisAnimation: false,
zoomPanBehavior: ZoomPanBehavior(
enablePanning: true,
zoomMode: ZoomMode.xy,
enablePinching: false,
enableSelectionZooming: false,
enableDoubleTapZooming: true,
enableMouseWheelZooming: true,
plotAreaBorderWidth: 0,
margin: const EdgeInsets.all(0),
enableMultiSelection: false,
enableSideBySideSeriesPlacement: false,
series: [
ColumnSeries, DateTime>(
animationDuration: 0,
animationDelay: 0,
isTrackVisible: false,
dataSource: chartData,

xValueMapper: (ChartSampleData data, _) => data.x,
yValueMapper: (ChartSampleData data, _) => data.y,
primaryXAxis: DateTimeAxis(
enableAutoIntervalOnZooming: true,
autoScrollingDelta: 5,
rangePadding: ChartRangePadding.none,
autoScrollingDeltaType: DateTimeIntervalType.auto,
interval: 1,
plotOffset: 0,
isInversed: true,
majorTickLines: const MajorTickLines(
width: 0,
minorTickLines: const MinorTickLines(
width: 0,
opposedPosition: false,
labelIntersectAction: AxisLabelIntersectAction.wrap,
labelAlignment: LabelAlignment.center,
majorGridLines: const MajorGridLines(width: 1),
isVisible: true,
desiredIntervals: 5,
primaryYAxis: NumericAxis(
anchorRangeToVisiblePoints: false,
labelFormat: '{value}Kp',
majorGridLines: const MajorGridLines(width: 0),
enableAutoIntervalOnZooming: false,
zoomPosition: 0.1,
labelAlignment: LabelAlignment.center,


YG Yuvaraj Gajaraj Syncfusion Team January 6, 2023 04:59 PM UTC

Hi Het,

We apologize for the inconvenience. Please ignore the previous update about the anchorRangeToVisiblePoints property. By enabling this property, the Y-axis range will be calculated based on visible data points, which should give you the same outcome. The current refreshing behavior of the x-axis gridlines is a default behavior. As mentioned in the previous update, we have already considered an improvement to the axis label movement during chart panning. Which will be expected to be rolled out on any of our upcoming releases. We appreciate your patience until then. You can also track the status of the feature with the feedback below.


Feedback: https://www.syncfusion.com/feedback/36499/




Live Chat Icon For mobile
Up arrow icon