Memory leak when updating chart annotation location

Below, I have coded a simplified chart that, when run, causes a memory leak somehow. Are you aware of this issue and why it is caused? Or is there a way to solve it? In this example, I have used a stateful widget for simplicity, but in the real implementation, we use Riverpod for state management. The location gets updated when the user touches and moves on the chart, so it gets updated very frequently and thus builds the memory rapidly as well. I have also included a video of the memory view from the flutter dev tools showing the leak.

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

import 'package:syncfusion_flutter_charts/charts.dart';

class Chart extends StatefulWidget {
const Chart({Key? key}) : super(key: key);

@override
_ChartState createState() => _ChartState();
}

class _ChartState extends State<Chart> {
final zoomPanBehavior = ZoomPanBehavior();

final chartData = List.generate(
1440,
(index) => ChartData(
index.toDouble(),
10,
),
);

double x = 100;
double y = 100;

@override
Widget build(BuildContext context) {
final xAxis = NumericAxis(
title: AxisTitle(
alignment: ChartAlignment.center,
text: 'Time (minutes)',
),
minimum: 0,
maximum: 1440,
visibleMaximum: 60,
interval: 10,
decimalPlaces: 0,
);

final yAxis = NumericAxis(
title: AxisTitle(
alignment: ChartAlignment.center,
text: 'Concentration (mg/ml)',
),
minimum: 0,
maximum: 80,
decimalPlaces: 1,
);

final chart = SfCartesianChart(
zoomPanBehavior: zoomPanBehavior,
onChartTouchInteractionMove: (tapArgs) {
setState(() {
x = tapArgs.position.dx;
y = tapArgs.position.dy;
});
},
series: <LineSeries<ChartData, double>>[
LineSeries<ChartData, double>(
dataSource: chartData,
xValueMapper: (ChartData data, _) => data.xValue,
yValueMapper: (ChartData data, _) => data.yValue,
yAxisName: "",
xAxisName: "",
),
],
primaryXAxis: xAxis,
primaryYAxis: yAxis,
annotations: <CartesianChartAnnotation>[
CartesianChartAnnotation(
widget: Container(
width: 20,
height: 20,
child: Icon(Icons.circle),
),
coordinateUnit: CoordinateUnit.logicalPixel,
region: AnnotationRegion.chart,
x: x, // x position of annotation
y: y, // y position of annotation
),
],
);

return chart;
}
}

class ChartData {
ChartData(this.xValue, this.yValue);

final double xValue;
final double yValue;
}





Attachment: Schermopname_20211018_om_19.08.06_f995563c.zip

1 Reply

YG Yuvaraj Gajaraj Syncfusion Team October 19, 2021 03:10 PM UTC

Hi Luca, 
  
Greetings from Syncfusion. We have analyzed your scenario with the provided sample at our end, and we would like to let you know that using the onChartTouchInteractionMove callback, you have called the setState continuously and the whole state will get updated. This is the reason for the memory leak and while analyzing we found that the memory leak is not higher as you have specified at our end, so kindly ensure you are using the latest version of our chart package. 
  
However, we are continuously working on improving and optimizing the performance of our chart widget at our end and will roll them out in of our upcoming main releases. 
  
Regards, 
Yuvaraj. 


Loader.
Up arrow icon