Flutter - Working with Charts - GeeksforGeeks

15 Feb, 2021
The syncfusion_flutter_charts library in Flutter is used to handle charts. Charts can be very useful while depicting data in visual form. These packages come with a wide range of beautiful and high-performance charts. It comes with various Cartesian or circular charts with smooth interaction and beautiful animations which are completely customizable and extendable.
In this article, we will look into the same, and with the help of a simple application. To build the app follow the below steps:
Add the dependency to the pubspec.yaml file
Import the dependency to the main.dart file.
Use a StatelessWidget that extends to a StatefulWidget to structure the application
Design function that controls the data in the chart
Call the required type of built-in chart
Let’s discuss these steps in detail.
To add the dependency to the pubspec.yaml file, add syncfusion_flutter_charts in the dependencies section as shown below:
To import the dependency to the main.dart file, use the following code:
import 'package:syncfusion_flutter_charts/charts.dart';

Create a class with a StateFulWidget that further extends to a StatelessWidget to give the app a basic structure with appbar and a body that can hold content as shown below:
Dart
class _ChartApp extends StatelessWidget {  @override  Widget build(BuildContext context) {    return MaterialApp(      title: 'Charts in Flutter',      theme: ThemeData(primarySwatch: Colors.blue),      home: _MyHomePage(),    );  }}  class _MyHomePage extends StatefulWidget {  _MyHomePage({Key key}) : super(key: key);    @override  _MyHomePageState createState() => _MyHomePageState();}  class _MyHomePageState extends State<_MyHomePage> {  @override  Widget build(BuildContext context) {    return Scaffold(        appBar: AppBar(          title: const Text('GeeksForGeeks'),          backgroundColor: Colors.green,        ),        body:   }}
Here we will construct a function that  _Infections(), that takes in the COVID-19 data from a fixed set of data points and implement them on the chart based on the month and no. of infections that month. This can be done as follows:
Dart
class _Infections {  _Infections(this.year, this.victims);    final String year;  final double victims;}
This function can be directly used in the body of the application as shown below:
Dart
body: SfCartesianChart(            primaryXAxis: CategoryAxis(),            // Chart title            title: ChartTitle(text: 'Monthly Covid-19 Infections'),            // Enable legend            legend: Legend(isVisible: true),            // Enable tooltip            tooltipBehavior: TooltipBehavior(enable: true),            series: <ChartSeries<_Infections, String>>[              LineSeries<_Infections, String>(                  dataSource: <_Infections>[                    _Infections('Jan', 35000),                    _Infections('Feb', 28000),                    _Infections('Mar', 34000),                    _Infections('Apr', 32000),                    _Infections('May', 40000),                    _Infections('Jun', 60000)                  ],                  xValueMapper: (_Infections victims, _) => victims.year,                  yValueMapper: (_Infections victims, _) => victims.victims,                  // Enable data label                  dataLabelSettings: DataLabelSettings(isVisible: true))            ]));  }}
Complete Source Code:
Dart
import 'package:flutter/material.dart';import 'package:syncfusion_flutter_charts/charts.dart';  void main() {  return runApp(_ChartApp());}  class _ChartApp extends StatelessWidget {  @override  Widget build(BuildContext context) {    return MaterialApp(      title: 'Charts in Flutter',      theme: ThemeData(primarySwatch: Colors.blue),      home: _MyHomePage(),    );  }}  class _MyHomePage extends StatefulWidget {  // ignore: prefer_const_constructors_in_immutables  _MyHomePage({Key key}) : super(key: key);    @override  _MyHomePageState createState() => _MyHomePageState();}  class _MyHomePageState extends State<_MyHomePage> {  @override  Widget build(BuildContext context) {    return Scaffold(        appBar: AppBar(          title: const Text('GeeksForGeeks'),          backgroundColor: Colors.green,        ),        body: SfCartesianChart(            primaryXAxis: CategoryAxis(),            // Chart title            title: ChartTitle(text: 'Monthly Covid-19 Infections'),            // Enable legend            legend: Legend(isVisible: true),            // Enable tooltip            tooltipBehavior: TooltipBehavior(enable: true),            series: <ChartSeries<_Infections, String>>[              LineSeries<_Infections, String>(                  dataSource: <_Infections>[                    _Infections('Jan', 35000),                    _Infections('Feb', 28000),                    _Infections('Mar', 34000),                    _Infections('Apr', 32000),                    _Infections('May', 40000),                    _Infections('Jun', 60000)                  ],                  xValueMapper: (_Infections victims, _) => victims.year,                  yValueMapper: (_Infections victims, _) => victims.victims,                  // Enable data label                  dataLabelSettings: DataLabelSettings(isVisible: true))            ]));  }}  class _Infections {  _Infections(this.year, this.victims);    final String year;  final double victims;}
Output:
android
Flutter
Flutter UI-components
Dart
Flutter
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Flutter - Custom Bottom Navigation Bar
ListView Class in Flutter
Flutter - BorderRadius Widget
Android Studio Setup for Flutter Development
Flutter - Flexible Widget
Flutter - Custom Bottom Navigation Bar
Flutter Tutorial
Flutter - BorderRadius Widget
Flutter - Flexible Widget
Flutter - Stack Widget