Charts in Flutter

Charts in Flutter are required for the Graphical Representation of the data, making it easier for the users to understand the data and analyze it.

Basically, Charts are easy to read in comparison to reading a huge set of data.

You may also check our Flutter app development company.

Here are some types of charts-

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

Implementation of Charts in Flutter

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

In order to get the updated version of the dependency, you can check pub.dev.

charts_flutter: ^0.10.0

1	charts_flutter: ^0.10.0

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

Bar Chart

A Bar Chart is a way of representing data through rectangular bars and it is also 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 order 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 one which represents the data in the form of 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

A pie chart is a chart that is circular in 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.

Therefore, in this way, you can create different types of charts as per your requirement in the Flutter Application.

Conclusion

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

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

Here are some of the other blogs you can check – https://mobikul.com/blog/

Thank you for reading!!

Tanya Goel 27 April 2023

. . .

Charts in Flutter

Implementation of Charts in Flutter

Bar Chart

Line Chart

Pie Chart

Conclusion

Leave a Comment Cancel Reply

Message Sent!