DateTime as x- axis with ColumnSeries scrolling issue

[Het]

Hello,

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

[Yuvaraj Gajaraj]

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.

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

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

Regards,

Yuvaraj.

[Het]

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),
];


SfCartesianChart(
    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,
    ),

),


[Yuvaraj Gajaraj]

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/

 

Regards,

Yuvaraj.