Trackball Overlapping after Flutter Upgrade

[lsrmg]

Bug description

After upgrading Flutter to 3.27.0 (from 3.24.4) the Z-axis for the Trackball are not working correctly anymore.
The same issue is present for Crosshair Tooltips for example.

(updating syncfusion_flutter_charts from 27.1.53 to 28.1.33 didn't resolve the issue)

Steps to reproduce

1. Upgrading to flutter 3.27.0

Code sample

Code sample

SfCartesianChart(
              plotAreaBorderColor: theme.colorScheme.pmBarBackground,
              plotAreaBorderWidth: 1,
              zoomPanBehavior: ZoomPanBehavior(
                  enableDoubleTapZooming: true,
                  zoomMode: ZoomMode.x,
                  enablePinching: true),
              trackballBehavior: TrackballBehavior(
                  enable: true,
                  activationMode: ActivationMode.singleTap,
                  tooltipDisplayMode: TrackballDisplayMode.groupAllPoints,
                  tooltipSettings: InteractiveTooltip(
                      enable: true,
                      format: 'point.y ${chartData.firstOrNull?.unit ?? ''}',
                      borderWidth: 1,
                      borderColor: theme.colorScheme.onSurface,
                      textStyle: TextStyle(color: theme.colorScheme.onSurface),
                      color: theme.colorScheme.surface)),
              primaryXAxis: DateTimeAxis(
                  dateFormat: timeFormat24hSetting.when(
                    data: (is24h) =>
                        is24h ? chartTimeFormat24h : chartTimeFormat12h,
                    loading: () => chartTimeFormat12h,
                    error: (_, __) => chartTimeFormat12h,
                  ),
                  interactiveTooltip: InteractiveTooltip(
                      arrowLength: 0,
                      // Enables the crosshair tooltip
                      enable: true)),
              primaryYAxis: NumericAxis(
                  majorGridLines:
                      MajorGridLines(color: theme.colorScheme.pmBarBackground),
                  interactiveTooltip: InteractiveTooltip(
                      // Disables the crosshair tooltip
                      enable: false)),
              legend: Legend(isVisible: true, position: LegendPosition.bottom),
              // Enable tooltip
              series: <CartesianSeries>[
                FastLineSeries<ChartData, DateTime>(
                    dataSource: chartData,
                    xValueMapper: (ChartData data, _) => data.date,
                    yValueMapper: (ChartData data, _) => data.value,
                    emptyPointSettings:
                        const EmptyPointSettings(mode: EmptyPointMode.average),
                    name: dataLegend,
                    color: theme.colorScheme.pmLineChartColor1,
                    // Duration of series animation
                    animationDuration: 500),
                if (secondDataLegend != '')
                  FastLineSeries<ChartData, DateTime>(
                    dataSource: secondChartData,
                    xValueMapper: (ChartData data, _) => data.date,
                    yValueMapper: (ChartData data, _) => data.value,
                    emptyPointSettings:
                        const EmptyPointSettings(mode: EmptyPointMode.average),
                    name: secondDataLegend,
                    color: theme.colorScheme.pmLineChartColor2,
                    // Duration of series animation
                    animationDuration: 500,
                  )
              ],
            ),

Screenshots or Video

Video demonstration

Screen.Recording.2024-12-13.at.17.03.05.mov

Stack Traces

Stack Traces

-```

</details>


### On which target platforms have you observed this bug?

Android, iOS

### Flutter Doctor output

<details open><summary>Doctor output</summary>

```console
[✓] Flutter (Channel stable, 3.27.0, on macOS 15.2 24C101 darwin-arm64, locale en-US)
    • Flutter version 3.27.0 on channel stable at /Users/lars/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 8495dee1fd (3 days ago), 2024-12-10 14:23:39 -0800
    • Engine revision 83bacfc525
    • Dart version 3.6.0
    • DevTools version 2.40.2

[!] Android toolchain - develop for Android devices (Android SDK version 35.0.0)
    • Android SDK at /Users/lars/Library/Android/sdk
    ✗ cmdline-tools component is missing
      Run `path/to/sdkmanager --install "cmdline-tools;latest"`
      See https://developer.android.com/studio/command-line for more details.
    ✗ Android license status unknown.
      Run `flutter doctor --android-licenses` to accept the SDK licenses.
      See https://flutter.dev/to/macos-android-setup for more details.

[✓] Xcode - develop for iOS and macOS (Xcode 16.2)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 16C5032a
    • CocoaPods version 1.15.2

[✗] Chrome - develop for the web (Cannot find Chrome executable at /Applications/Google Chrome.app/Contents/MacOS/Google
    Chrome)
    ! Cannot find Chrome. Try setting CHROME_EXECUTABLE to a Chrome executable.

[✓] Android Studio (version 2024.2)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 21.0.3+-79915917-b509.11)

