Charts in Flutter

Charts in Flutter, the Charts are used for the Graphical Representation of the data, making it easier for the users to understand the data and analyze it. Charts are easy to read in comparison to read a huge set of data.

There are various type of charts like-

Bar Chart
Line Chart
Pie Chart
Scatter Plot Chart
Time Series Chart

Implementation of Charts in Flutter

First of all, you will have to add the charts_flutter dependency in pubspec.yaml file of our project.

To get the updated version of the dependency, you can check here.

charts_flutter: ^0.10.0

1	charts_flutter: ^0.10.0

Run the pub get command, to include it the project.

Bar Chart

A Bar Chart is a way of representing data through rectangular bars and it can also be used to make the chart in either Horizontal or Vertical Direction.

By default, Bar Chart is created in Vertical Direction.

class MyHomePage extends StatelessWidget {
  final List<charts.Series> seriesList;

  const MyHomePage({Key key, this.seriesList}) : super(key: key);

  List<charts.Series<Population, String>> _populationDataSet() {
    final data = [
      new Population('2018', 1352642280),
      new Population('2019', 1366417754),
      new Population('2020', 1380004385),
      new Population('2021', 1393409038),
    ];

    return [
      new charts.Series<Population, String>(
        id: 'Population of India',
        colorFn: (_, __) => charts.Color.fromHex(code: "#7DD0D7"),
        domainFn: (Population sales, _) => sales.year,
        measureFn: (Population sales, _) => sales.population,
        data: data,
      )
    ];
  }

  @override
  Widget build(BuildContext context) {
    MyHomePage(seriesList: seriesList);
    return Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.black,
          title: Text("Bar Chart"),
        ),
        body: Center(
          child: Container(
              width: MediaQuery.of(context).size.width,
              height: MediaQuery.of(context).size.height / 1.5,
              child: charts.BarChart(
                _populationDataSet(),
              )),
        ));
  }
}

class Population {
  final String year;
  final int population;

  Population(this.year, this.population);
}

class MyHomePage extends StatelessWidget {

final List<charts.Series> seriesList;

const MyHomePage({Key key, this.seriesList}) : super(key: key);

List<charts.Series<Population, String>> _populationDataSet() {

final data = [

new Population('2018', 1352642280),

new Population('2019', 1366417754),

new Population('2020', 1380004385),

new Population('2021', 1393409038),

];

return [

new charts.Series<Population, String>(

id: 'Population of India',

colorFn: (_, __) => charts.Color.fromHex(code: "#7DD0D7"),

domainFn: (Population sales, _) => sales.year,

measureFn: (Population sales, _) => sales.population,

data: data,

)

];

}

@override

Widget build(BuildContext context) {

MyHomePage(seriesList: seriesList);

return Scaffold(

appBar: AppBar(

backgroundColor: Colors.black,

title: Text("Bar Chart"),

body: Center(

child: Container(

width: MediaQuery.of(context).size.width,

height: MediaQuery.of(context).size.height / 1.5,

child: charts.BarChart(

_populationDataSet(),

)),

));

}

class Population {

final String year;

final int population;

Population(this.year, this.population);

}

If you want to add labels, within our rectangular bars, we can add a property named ‘barRendererDecorator’.

barRendererDecorator: new charts.BarLabelDecorator<String>()

1	barRendererDecorator: new charts.BarLabelDecorator<String>()

To make the Horizontal Bar Chart, you can set the vertical property to ‘false’.

Line Chart

Line Chart is the one which represents the data in the form lines.

Container(
              width: MediaQuery.of(context).size.width,
              height: MediaQuery.of(context).size.height / 1.5,
              child: charts.LineChart(
                _populationDataSet(),
              )),

Container(

width: MediaQuery.of(context).size.width,

height: MediaQuery.of(context).size.height / 1.5,

child: charts.LineChart(

_populationDataSet(),

)),

Pie Chart

Pie chart is a chart which is in circular shape and is divided into multiple sections based on the percentage.

Container(
              width: MediaQuery.of(context).size.width,
              height: MediaQuery.of(context).size.height / 1.5,
              child: charts.PieChart(
                _populationDataSet(),
                  defaultRenderer: charts.ArcRendererConfig(arcRendererDecorators: [
                     charts.ArcLabelDecorator(
                        labelPosition: charts.ArcLabelPosition.inside)
                  ])

              )),

Container(

width: MediaQuery.of(context).size.width,

height: MediaQuery.of(context).size.height / 1.5,

child: charts.PieChart(

_populationDataSet(),

defaultRenderer: charts.ArcRendererConfig(arcRendererDecorators: [

charts.ArcLabelDecorator(

labelPosition: charts.ArcLabelPosition.inside)

])

)),

To add the labels in the Pie Chart, we can use the ‘labelPosition’ property of ‘defaultRenderer’ .

You can even choose to add your labels inside or outside the Pie Chart as per your requirement.

Conclusion

In this blog, we have read about the Charts in Flutter.

I hope it will help you out in understanding and getting a brief idea about it.

Thank you for reading!!

Tanya Goel 30 June 2021

. . .

Charts in Flutter

Implementation of Charts in Flutter

Bar Chart

Line Chart

Pie Chart

Conclusion

Leave a Comment Cancel Reply

Message Sent!