1. Home
  2. Forum
  3. Flutter
  4. Scrolling not working

Scrolling not working

I have a dateTimeAxis for my primaryXAxis it was normally a numeric one, now that i have change it the panning and zooming does not work.
my visible min and visible max is set so that it can change with some buttons on top of the chart but this should not be the problem for panning to not work cause all the data is still there before the minDate but i just can not pan to them?
visibleMinimum:minDate,
visibleMaximum:maxDate,

8 Replies 1 reply marked as answer
DP Dharanitharan Palanisamy Syncfusion Team April 21, 2021 06:55 AM UTC

Hi Werner, 
 
We analysed your question and attempted to reproduce it on our end, but the recorded issue was not replicated. The chart was panned by setting the visible minimum and visible maximum to the DateTime axis and panning worked perfectly. Even after setting the visible minimum and visible maximum properties, pinch zooming and panning works properly. Please provide additional details or duplicate the problem in the attached sample to assist us in further analysing and providing a solution to you sooner. 
 
 
Thanks, 
Dharanitharan. P  


Marked as answer
WS Werner Schoeman April 21, 2021 09:27 AM UTC

Hi thanks for the reply i did figure it out and it is working now as should.

Just one extra question when i pan from the end to the start of my graph when i reach the start it then pops back to the end of the chart is there a setting i am maybe missing that is doing this or how can i stop it from happening?

DP Dharanitharan Palanisamy Syncfusion Team April 22, 2021 06:31 AM UTC

Hi Werner, 
 
We looked into your question and were unable to duplicate the recorded scenario, so we believe you might have set the visible minimum and visible maximum properties while reaching the chart's beginning. Please provide more detail and the sample in which you are experiencing the problem. This will allow us to assess the situation and provide you with a solution more quickly. 
 
Thanks, 
Dharanitharan. P 


WS Werner Schoeman April 22, 2021 08:52 AM UTC

hi here is the code for my chart

Widget buildChart(List<chart.FastLineSeries<Graphs, DateTime>> data) {
    return chart.SfCartesianChart(
      plotAreaBorderWidth: 0,
      legend: chart.Legend(
        position: chart.LegendPosition.top,
        isVisible: true,
      ),
      primaryXAxis: chart.DateTimeAxis(
        zoomFactor: zoomFactor,
        zoomPosition: zoomPosition,
        name: 'primaryXAxis',
        edgeLabelPlacement: chart.EdgeLabelPlacement.shift,
        labelStyle: TextStyle(fontSize: 12),
        interval: 3,
        autoScrollingDelta: zoomDays,
        autoScrollingDeltaType: chart.DateTimeIntervalType.days,
        majorGridLines: chart.MajorGridLines(width: 0),
      ),
      primaryYAxis: chart.NumericAxis(
        anchorRangeToVisiblePoints: false,
        isInversed: true,
        axisLine: chart.AxisLine(width: 0),
        majorTickLines: chart.MajorTickLines(color: Colors.transparent),
      ),
      series: data,
      tooltipBehavior: chart.TooltipBehavior(enable: false),
      onZooming: (chart.ZoomPanArgs args) {
        if (args.axis.name == 'primaryXAxis') {
          setState(() {
            zoomFactor = args.currentZoomFactor;
            zoomPosition = args.currentZoomPosition;
          });
        }
      },
      zoomPanBehavior: chart.ZoomPanBehavior(
        enablePinching: true,
        zoomMode: chart.ZoomMode.x,
        enablePanning: true,
        enableDoubleTapZooming: true,
        enableMouseWheelZooming: true,
      ),
    );
  }

DP Dharanitharan Palanisamy Syncfusion Team April 23, 2021 08:38 AM UTC

Hi Werner, 
 
We examined your provided code and found that you are using the auto-scrolling feature. The main aim of this feature is that the chart automatically scrolls when new data is loaded, so even if you swipe the chart back to the beginning and then remove your fingers, the chart will refresh and show the recently loaded data, which is the default behavior. As a result, we recommend that you use our chart's infinite scrolling feature. The data is loaded while we swipe in the chart section, and we can also swipe through the previous data and back to the most recent data as needed. Please see the links below for more information. 
 
 
Thanks, 
Dharanitharan. P 


WS Werner Schoeman April 23, 2021 09:54 AM UTC

Hi but this was the solution i used to fix the first issue of this thread can you check on that chart why the vis min and vis max then doesn't load the previous data?

WS Werner Schoeman April 23, 2021 09:59 AM UTC

So when using this the chart does not pan or zoom
Widget buildChart(List<chart.FastLineSeries<Graphs, DateTime>> data) {
    return chart.SfCartesianChart(
      plotAreaBorderWidth: 0,
      legend: chart.Legend(
        position: chart.LegendPosition.top,
        isVisible: true,
      ),
      primaryXAxis: chart.DateTimeAxis(
        zoomFactor: zoomFactor,
        zoomPosition: zoomPosition,
        name: 'primaryXAxis',
        edgeLabelPlacement: chart.EdgeLabelPlacement.shift,
        labelStyle: TextStyle(fontSize: 12),
        interval: 3,
        // autoScrollingDelta: zoomDays,
        // autoScrollingDeltaType: chart.DateTimeIntervalType.days,
        visibleMinimum: DateTime.now().subtract(Duration(days: 14)),
        visibleMaximum: DateTime.now(),
        majorGridLines: chart.MajorGridLines(width: 0),
      ),
      primaryYAxis: chart.NumericAxis(
        anchorRangeToVisiblePoints: false,
        isInversed: true,
        axisLine: chart.AxisLine(width: 0),
        majorTickLines: chart.MajorTickLines(color: Colors.transparent),
      ),
      series: data,
      tooltipBehavior: chart.TooltipBehavior(enable: false),
      onZooming: (chart.ZoomPanArgs args) {
        if (args.axis.name == 'primaryXAxis') {
          setState(() {
            zoomFactor = args.currentZoomFactor;
            zoomPosition = args.currentZoomPosition;
          });
        }
      },
      zoomPanBehavior: chart.ZoomPanBehavior(
        enablePinching: true,
        zoomMode: chart.ZoomMode.x,
        enablePanning: true,
        enableDoubleTapZooming: true,
        enableMouseWheelZooming: true,
      ),
    );
  }

DP Dharanitharan Palanisamy Syncfusion Team April 26, 2021 12:38 PM UTC

Hi Werner, 
 
We have looked into your code and can inform you that the problem is caused by the call to setState in the onZooming callback in the code sample. Since the onZooming callback is called continuously when zooming and calculates the zoom factor and zoom location, so simply assigning the zoom factor and zoom position without calling setState will solve your problem. Please see the modified code snippet below. 
  
Code snippet:  
onZooming: (ZoomPanArgs args) { 
  if (args.axis!.name == 'primaryXAxis') { 
   zoomFactor = args.currentZoomFactor; 
   zoomPosition = args.currentZoomPosition; 
  } 
}, 
  
Thanks, 
Dharanitharan. P 


Loader.
Up arrow icon