Articles in this section
Category / Section

How to animate the chart series dynamically using the public method (SfCartesianChart) ?

2 mins read

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

 

Animate series GIF

 

For further reference on dynamic series animation feature, please click here.

 

View the sample in GitHub.

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment