Change the series delay duration in Flutter Cartesian charts
In this article we explain how to change the series animation duration and its delay in the Flutter chart.
Animation duration
The SfCartesianChart widget provides animation support to the series by default. The animationDuration property in the chart series is used to control the speed of the animation and its default value is 1500. Find the code below to accomplish this.
//Initialize the data source
final List<ChartSampleData> chartData = <ChartSampleData> [
ChartSampleData(
x: 'Jan',
y: 4500),
ChartSampleData(
x: 'Feb',
y: 1000),
ChartSampleData(
x: 'March',
y: 2500),
ChartSampleData(
x: 'April',
y: 1000),
ChartSampleData(
x: 'May',
y: 8500),
ChartSampleData(
x: 'June',
y: 1400)
];
//Initialize the chart widget with required properties
SfCartesianChart(
series: <LineSeries<dynamic, dynamic>> [
LineSeries<dynamic, dynamic> (
animationDuration: 2000,
dataSource: chartData,
xValueMapper: (ChartData data, _) => data.x,
yValueMapper: (ChartData data, _) => data.y)
],
)
class ChartSampleData {
ChartSampleData({this.x, this.y});
final String? x;
final num? y;
}
To render the chart without animation, you can specify the animationDuration as 0.
Animation delay
Animation delay property is used to delay the series animation, for example if the series animationDuration property is set to 2000 and animationDelay is set to 3000 then the series get start render after the 3000 milliseconds and its default value is 0
Here we are going to see how to set the animation delay to the series.
Step 1: Initialize the data source for chart.
final List<ChartSampleData> chartData = <ChartSampleData> [
ChartSampleData(
x: 'Jan',
y: 4500,
secondSeriesYValue: 1000),
ChartSampleData(
x: 'Feb',
y: 1000,
secondSeriesYValue: 3000),
ChartSampleData(
x: 'March',
y: 2500,
secondSeriesYValue: 1000),
ChartSampleData(
x: 'April',
y: 1000,
secondSeriesYValue: 7000),
ChartSampleData(
x: 'May',
y: 8500,
secondSeriesYValue: 5000),
ChartSampleData(
x: 'June',
y: 1400,
secondSeriesYValue: 7000)
];
class ChartSampleData {
ChartSampleData(
{this.x, this.y, this.secondSeriesYValue});
final String? x;
final num? y;
final num? secondSeriesYValue;
}
Step 2: Then initialize the SfCartesianChart widget with required properties and bind the data source to the series. Here we have initialized two series (column and line) for understanding how the animation delay works. Trendline and technical indicators also supports for animation delay.
SfCartesianChart( primaryXAxis: CategoryAxis(), primaryYAxis: NumericAxis(numberFormat: NumberFormat.compact()), series: <ColumnSeries<ChartSampleData, String>> [ ColumnSeries<ChartSampleData, String> ( dataSource: chartData, xValueMapper: (ChartSampleData sales, _) => sales.x, yValueMapper: (ChartSampleData sales, _) => sales.y, ), LineSeries<ChartSampleData, String> ( dataSource: chartData, xValueMapper: (ChartSampleData sales, _) => sales.x, yValueMapper: (ChartSampleData sales, _) => sales.secondSeriesYValue, ), ], )
Step 3: Then set the animationDelay property value as 3000 to the line series, so that line series will start to animate after 3000 milliseconds.
SfCartesianChart( primaryXAxis: CategoryAxis(), primaryYAxis: NumericAxis(numberFormat: NumberFormat.compact()), series: <ColumnSeries<ChartSampleData, String>> [ ColumnSeries<ChartSampleData, String> ( animationDuration: 3000, dataSource: chartData, xValueMapper: (ChartSampleData sales, _) => sales.x, yValueMapper: (ChartSampleData sales, _) => sales.y, ), LineSeries<ChartSampleData, String> ( dataSource: chartData, animationDuration: 4000, // Set animationDelay to 3000 milliseconds for delay the series rendering. animationDelay: 3000, xValueMapper: (ChartSampleData sales, _) => sales.x, yValueMapper: (ChartSampleData sales, _) => sales.secondSeriesYValue, ), ], )
The animationDuration and animationDelay takes value in milliseconds.
