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

Scrolling issues with multiple SfCartesianCharts in a Flutter ListView

Hi,


I'm currently facing a problem with scrolling in my Flutter app, and I hope someone can help me resolve this issue. I have a ListView with multiple SfCartesianCharts, and I'm encountering an issue where the scrolling doesn't work correctly when the user's finger starts on a chart or the scroll wheel event starts over the graph.


Here's the scenario:

The user's finger starts on a chart or the scroll wheel event starts over the graph.

The user attempts to scroll the page.

The page doesn't scroll as expected (A video has been attached to show the behavior).

I would like the page to scroll normally, regardless of whether the user's finger starts on a chart or the scroll wheel event is initiated over the graph. I have tried various solutions, but nothing seems to work so far.


I have zoom pan disabled. The graphs do have

Any ideas?

I am using MacOS 13.3.1


Here is an example of one of the charts. It has ZoomPanBehavior x only, Trackball enabled with custom builder and no animations.

class NetIncomeChart extends ConsumerStatefulWidget {
const NetIncomeChart({super.key});

@override
ConsumerState<NetIncomeChart> createState() => _NetIncomeChartState();
}

class _NetIncomeChartState extends ConsumerState<NetIncomeChart> {
List<StackedColumnSeries<IncomeStatement, String>> _getSeries(
List<IncomeStatement> data,
) {

final series = [
StackedColumnSeries<IncomeStatement, String>(
animationDuration: 0,
width: 0.95,
dataSource: data,
xValueMapper: (IncomeStatement data, _) => data.quarter,
yValueMapper: (IncomeStatement data, _) => data.netIncome,
name: 'Net Income',
pointColorMapper: (IncomeStatement data, _) {
final opacity = (data.forecasted) ? 0.5 : 1.0;
final res = data.netIncome != null
? (data.netIncome! >= 0
? Colors.greenAccent[400]
: Colors.red[400])
: null;
return res?.withOpacity(opacity);
},
),
];
return series;
}

@override
void initState() {
super.initState();
}

List<Color>? pointColors;

@override
Widget build(BuildContext context) {
final incomeStatement = ref.watch(incomeStatementNotifierProvider);
return incomeStatement.when(
data: (data) {
return ConstrainedBox(
constraints: const BoxConstraints(maxHeight: 400),
child: SfCartesianChart(
zoomPanBehavior: ZoomPanBehavior(
enablePinching: false,
enableSelectionZooming: false,
enablePanning: false,
zoomMode: ZoomMode.x,
),
plotAreaBorderWidth: 0,
margin: const EdgeInsets.only(right: 0, left: 0, top: 0, bottom: 0),
legend: Legend(
isVisible: false,
overflowMode: LegendItemOverflowMode.wrap,
position: LegendPosition.top,
textStyle: const TextStyle(fontSize: 12),
),
primaryXAxis: CategoryAxis(
axisLabelFormatter: (axisLabelRenderArgs) => ChartAxisLabel(
axisLabelRenderArgs.text.substring(2),
const TextStyle(fontSize: 8),
),
labelPlacement: LabelPlacement.onTicks,
zoomFactor: 20 / (data.length),
zoomPosition: 1 - (20 / (data.length)),
interval: 1,
rangePadding: ChartRangePadding.normal,
minorGridLines: const MinorGridLines(width: 0),
majorGridLines: const MajorGridLines(width: 0),
labelIntersectAction: AxisLabelIntersectAction.rotate45,
multiLevelLabelStyle: const MultiLevelLabelStyle(
borderColor: Colors.grey,
borderWidth: 0.1,
borderType: MultiLevelBorderType.squareBrace,
),
multiLevelLabels: genCategoricalMultiLevelLabelForQuarters(
data.map((e) => e.quarter).toList(),
),
),
primaryYAxis: NumericAxis(
axisLine: const AxisLine(width: 0),
labelFormat: '\${value}',
numberFormat: NumberFormat.compact(),
majorTickLines: const MajorTickLines(size: 0),
anchorRangeToVisiblePoints: true,
),
series: _getSeries(data),
trackballBehavior: TrackballBehavior(
enable: true,
activationMode: ActivationMode.longPress,
tooltipDisplayMode: TrackballDisplayMode.groupAllPoints,
hideDelay: 30,
builder:
(BuildContext context, TrackballDetails trackballDetails) =>
BlurredTrackball(
colors: pointColors,
trackballDetails: trackballDetails,
xValueTransform: (x) => x.toString().toQuarterlyString(),
yValueTransform: (y) => NumberFormat.compact().format(y),
),
),
onTrackballPositionChanging: (TrackballArgs args) {
if (args.chartPointInfo.chartDataPoint?.pointColorMapper !=
null) {
pointColors = [
args.chartPointInfo.chartDataPoint!.pointColorMapper!
];
}
},
),
);
},
loading: () => const LoadingContainer(size: 400),
error: (error, stackTrace) => ErrorContainer(error: error),
);
}
}




Attachment: output.mp4_48412f6.zip


25 Replies

LP Lokesh Palani Syncfusion Team April 13, 2023 01:36 PM UTC

Hi Daniel,


