How to create Flutter animated charts using the SfCartesianChart ?
In this article, we explain how to create animated charts using series animation, animation method, and dynamic data point animation in Flutter.
Series animation
Our Flutter Cartesian chart provides animation support by default. The animationDuration property in the chart series is used to control the speed of the animation and its default value is 1500. To render the chart without animation, set the animationDuration to 0.
SfCartesianChart( series: <LineSeries<_SalesData, num>>[ LineSeries<_SalesData, num>( // Animation duration for this line series set to 2000 animationDuration: 2000, dataSource: data, xValueMapper: (_SalesData sales, _) => sales.year, yValueMapper: (_SalesData sales, _) => sales.sales, ) ] ),
Screenshot
Animation method
Our Cartesian chart widget provides a public method called animate for animating the Cartesian series dynamically. The following steps explain how to implement dynamic animation:
Step 1: First, initialize a global variable of type ChartSeriesController, which can be used to call the animate method.
// Initialized the global variable ChartSeriesController? _chartSeriesController;
Step 2: Initialize SfCartesianChart widget with required data source and series type. Here we use the line series and in the onRenderCreated event, assign the controller argument to the _chartSeriesController.
SfCartesianChart(
series: <LineSeries<_SalesData, num>>[
LineSeries<_SalesData, num>(
// Animation duration for this line series
animationDuration: 2000,
// Assigning the controller to the global variable
onRenderCreated: (ChartSeriesController controller){
_chartSeriesController = controller;
},
dataSource: data,
xValueMapper: (_SalesData sales, _) => sales.year,
yValueMapper: (_SalesData sales, _) => sales.sales,
)
]
),
Step 3: Define a button and in its onPressed event, call the animate method using the _chartSeriesController to perform the animation for line series dynamically.
RaisedButton(
child: Text(
'Animate line series',
),
onPressed: () {
// Call the animate method for performing dynamic animation
_chartSeriesController?.animate();
},
),
Dynamic data point animation
Our Cartesian chart provides animation support when dynamically adding data to the chart. When a data point is added dynamically, the new data point gets animated.
Follow these steps to add data points dynamically:
Step 1: Declare the variable named data globally to store chart data and initialize the data source in the initState() method.
late List<_SalesData> data;
int count = 11;
@override
void initState() {
data = [
_SalesData(1, 35),
_SalesData(2, 28),
_SalesData(3, 34),
_SalesData(4, 26),
_SalesData(5, 35),
_SalesData(6, 28),
_SalesData(7, 32),
_SalesData(8, 28),
_SalesData(9, 32),
_SalesData(10, 35),
];
super.initState();
}
Step 2: Define the method to refresh the chart data with newly added points.
// Method to assign the new value to the data variable and rebuilds the chart
addChartData() {
setState(() {
data = getChartData();
});
}
Step 3: Define the getChartData() method, which returns the randomly generated data.
// Method returns random data
List<_SalesData> getChartData() {
data.add(_SalesData(count, getRandomInt(20, 50)));
count = count + 1;
return data;
}
// Method to generate random numbers in the given range
num getRandomInt(num min, num max) {
final Random random = Random();
return min + random.nextInt(max - min);
}
Step 4: Define a button widget and in its onPressed event, call the addChartData() method to add a new point. The chart will animate the new data point.
RaisedButton(
child: Text(
'Add data point',
),
onPressed: () {
addChartData();
},
),
Screenshot