[✓] VS Code (version 1.96.0)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.102.0

[✓] Connected device (4 available)

[✓] Network resources
    • All expected network resources are available.

! Doctor found issues in 2 categories.

[lsrmg]

Problem is solved after downgrading to Flutter 3.24.5 (still using updating syncfusion_flutter_charts 28.1.33)

[Shunt22]

It's not just trackball.
After upgrading to Flutter 3.27.0 here is AlertDialog overlapping with LineSeries on Android 13.

Hi @Shunt22,

We have checked the mentioned scenario and tried to replicate the reported issue regarding the Trackball overlapping in the SfCartesianChart widget with the updated SDK version 3.27.0. However, we were unable to reproduce the issue on our end. We have attached the sample we used to test the scenario. Please review the attached sample, and if you are still encountering the issue, we kindly request that you replicate it in the attached sample and provide us with additional details about the specific scenario in which the issue occurs. This will help us assist you more effectively.

Regards,
Kaviyarasan Arumugam.

bd_667955

bd_667955.zip

[Shunt22]

Hi!
I've slightly modified your code. Adding up to 4096 points to LineSeries and the bug is still happening. When you pressed Floating action button the dialog screen shows under the LineSeries.

I'm testing on Samsung SM-T220. Android 13.

Here is the code:

import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
import 'package:syncfusion_flutter_charts/charts.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'charts_tooltip',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(),
    );
  }
}

class ChartData {
  final DateTime date;
  final double value;
  final String unit;

  ChartData(this.date, this.value, {this.unit = ''});
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({
    super.key,
  });

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  late List<ChartData> chartData;
  late List<ChartData> secondChartData;
  String dataLegend = "Series 1";

  @override
  void initState() {
    super.initState();
    chartData = [];

    for (int i = 0; i < 4096; ++i) {
      chartData.add(
        ChartData(DateTime.now().add(Duration(days: i)), i.toDouble(),
            unit: "°C"),
      );
    }
  }

  @override
  Widget build(BuildContext context) {
    final theme = Theme.of(context);
    return Scaffold(
      floatingActionButton: FloatingActionButton(onPressed: () async {
        String? res = await showDialog(
          context: context,
          builder: (context) {
            return AlertDialog(
              content: Container(
                width: 100,
                height: 100,
                child: Text("I'm overlapping"),
              ),
            );
          },
        );
      }),
      appBar: AppBar(
        title: const Text('Syncfusion Chart Example'),
      ),
      body: Center(
        child: SfCartesianChart(
          plotAreaBorderColor: theme.colorScheme.surface,
          plotAreaBorderWidth: 1,
          zoomPanBehavior: ZoomPanBehavior(
            enableDoubleTapZooming: true,
            zoomMode: ZoomMode.x,
            enablePinching: true,
          ),
          trackballBehavior: TrackballBehavior(
            enable: true,
            activationMode: ActivationMode.longPress,
            tooltipDisplayMode: TrackballDisplayMode.groupAllPoints,
            tooltipSettings: InteractiveTooltip(
              enable: true,
              format: 'point.y ${chartData.firstOrNull?.unit ?? ''}',
              borderWidth: 1,
              borderColor: theme.colorScheme.onSurface,
              textStyle: TextStyle(color: theme.colorScheme.onSurface),
              color: theme.colorScheme.surface,
            ),
          ),
          primaryXAxis: DateTimeAxis(
            dateFormat: DateFormat('MM/dd/yyyy'),
            interactiveTooltip: const InteractiveTooltip(
              arrowLength: 0,
              enable: true,
            ),
          ),
          primaryYAxis: NumericAxis(
            majorGridLines: MajorGridLines(color: theme.colorScheme.surface),
            interactiveTooltip: const InteractiveTooltip(
              enable: false,
            ),
          ),
          legend:
              const Legend(isVisible: true, position: LegendPosition.bottom),
          series: <CartesianSeries>[
            FastLineSeries<ChartData, DateTime>(
              dataSource: chartData,
              xValueMapper: (ChartData data, _) => data.date,
              yValueMapper: (ChartData data, _) => data.value,
              emptyPointSettings:
                  const EmptyPointSettings(mode: EmptyPointMode.average),
              name: dataLegend,
              color: theme.colorScheme.primary,
              animationDuration: 500,
            ),
          ],
        ),
      ),
    );
  }
}