We are validating your query at our end. We will try it feasible workaround and let you know one business day on April 14, 2023. We appreciate your patience until then.


Regards,

Lokesh.



LP Lokesh Palani Syncfusion Team April 14, 2023 10:19 AM UTC

Hi Daniel,


We have checked your code snippet and you can achieve your requirement with the help of the IgnorePointer widget, which ignores user interaction with the GestureDetector widget. Additionally, by setting the behavior property to HitTextBehavior.opaque in the GestureDetector widget, you can achieve scrolling and display the trackballBehavior in a list view with multiple charts. We have shared a code snippet and sample for your reference.


Code snippet:

late TrackballBehavior _trackballBehaviorOne;

 

 @override

  void initState() {

    _trackballBehaviorOne = TrackballBehavior(

        enable: true, activationMode: ActivationMode.singleTap);

    super.initState();

  }

 

 GestureDetector(

            behavior: HitTestBehavior.opaque,

            onTapDown: (TapDownDetails details) {

              _showTrackballOne(

                  details.globalPosition.dx, details.globalPosition.dy);

            },

            child: IgnorePointer(

              ignoring: true,

              child: SfCartesianChart(

                trackballBehavior: _trackballBehaviorOne,

         )

       )

    )

 

   void _showTrackballOne(double x, double y) {

    _trackballBehaviorOne.show(x, y, 'pixel');

  }


Note: When the ignoring property is set to true, trackballBehavior will be activated upon tapping on the chart, while other user interactions will be disabled.


Output Screenshot:



Regards,

Lokesh.


Attachment: chart_181765_14b0cc48.zip


DA Daniel April 14, 2023 09:41 PM UTC

Hello,


Thanks Lokesh, that is very close to what I am after. 

Is there a way to only wrap the chart? Doing this removes the ability to toggle the legend and the trackball is activated if the user clicks anywhere on the chart even the axes etc.


Thans

Dan



LP Lokesh Palani Syncfusion Team April 17, 2023 04:03 PM UTC

Hi Daniel,


When using the IgnorePointer widget, chart interactions will not work. So, we have enabled the trackballBehavior by using the show method. If we remove the ignore pointer, chart only takes the touch interactions while hover or tap on chart area. This is the behavior of chart. 


Regards,

Lokesh.



NC nitish chauhan April 18, 2023 09:10 AM UTC

Hi Lokesh I have facing same problem.

      I am not abel to scrool vertically multiple graph . and i used Drilled Chart as well use in every graph . When i remove ZoomPan Behaviour property in Chart , Chart is proper scrolle vertically but horizonatal scroll is not working .


Isend you my scenario via video. please check


Attachment: video_data_2f456b57.zip


NC nitish chauhan April 18, 2023 09:17 AM UTC

hi  Daniel

    please remove this if you dont use zoom then your scrooling work proper.

zoomPanBehavior: ZoomPanBehavior(
enablePinching: false,
enableSelectionZooming: false,
enablePanning: false,
zoomMode: ZoomMode.x,
),


LP Lokesh Palani Syncfusion Team April 19, 2023 09:48 AM UTC

Hi nitish,


Thank you for the suggestion. Please let us know if you require any further assistance.


Regards,

Lokesh.



NC nitish chauhan April 19, 2023 11:00 AM UTC



LP Lokesh Palani Syncfusion Team April 20, 2023 08:26 AM UTC

Hi,


We have provided an answer to the query above. Please check the answered link below. Please get back to us if you need any further assistance.


Link,

https://www.syncfusion.com/forums/181825/how-to-scroll-graph-data-horizontally-without-using-zoompanbehavior-properties?reply=SFjasl


Regards,

Lokesh.



NC nitish chauhan April 21, 2023 04:56 AM UTC

hi Lokesh

you dont understand what is problem in this chart.

Scenario is that,

=> First i have multiple chart in one page with single child scroll view.

=> All chart have their own Drilled Chart ​ .

=> In Every Chart i have scroll horizontally when i tap to scrool on Left side its scrool very well with using property of Enabel Panning​ .

=> But I also want to scrooled vertically all chart when touch on evry column graph data its not scrolling.

Note (That Single child scroll view provide me to scrool vertically all chart)

=>I mention this in video.


please first understand question than reply.


Regards Nitish


Attachment: video_data_159dca00.zip



LP Lokesh Palani Syncfusion Team April 21, 2023 06:03 AM UTC

Hi nithish,


We are validating your query at our end and we will update further details one business day on April 24, 2023. We appreciate your patience until then.


Regards,

Lokesh.



NC nitish chauhan April 25, 2023 04:25 AM UTC

Hi Lokesh

Any update regarding this question?



YG Yuvaraj Gajaraj Syncfusion Team April 25, 2023 12:23 PM UTC

Hi Nitish,


You can achieve your requirement with the help of zoomMode and enablePanning property in the ZoomPanBehavior, here when setting zoomMode to ZoomMode.x and enabling the panning by enablePanning property it allows you to pan the chart in the horizontal direction only. So, now you can scroll the view vertically with multiple charts, and also the drilled-down and trackball also work fine. We have prepared the sample and shared it below for your reference.


