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 get from 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 _MyHomePageState to 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’

: The thing being measured; for example, ‘type of vehicle’ Measure: The numerical value observed; for example, ‘number of wheels’

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.

: 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)]

: 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.