Hi @Shunt22,

We have checked the mentioned scenario and tried to replicate the reported issue regarding the Trackball overlapping in the SfCartesianChart widget with the updated SDK version 3.27.0. However, we were unable to reproduce the issue on our end. We have attached the sample we used to test the scenario. Please review the attached sample, and if you are still encountering the issue, we kindly request that you replicate it in the attached sample and provide us with additional details about the specific scenario in which the issue occurs. This will help us assist you more effectively.

Regards, Kaviyarasan Arumugam.

bd_667955

bd_667955.zip

[lsrmg]

We have checked the mentioned scenario and tried to replicate the reported issue regarding the Trackball overlapping in the SfCartesianChart widget with the updated SDK version 3.27.0. However, we were unable to reproduce the issue on our end. We have attached the sample we used to test the scenario. Please review the attached sample, and if you are still encountering the issue, we kindly request that you replicate it in the attached sample and provide us with additional details about the specific scenario in which the issue occurs. This will help us assist you more effectively.

Thanks for looking into this. And thank you @Shunt22 for also providing additional test-information!

I pasted your code (in the video just used 1 instead of the linear value to show the moving overlay) into an iOS App and the issue is present like in my example above. On Android the problem is also present. I tested it also on real devices and the behavior is the same.

Simulator.Screen.Recording.-.iPhone.16.Pro.-.2024-12-20.at.11.30.23.mp4

Hi @Shunt22 ,

We have replicated the reported issue regarding the Trackball overlapping in the SfCartesianChart widget with the updated SDK version 3.27.0 . The issue is scheduled to be fixed in our upcoming weekly patch release on December 31, 2024. We will notify you here once the release has been rolled out, and we appreciate your patience in the meantime.

Regards,
Kaviyarasan Arumugam.

[lsrmg]

@Kaviyarasansf4298 Thanks a lot for the quick response and the fast rollout of the fix!

[Yuvaraj-Gajaraj]

Hi @lsrmg ,

We have validated the reported issue on our end and found that it is a framework-level issue involving an incorrect depth value for the drawPoints method in the canvas with line and polygon PointMode. This issue has been acknowledged and fixed by the Flutter team.

In Charts, we used the drawPoints method with PointMode.polygon to render a FastLineSeries, enabling the rendering of a large number of data points with high performance. You can track the issue using the links below.

Issue report link: flutter/flutter#160343

Issue fix: flutter/engine#56494

However, you can resolve this with the help of disabling the impeller in your project. Please refer to the following link to disable the impeller.

iOS: https://docs.flutter.dev/perf/impeller#ios

Android: https://docs.flutter.dev/perf/impeller#android

macOS: https://docs.flutter.dev/perf/impeller#macos

We will notify you once the reported issue is fixed and moved to the stable channel by the Flutter team.

Thanks,
Yuvaraj.