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


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});

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;

void initState() {

List<Color>? pointColors;

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(
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,
(BuildContext context, TrackballDetails trackballDetails) =>
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 = [
loading: () => const LoadingContainer(size: 400),
error: (error, stackTrace) => ErrorContainer(error: error),

Attachment: output.mp4_48412f6.zip

19 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.



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;



  void initState() {

    _trackballBehaviorOne = TrackballBehavior(

        enable: true, activationMode: ActivationMode.singleTap);





            behavior: HitTestBehavior.opaque,

            onTapDown: (TapDownDetails details) {


                  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:



Attachment: chart_181765_14b0cc48.zip

DA Daniel April 14, 2023 09:41 PM UTC


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.



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. 



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.



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

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


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.





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.



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



Attachment: f181825_3b60a267.zip

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



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.



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


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



Live Chat Icon For mobile
Up arrow icon