Incorrect annotation placement for region plotArea?

[DrNiels]

In my app, I want to use annotations with point as unit. These annotations should only be visible when within the plot area, not above the axis. I have assumed that I simply set region to plotArea, but that does not work.

Consider the following example:

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

bool detailed = false;

void main() async {
  runApp(
    MaterialApp(
      home: TestChart(),
    ),
  );
}

class TestChart extends StatefulWidget {
  static List<Offset> allData = [
    Offset(0, 0),
    Offset(1, 10),
    Offset(2, 2),
    Offset(3, 13),
    Offset(4, 4),
    Offset(5, 15),
    Offset(6, 6),
    Offset(7, 17),
    Offset(8, 8),
    Offset(9, 19),
    Offset(10, 10),
  ];

  _TestChartState createState() => _TestChartState();
}

class _TestChartState extends State<TestChart> {
  bool usePlotArea = false;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        SfCartesianChart(
          annotations: TestChart.allData
              .map(
                (Offset offset) => CartesianChartAnnotation(
                  x: offset.dx,
                  y: offset.dy,
                  widget: Container(
                    height: 10,
                    width: 10,
                    color: Colors.red,
                  ),
                  coordinateUnit: CoordinateUnit.point,
                  region: this.usePlotArea
                      ? AnnotationRegion.plotArea
                      : AnnotationRegion.chart,
                ),
              )
              .toList(),
          primaryYAxis: NumericAxis(
            minimum: 0,
            maximum: 20,
            interval: 1,
          ),
          primaryXAxis: NumericAxis(
            name: 'xAxis',
            minimum: 0,
            maximum: 10,
            initialVisibleMinimum: 3.07,
            initialVisibleMaximum: 10,
          ),
          tooltipBehavior: TooltipBehavior(
            enable: true,
          ),
          zoomPanBehavior: ZoomPanBehavior(
            enablePanning: true,
          ),
          onActualRangeChanged: (rangeChangedArgs) {
            WidgetsBinding.instance.addPostFrameCallback((_) {
              setState(() {});
            });
          },
        ),
        Material(
          child: Switch(
              value: this.usePlotArea,
              onChanged: (bool value) {
                setState(() {
                  this.usePlotArea = value;
                });
              }),
        ),
      ],
    );
  }
}

In the initial state, the region of the annotation is set to graph. The annotations are correctly placed, but they are rendered above the axis. I assume this is working as intended as the region is set to graph, though not my desired outcome:

I would assume this to be fixed by changing the region to plotArea. While this prevents the annotations from being visible above the axis, they are not positioned correctly and move slightly to the left. This could be the axis width...

One more wish related to the issue: When I pan the area, I need to run setState to update the position of the annotations. It would be nice if annotations that are placed via CoordinateUnit.point would move along while panning.

I use version 25.1.39+1 of syncfusion_flutter_charts on web

Output of flutter doctor:

Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, 3.19.5, on Microsoft Windows [Version 10.0.19045.4291], locale de-DE)
[√] Windows Version (Installed version of Windows is version 10 or higher)
[√] Android toolchain - develop for Android devices (Android SDK version 34.0.0-rc4)
[√] Chrome - develop for the web
[√] Visual Studio - develop Windows apps (Visual Studio Community 2022 17.8.6)
[√] Android Studio (version 2021.2)
[√] VS Code, 64-bit edition (version 1.87.2)
[√] Connected device (3 available)
[√] Network resources

• No issues found!  

[PreethikaSelvam]

Hi @DrNiels,

We can replicate the reported issue regarding the 'annotation widget position difference occurs when placing it based on 'point' as the coordinate unit, compared to the plot area and chart area'. This issue is scheduled to be fixed in our upcoming weekly release which is scheduled on April 30, 2024. We will update you here once the release is rolled out and we appreciate your patience until then.

Regards,

Preethika Selvam.

[PreethikaSelvam]

Hi @DrNiels,

We would like to let you know that the reported issue is fixed and rolled out in our patch release. We kindly request you to upgrade the syncfusion_flutter_charts package to the latest version below.

Version: https://pub.dev/packages/syncfusion_flutter_charts/versions/25.1.42+1

Root cause: Missed to consider the plot area offset while converting the annotation position from pixel to point.

If you have any further queries, please feel free to reach out to us.

Regards,

Preethika Selvam.

[DrNiels]

Seems to work as intended, thank you for the fix!