We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

animation is working differently from the demo we are seeing in SfCartesianChart for line series

Hi ,
I have implemented animation duration but its working differently . I have attached the video please check .
I want this type of animation https://help.syncfusion.com/flutter/cartesian-charts/series-customization#animation-delay .

Sample code

(ChartTouchInteractionArgs args) =>
plotAreaBorderWidth: 0,
//for display all data
// onActualRangeChanged: (ActualRangeChangedArgs args) {
// if (args.orientation == AxisOrientation.horizontal) {
// oldAxisVisibleMin = args.visibleMin.toDouble();
// oldAxisVisibleMax = args.visibleMax.toDouble();
// }
// },
// enableAxisAnimation: true,
// zoomPanBehavior: ZoomPanBehavior(
// // Enables pinch zooming
// enablePanning: true,
// ),
primaryXAxis: CategoryAxis(
//for display all data
// interval: 1.0,
// visibleMinimum: oldAxisVisibleMin,
// visibleMaximum: oldAxisVisibleMax,
majorGridLines: const MajorGridLines(
width: 0,
color: AppColors.white,
majorTickLines: const MajorTickLines(
width: 0,
color: AppColors.white,
plotOffset: 20.0,
labelStyle: const TextStyle(
fontSize: 10,
fontFamily: 'Lato',
fontWeight: FontWeight.w400,
color: AppColors.black),
labelPosition: ChartDataLabelPosition.outside,
edgeLabelPlacement: EdgeLabelPlacement.none,
labelAlignment: LabelAlignment.center,
labelPlacement: LabelPlacement.onTicks,
arrangeByIndex: true,
tickPosition: TickPosition.outside,
axisLine: const AxisLine(
color: AppColors.white,
width: 0,
primaryYAxis: NumericAxis(
minimum: 0.0,
isVisible: false,
plotOffset: 20.0,
plotBands: <PlotBand>[
isVisible: true,
start: widget.avg.toInt(),
end: widget.avg.toInt(),
borderWidth: 0.5,
borderColor: AppColors.grey8,
tooltipBehavior: TooltipBehavior(
canShowMarker: true,
enable: true,
onTooltipRender: (TooltipArgs args) => tool(args),
// Callback to customize the marker
onMarkerRender: (MarkerRenderArgs args) =>
series: <ChartSeries>[
LineSeries<SalesData, String>(
(ChartSeries<dynamic, dynamic> series) {
return CustomLineSeriesRenderer(
series, getfirstmarkerPoint);
animationDuration: 2000,
(ChartSeriesController controller) {
_chartSeriesController = controller;
enableTooltip: true,
markerSettings: const MarkerSettings(
shape: DataMarkerType.circle,
isVisible: true,
width: 12.0,
height: 12.0),
dataSource: personalMetricData,
pointColorMapper: (SalesData sales, _) =>
xValueMapper: (SalesData sales, _) => sales.date,
yValueMapper: (SalesData sales, _) =>

Attachment: Simulator_Screen_Recording__iPhone_11__20221121_at_13.25.43.mp4_a6d43ab7.zip

1 Reply

SK Sriram Kiran Senthilkumar Syncfusion Team November 22, 2022 11:08 AM

Hi Vikram,

Greetings from Syncfusion.

We tried to replicate the reported issue regarding the “animation is performing differently than the expected initial render animation”. Unfortunately, the animation was working perfectly at our end. As we are not exactly sure in what scenario the issue is replicating, we kindly request you to try to replicate the reported issue in the below attached test sample and revert us so that it will help us assist you in a better way.


Sriram Kiran

Attachment: f178982_cfdd5ab9.zip

Live Chat Icon For mobile
Up arrow icon