Bar charts are useful ways to display data to a user, and with the use of the charts_flutter charting library, it’s easier than ever!

This article will see us mapping World of Warcraft subscriber numbers between the years of 2008-2015.

Creating a New Flutter Project

As always, we’ll start off by setting up a new project and adding the charts_flutter plugin:

# New Flutter project
$ flutter create bar_wow

# Open this up inside of VS Code
$ cd bar_wow && code .

Adding the charts_flutter plugin

Next up, we’ll need to add the charts_flutter plugin within our pubspec.yaml:

dependencies:
  flutter:
    sdk: flutter

  charts_flutter: ^0.8.1

We can now go ahead and run this on the iOS or Android simulator/device of your choice.

Scaffolding Our Application

Let’s replace everything inside of main.dart with a MaterialApp that points at a HomePage which can be found at home.dart:

import 'package:bar_wow/home.dart';
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomePage(),
    );
  }
}

Next up, we’ll need to create the HomePage:

import 'package:flutter/material.dart';

class HomePage extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.red,
        title: Text("World of Warcraft Subscribers"),
      ),
      body: Center(
          child: Text("Hello, Charts!"),
        ),
    );
  }
}

Now that we’ve established a base application, we can go ahead and create the model for our bar chart data.

Subscriber Model

Our bar chart will be focused on showing the amount of World of Warcraft subscribers for a particular year, therefore, our model would look something like this:

import 'package:charts_flutter/flutter.dart' as charts;
import 'package:flutter/foundation.dart';

class SubscriberSeries {
  final String year;
  final int subscribers;
  final charts.Color barColor;

  SubscriberSeries(
      {@required this.year,
      @required this.subscribers,
      @required this.barColor});
}

This allows us to represent our data in the most simplistic form.

Creating the Data

For example’s sake, we’re going to be creating the data inside of the HomePage as a List<SubscriberSeries>:

import 'package:bar_wow/subscriber_chart.dart';
import 'package:charts_flutter/flutter.dart' as charts;
import 'package:bar_wow/subscriber_series.dart';
import 'package:flutter/material.dart';

class HomePage extends StatelessWidget {
  final List<SubscriberSeries> data = [
    SubscriberSeries(
      year: "2008",
      subscribers: 10000000,
      barColor: charts.ColorUtil.fromDartColor(Colors.blue),
    ),
    SubscriberSeries(
      year: "2009",
      subscribers: 11000000,
      barColor: charts.ColorUtil.fromDartColor(Colors.blue),
    ),
    SubscriberSeries(
      year: "2010",
      subscribers: 12000000,
      barColor: charts.ColorUtil.fromDartColor(Colors.blue),
    ),
    SubscriberSeries(
      year: "2011",
      subscribers: 10000000,
      barColor: charts.ColorUtil.fromDartColor(Colors.blue),
    ),
    SubscriberSeries(
      year: "2012",
      subscribers: 8500000,
      barColor: charts.ColorUtil.fromDartColor(Colors.blue),
    ),
    SubscriberSeries(
      year: "2013",
      subscribers: 7700000,
      barColor: charts.ColorUtil.fromDartColor(Colors.blue),
    ),
    SubscriberSeries(
      year: "2014",
      subscribers: 7600000,
      barColor: charts.ColorUtil.fromDartColor(Colors.blue),
    ),
    SubscriberSeries(
      year: "2015",
      subscribers: 5500000,
      barColor: charts.ColorUtil.fromDartColor(Colors.red),
    ),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.red,
        title: Text("World of Warcraft Subscribers"),
      ),
      body: Center(
          child: Text("Hello, Charts!"),
        ),
    );
  }
}

Now that we’ve got our data, all we need to is create the bar chart!

Creating the Bar Chart

Inside of subscriber_chart.dart, create a new StatelessWidget named SubscriberChart that takes in the SubscriberSeries as a prop:

import 'package:charts_flutter/flutter.dart' as charts;
import 'package:bar_wow/subscriber_series.dart';
import 'package:flutter/material.dart';

class SubscriberChart extends StatelessWidget {
  final List<SubscriberSeries> data;

  SubscriberChart({@required this.data});
}

We can then use this data to build our charts.Series like so:

@override
Widget build(BuildContext context) {
  List<charts.Series<SubscriberSeries, String>> series = [
    charts.Series(
      id: "Subscribers",
      data: data,
      domainFn: (SubscriberSeries series, _) => series.year,
      measureFn: (SubscriberSeries series, _) => series.subscribers,
      colorFn: (SubscriberSeries series, _) => series.barColor)
  ];
}

The domainFn and measureFn is used to compare the subscribers data for that year. We’re also using the colorFn to potentially pass a barColor which we did like so:

SubscriberSeries(
  year: "2008",
  subscribers: 10000000,
  barColor: charts.ColorUtil.fromDartColor(Colors.blue),
),

We may want to make the barColor optional with a default of Colors.blue (or a color of your choice) in a production application, I’ve opted to make one bar red and the rest blue in this instance.

Let’s update the build function to return our chart:

import 'package:charts_flutter/flutter.dart' as charts;
import 'package:bar_wow/subscriber_series.dart';
import 'package:flutter/material.dart';

class SubscriberChart extends StatelessWidget {
  final List<SubscriberSeries> data;

  SubscriberChart({@required this.data});

  @override
  Widget build(BuildContext context) {
    List<charts.Series<SubscriberSeries, String>> series = [
      charts.Series(
          id: "Subscribers",
          data: data,
          domainFn: (SubscriberSeries series, _) => series.year,
          measureFn: (SubscriberSeries series, _) => series.subscribers,
          colorFn: (SubscriberSeries series, _) => series.barColor)
    ];

    return Container(
      height: 400,
      padding: EdgeInsets.all(20),
      child: Card(
        child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Column(
            children: <Widget>[
              Text(
                "World of Warcraft Subscribers by Year",
                style: Theme.of(context).textTheme.body2,
              ),
              Expanded(
                child: charts.BarChart(series, animate: true),
              )
            ],
          ),
        ),
      ),
    );
  }
}

What did we do here? We added some markup to our charts.BarChart by surrounding it with a Card. The key thing to note is that we’re passing the series as a required parameter to charts.BarChart:

charts.BarChart(
  series,
  animate: true
)

Wiring it All Up!

Finally, head over to home.dart and change the build to use the SubscriberChart like so:

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      backgroundColor: Colors.red,
      title: Text("World of Warcraft Subscribers"),
    ),
    body: Center(
        child: SubscriberChart(
      data: data,
    )),
  );
}

This gives us the following chart: