GraphUI overlap text and tooltip

[dungnguyen2703]

Bug description

When drawing line chart with many point, then graph UI overlap other widget and tooltip. please see video for more detail

• [ ]

Steps to reproduce

1. Using SfCartesianChart class
2. In series: draw to many point like 200 points
3. Tap to see tooltip
4. Tooltip is below the line chart
5. Add Dropdown button above or below chart
6. Tap on dropdown button to see

Code sample

Code sample

import 'package:flutter/widgets.dart';
import 'package:intl/intl.dart';
import 'package:power_eye/core/style/app_theme.dart';
import 'package:power_eye/l10n/generated/pe_localizations.dart';
import 'package:power_eye/model/extension.dart';
import 'package:power_eye_core/power_eye_core.dart';
import 'package:syncfusion_flutter_charts/charts.dart';

enum CartesianChartType {
  line,
  column,
}

class CartesianChart extends StatelessWidget {
  final CartesianChartType type;
  final int fractionalDigits;
  final DateFormat dateFormat;
  final DateTimeIntervalType intervalType;
  final List<AbstractCartesianData> lines;
  bool get isNotEmpty => lines.any((e) => e.points.length > 1);

  const CartesianChart({
    super.key,
    required this.type,
    required this.fractionalDigits,
    required this.dateFormat,
    required this.intervalType,
    required this.lines,
  });

  @override
  Widget build(BuildContext context) {
    final theme = AppTheme.of(context);
    final localization = PELocalizations.of(context);
    return SfCartesianChart(
      plotAreaBorderColor: theme.chartAxisLineColor,
      tooltipBehavior: TooltipBehavior(
        enable: true,
        textStyle: theme.bodyS,
        duration: 3000,
        decimalPlaces: fractionalDigits,
      ),
      annotations: [
        CartesianChartAnnotation(
          coordinateUnit: CoordinateUnit.percentage,
          region: AnnotationRegion.chart,
          widget: isNotEmpty ? Container() : Text(localization.empty),
          x: '50%',
          y: '50%',
        )
      ],
      zoomPanBehavior: ZoomPanBehavior(
        zoomMode: ZoomMode.xy,
        enablePanning: isNotEmpty,
        enablePinching: isNotEmpty,
      ),
      legend: Legend(
        position: LegendPosition.bottom,
        alignment: ChartAlignment.near,
        isVisible: true,
        legendItemBuilder: (name, series, point, index) {
          final line = lines[index];
          final icon = line.icon;
          return Wrap(
            crossAxisAlignment: WrapCrossAlignment.center,
            children: [
              if (icon != null) ...[
                icon,
                const SizedBox(width: 4),
              ],
              Text(name, style: line.style(context)),
            ],
          );
        },
      ),
      primaryYAxis: NumericAxis(
        axisLine: AxisLine(color: theme.chartAxisLineColor),
        majorGridLines: MajorGridLines(
          color: theme.chartAxisLineColor,
        ),
      ),
      primaryXAxis: DateTimeAxis(
        axisLine: AxisLine(color: theme.chartAxisLineColor),
        majorGridLines: MajorGridLines(color: theme.chartAxisLineColor),
        axisLabelFormatter: (details) {
          return ChartAxisLabel(isNotEmpty ? details.text : '', null);
        },
        dateFormat: dateFormat,
        edgeLabelPlacement: EdgeLabelPlacement.shift,
        intervalType: intervalType,
      ),
      series: lines.map((e) {
        if (type == CartesianChartType.column) {
          return ColumnSeries<AbstractCartesianPoint, DateTime>(
            color: e.color(context),
            animationDuration: 0,
            dataSource: e.points,
            xValueMapper: (AbstractCartesianPoint point, _) => point.x,
            yValueMapper: (AbstractCartesianPoint point, _) => point.y,
            name: e.name,
          );
        } else {
          return FastLineSeries<AbstractCartesianPoint, DateTime>(
            color: e.color(context),
            animationDuration: 0,
            dataSource: e.points,
            xValueMapper: (AbstractCartesianPoint point, _) => point.x,
            yValueMapper: (AbstractCartesianPoint point, _) => point.y,
            name: e.name,
          );
        }
      }).toList(),
    );
  }
}

abstract class AbstractCartesianData {
  // final MonitorParam param;
  final List<AbstractCartesianPoint> points;

  AbstractCartesianData({
    required this.points,
  });

  Color? color(BuildContext context);

  String get name;
  TextStyle? style(BuildContext context);

  Widget? get icon;
}

abstract class AbstractCartesianPoint {
  DateTime get x;
  double get y;
}

class MonitorParamCartesianData extends AbstractCartesianData {
  final MonitorParam param;

  MonitorParamCartesianData({
    required super.points,
    required this.param,
  });

  @override
  Color? color(BuildContext context) {
    return param.color ?? AppTheme.of(context).bodyS.color;
  }

  @override
  Widget? get icon => param.iconImage(height: 16);

  @override
  String get name => param.description;

  @override
  TextStyle? style(BuildContext context) {
    return param.style(AppTheme.of(context).bodyS);
  }
}

class CartesianPoint extends AbstractCartesianPoint {
  @override
  final DateTime x;
  @override
  final double y;

  CartesianPoint({
    required this.x,
    required this.y,
  });
}

Screenshots or Video

Screenshots / Video demonstration

Simulator.Screen.Recording.-.iPhone.16.Pro.Max.-.2024-12-30.at.10.34.52.mp4

Stack Traces

Stack Traces

UI bugs

On which target platforms have you observed this bug?

Android, iOS

Flutter Doctor output

Doctor output

[✓] Flutter (Channel stable, 3.27.1, on macOS 15.1.1 24B91 darwin-x64, locale en-US)
    • Flutter version 3.27.1 on channel stable at /Users/dungnguyen/Desktop/Dev/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 17025dd882 (13 days ago), 2024-12-17 03:23:09 +0900
    • Engine revision cb4b5fff73
    • 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/dungnguyen/Library/Android/sdk
    • Platform android-35, build-tools 35.0.0
    • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 21.0.3+-79915915-b509.11)
    • All Android licenses accepted.

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

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] 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+-79915915-b509.11)

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

[✓] Connected device (3 available)
    • iPhone 16 Pro Max (mobile) • 9C87307E-6BDF-4F9C-9965-9FD8EE36D52F • ios            •
      com.apple.CoreSimulator.SimRuntime.iOS-18-2 (simulator)
    • macOS (desktop)            • macos                                • darwin-x64     • macOS 15.1.1
      24B91 darwin-x64
    • Chrome (web)               • chrome                               • web-javascript • Google Chrome
      131.0.6778.205

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

• No issues found!

[Kaviyarasansf4298]

Hi @dungnguyen2703 ,

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

Thanks,
Kaviyarasan Arumugam.

[dungnguyen2703]

Hi.

Thank you for your support. I will temporary disable the impeller for now (it works). Please notify me when Flutter team fixed their issues.

Regards

[Yuvaraj-Gajaraj]

Hi @dungnguyen2703 ,

The reported issue of the z-axis depth in the drawPoints method point mode as polygon has been fixed and included in the Flutter 3.27.2 SDK and we ensured that it works fine.

Please upgrade the Flutter SDK version to the latest 3.27.2 to avoid the issue. If you have any more questions, please feel free to let us know we are always happy to help you.

3.27.1:

3.27.2:

Flutter change log

Thanks,
Yuvaraj.