XAxis disappears when pinching out

[ai]

I've got a symptom that xaxis disappears when pinching out on the chart. (see attached webm.)

I set the config values of xaxis as 2 month period, this might be the cause.

I want xaxis height to be fixed size, even when the chart zooming changed.

Is it possible ?

here's my code.

final xAxis = DateTimeAxis(

  name: 'primaryXAxis',
  zoomFactor: zoomFactor,
  zoomPosition: zoomPosition,
  minimum: minXAxis,
  maximum: maxXAxis,
  intervalType: DateTimeIntervalType.months,
  interval: 2,
  desiredIntervals: 6,
  autoScrollingDeltaType: DateTimeIntervalType.months,
  autoScrollingDelta: 12,
  dateFormat: dateFormat,
  labelRotation: 300,
  labelAlignment: LabelAlignment.start,
  labelStyle: textStyle,
  labelPosition: isLast ? ChartDataLabelPosition.outside : ChartDataLabelPosition.inside;,
);


final chart = SfCartesianChart(
  margin: EdgeInsets.fromLTRB(10.0, 10.0, 10.0, 0.0),
  series: series,
  primaryXAxis: xAxis,
  primaryYAxis: yAxis,
  palette: palette,
  zoomPanBehavior: ZoomPanBehavior(
    enablePanning: true,
    enablePinching: true,
  ),
  onZooming: (ZoomPanArgs args) {
    if (args.axis?.name == 'primaryXAxis') {
      final position = args.currentZoomPosition;
      final factor = args.currentZoomFactor;
      ref.read(_provider).setZoomValue(position, factor);
    }
  },
  tooltipBehavior: TooltipBehavior(
~~~~~
  ),
  trackballBehavior: TrackballBehavior(
~~~~~
  ),
  onTrackballPositionChanging: (TrackballArgs args) {
~~~~~
  },
);

Attachment: xaxis_gone.webm_f62ee7d4.zip

[Yuvaraj Gajaraj]

Hi Ai,

Greetings from Syncfusion. We have checked the code snippet attached in the query and found the autoScrollingDelta value is set in the primaryXAxis, but it works with the auto-scrolling feature. So please remove the autoScrollingDelta property then the axis labels are calculated properly. If you want to use the auoScrollingDelta in your sample, please let us know for what purpose do you are using this property. That will be more helpful to us.

UG: https://help.syncfusion.com/flutter/cartesian-charts/axis-customization#auto-scrolling

If you have any other queries, please get back to us.

Regards,

Yuvaraj.

[ai]

Thank you for the reply.

I'm setting the autoScrollingDelta value for scrolling feature. 

The charts use long-term data like 10 years, so I want to show the latest values at first display, then show the past values by scrolling.

I tried to remove autoScrollingDelta, but the charts show all plots in one screen without scrolling functionality.

What am I missing?

[Yuvaraj Gajaraj]

Hi Ai,

As stated earlier, the autoScrollingDelta only works with the autoScrolling feature, so please avoid using autoScrollingDelta to show the last 12 latest updated data you can achieve this by setting the visibleMinimum and visibleMaximum on the X-axis. It will show the data point between the specified range, we have also attached the code snippet below to achieve your requirement.

Code snippet:

primaryXAxis: DateTimeAxis(

  visibleMinimum: chartData![chartData!.length - 12].x,

  visibleMaximum: chartData!.last.x,

),

If you have any further queries, please get back to us.

Regards,

Yuvaraj.

[ai]

thank you for the reply.

i tried to set visibleMinimum and visibleMaximum and remove autoScrollingDelta property, it works when there is only one chart in a screen.

but i ran into other problems, as follows:

1. the line between the first plot and the previous (hidden) plot is not connected on the initial view. (after scrolling it's going to be connected.)
2. i want to synchronize panning gesture in multiple charts, it was working before this changing.

are these resolvable?

[ai]

i've got a workaround.

i'm using zoomFactor instead of visibleMaximum and visibleMinimum for scrolling functionality.

and removed intervalType, interval, autoScrollingDeltaType and autoScrollingDelta.

it's working so far as i expected.

so, please close this thread.

thank you for your work!