Beautiful, animated charts for Flutter

We are super excited to announce a fully-featured, animated charting library for Flutter!

Flutter enables developers to craft high-quality mobile app user interfaces for iOS and Android. Many of the Flutter apps being created internally at Google present large amounts of data. Doing that efficiently requires not just regular UI widgets, but lots of elegant charts. Back when we set out to create a Flutter charting library we quickly discovered that it was no easy feat. So it is with much joy that we are now able to announce the ‘Charts for Flutter’-library as open source, available for all Flutter apps. Checkout charts_flutter!

The need for animation

One of the core complexities we discovered early was that great charts don’t just display data statically. For them to be engaging they need to be “alive”. For example, to establish page transitions they need to animate in, and when new data is loaded they need to gradually animate to the new state so it’s clear to the user what the changes are:

Using animation to gradually bring in changes to the dataset

Building animated charts is not as simple as it may seem. For a “behind the curtain” tale, check out Mikkel’s great post on the engineering challenge our team tackled when we built the initial library.

Supported chart types

Charts for Flutter supports three chart types, each with several configuration options:

• Bar charts, incl. support for stacking several data series, showing target lines, and rendering the bars horizontally
• Line charts, including support for time series
• Pie and ‘donut’ charts

Here are a few sample charts created with Charts for Flutter:

Bar chart with three grouped series

Bar chart with grouped and stacked bars

Donut chart

Line chart with custom dash-line patterns

Bar chart with custom legend using symbols

For more details, see the Charts Gallery app located inside the /example/ folder of the repo, and in the online gallery.

Getting started with Charts for Flutter

It’s pretty easy to use Charts for Flutter! We’ll start by creating a new Flutter app, and then add a bar chart to that to visualize the number of clicks: two bars visualizing the past number of clicks (fixed values), and one bar for the current year (tied to the current state of the _counter variable):

The Flutter counter app extended with a bar chart

Start by declaring a dependency on the package: Open the pubspec.yaml file, and add an entry for charts_flutter in the dependencies section.

dependencies:
  flutter:
    sdk: flutter
  charts_flutter: ^0.2.0

Now run your IDE’s function to get packages, or run flutter packages getfrom the terminal.

Next, define a data type to hold the data for each bar column. Since we want years on the x-axis and counts on the y-axis, we create a class with a String and an int field:

Then, to support specifying a color for each year, we add a charts color field, which we convert from Flutter’s corresponding Color type:

Next, we will update the build() method of _MyHomePageStateto create the chart data set, using the _counter variable:

Next, we need to wrap data in a Series. Let’s review a few core charting concepts first:

• Domain: The thing being measured; for example, ‘type of vehicle’
• Measure: The numerical value observed; for example, ‘number of wheels’
• Data point: A measure for a domain; for example, (‘car’, 4). Sometimes referred to as a datum.
• Series: A sequenced collection of individual data points; for example [(‘car’, 4), (‘bicycle’, 2)]
• Id: A unique identifier for a single series; used for charts that render several series; for example ‘Typical number of wheels’, and ‘Maximum number of wheels’

With that we can create our data series, setting the year component of our data class to the domain, the clicks component to the measure:

And then we are ready to create the chart; to control its padding and size we wrap it in Padding and SizedBox:

And then finally we can add the chart below the two text labels:

Presto, a nice bar chart!

The complete code is also available for review.

We look forward to seeing what you might build with Charts for Flutter. Should you have any suggestions, or find any bugs, please file an issue in our tracker! Should Charts for Flutter not match your requirements, you may also want to take a look at some of the other charting packages in Pub, such as flutter_circular_chart, flutter_charts, and flutter_sparkline.