Incorrect annotation placement for region plotArea? #1800
Description
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!