Animated line chart in the flutter

  Flutter App, library, packages, Packages, UI, Widgets

fl_animated_linechart

Animations

An animated chart library for a flutter.

  • Support for DateTime axis
  • Multiple y-axes, supporting different units
  • Highlight selection
  • Animation of the chart
  • Tested with more than 3000 points and still performing

There are currently two different charts:

  • line chart
  • area chart

Getting Started

Try the sample project or include it in your project.

Chart example with highlight

The highlight for the line chart:

Area Chart example
Area Chart example

Area chart:

Example code:

LineChart lineChart = LineChart.fromDateTimeMaps([line1, line2], [Colors.green, Colors.blue]);

return Scaffold(
  appBar: AppBar(
    title: Text(widget.title),
  ),
  body: Container(
    child: Column(
        mainAxisSize: MainAxisSize.max,
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: [
          Expanded(child: AnimatedLineChart(lineChart)),
        ]
    ),
  ),
);
Example app

The example app can toggle between line chart and area chart.

Download Animated line chart for Flutter Source Code on GitHub