How to animate the chart series dynamically using the public method (SfCartesianChart) ?
In this article, we described how to animate the cartesian chart series dynamically using the public method.
The Flutter Cartesian Chart widget provides support to dynamically animate cartesian chart series using the public method. A Public method is a method that can be called by using the class object where they are defined. The public method used to dynamically animate the cartesian series in the chart is the animate() method of the ChartSeriesController class.
The following steps explains how to dynamically animate the chart series using the animate() method:
Step 1: First, initialize a global object or variable of type ChartSeriesController, in which the animate() method can be called.
// Initialized a global variable for ChartSeriesController class ChartSeriesController? _chartSeriesController;
Step 2: Then, initialize the SfCartesianChart with the required properties and also define any series as per your wish. Here, we have defined a column series for the chart and in the series onRenderCreated event, assign the controller argument from the event to the globally initialized ChartSeriesController’s variable or object(_chartSeriesController).
late TooltipBehavior _tooltipBehavior;
@override
void initState(){
_tooltipBehavior = TooltipBehavior(enable: true);
super.initState();
}
@override
Widget build(BuildContext context) {
return SfCartesianChart(
primaryXAxis: CategoryAxis(
majorGridLines: MajorGridLines(width: 0),
edgeLabelPlacement: EdgeLabelPlacement.shift),
primaryYAxis: NumericAxis(
minimum: 0,
interval: 25,
maximum: 150,
majorGridLines: MajorGridLines(width: 0)),
series: <ColumnSeries<ChartSampleData, String>>[
// Column series defined
ColumnSeries<ChartSampleData, String>(
// Provided animation duration for the series
animationDuration: 2000,
// Assigning the chart series controller for the series
onRendererCreated: (ChartSeriesController controller) {
_chartSeriesController = controller;
},
dataSource: chartData,
xValueMapper: (ChartSampleData sales, _) => sales.x,
yValueMapper: (ChartSampleData sales, _) => sales.y,
name: 'Unit Sold'),
],
tooltipBehavior: _tooltipBehavior ,
)
Step 3: Define a RaisedButton and in its onPressed method, call the animate() method using the _chartSeriesController to perform the initial rendering animation of the column series dynamically when the button is pressed.
RaisedButton(
onPressed: () {
// Called the animate() method to animate the column series
_chartSeriesController?.animate();
},
child: Text(
'Animate column series',
textScaleFactor: 1,
style: TextStyle(
color: Colors.white
)
),
)
Thus, when pressing the animate column series button, the column series gets animated.
Screenshot
For further reference on dynamic series animation feature, please click here.