In another query you have asked to pan the chart without enabling zoomPanBehavior for that, you can able to pan the chart by using the panToDirection public method of ZoomPanBehavior and setting the enablePinching and enablePanning properties to false. We have shared the related UG and online samples below for your reference.


UG: https://help.syncfusion.com/flutter/cartesian-charts/methods#pantodirection-method-in-zoompanbehavior


online Sample: https://flutter.syncfusion.com/#/cartesian-charts/user-interactions/zooming-and-panning/zooming-with-custom-buttons



Regards,

Yuvaraj.


Attachment: f181825_3b60a267.zip


NC nitish chauhan April 26, 2023 04:28 AM UTC

Hi

Yuvaraj

Thanks for answer but is not that i want.

I mention video also please watch than check .

I have multiple chart with diffrent diffrent view in one screen . When i touch on Column Graph data that time i want scroll vertically whole screen view that not working.


I add sample code


Attachment: chartdemo_df205c7a.zip



LP Lokesh Palani Syncfusion Team April 26, 2023 11:29 AM UTC

Hi nitish,


We have checked your sample. To enable vertical scrolling in the chart, you can enable ZoomMode.x in the zoomPanBehavior property. This will allow you to pan the chart horizontally only. Please inform us if you require any additional assistance.


Regards,

Lokesh.



NC nitish chauhan April 27, 2023 06:57 AM UTC

Hi Lokesh

Thanks For your answer its working fine right now in Column Seriese.

If any query will come from Chart related i update my question.

Sincerly Thanks



YG Yuvaraj Gajaraj Syncfusion Team May 1, 2023 05:10 AM UTC

Most Welcome. Kindly get back to us if you have further queries. We are always happy to assist you.



DG Dan G May 2, 2023 01:16 AM UTC

Hello,


I have tried the gesture detector and ignore pointer but it removes all functionality of legends etc and is not worth it.

Is there anyway to use the xaxis as a panning “slider” so swipe across the xaxis will pan the chart instead of allowing the user to touch the chart and then pan. 

The aim being to make the chart ignore all panning behaviours except for the axes interaction. This should remove my issue of the user constantly getting pauses due to wrongful gesture interaction .


I was able to link the chart to a slider but that’s not ideal, I would like to just swipe the finger horizontally along the x axis labels instead.


Any ideas?



YG Yuvaraj Gajaraj Syncfusion Team May 2, 2023 01:51 PM UTC

Hi Dan,


Currently, we don’t have support for the axis scrollbar support to pan the chart without the chart area interaction. However, we have considered your requirement as a new feature and logged a feature request for it in our feedback portal.


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.


Feedback, https://www.syncfusion.com/feedback/43312


Regards,

Yuvaraj.



MK Matthias Koch July 13, 2024 01:54 PM UTC

Hi,

is there a way to allow vertical scrolling of the screen (the Line Chart inside a ScrollView)  while having panning pinching and trackball with long-press enabled? 

I just need panning and pinching on the X-axis, so the vertical gesture should not disturb the other controls.
 




LP Lokesh Palani Syncfusion Team July 15, 2024 01:06 PM UTC

Hi Matthias,


We have considered this as bug regarding “Scrolling not working when Trackball is enabled in the chart”. This issue is scheduled to be fixed in our weekly patch release on July 23, 2024. We will update you here once the release is rolled out and we appreciate your patience until then. 


Root cause:
In the SfCartesianChart widget, the VerticalDragGestureRecognizer is used to handle vertical panning, and it absorbs the interactions in the SfCircularChart, causing the SingleChildScrollView to scroll vertically.


Regards,

Lokesh P.



MK Matthias Koch July 18, 2024 03:39 PM UTC

thanks for the update great to hear :)




LP Lokesh Palani Syncfusion Team July 23, 2024 01:57 PM UTC

Hi Matthias,


We have rewritten the zooming behavior architecture in our charts to double the performance. During these flow changes, we utilized ScaleGesture and Drag gestures to handle pinching and panning. However, when we wrapped the chart widgets inside a ScrollView, Charts drag gestures took priority over parent widget, resulting in charts interactions occurring while attempting to scroll the parent widget even trackball activation mode is LongPress.


Currently we are working on this, and we will include this in our package after the service pack release since we have the service pack release in this week.


Regards,

Lokesh P.



LA Lavanya Anaimuthu Syncfusion Team July 26, 2024 02:28 PM UTC

Hi Matthias,

 

The reported issue has been fixed and rolled out in our weekly patch release. To avoid this issue we request you upgrade the syncfusion_flutter_chart package to the latest version below.

 

Root cause:  In the SfCartesianChart widget, the VerticalDragGestureRecognizer is used to handle vertical panning, and it absorbs the interactions in the SfCartesianChart, causing the scrolling issue while scrolling vertically.

 

Package:  https://pub.dev/packages/syncfusion_flutter_charts/versions/26.2.5+1

 

Regards,

Lavanya A.



MK Matthias Koch July 29, 2024 02:32 PM UTC

Hi,
thanks a lot, works pretty well :) 


Loader.
Up arrow icon