Flutter Working with Charts (original) (raw)

Last Updated : 03 Mar, 2025

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.

Steps to implement charts in flutter application

Step 1 : Adding the Dependency:

To add the dependency to the **pubspec.yaml file, add **syncfusion_flutter_charts in the dependencies section as shown below:

syncfusion_flutter_charts: ^28.2.7

Now, click on _pub get button in android studio or visual studio code or run the below command in terminal.

flutter pub get

Step 2 : Importing the dependency:

To import the dependency to the main.dart file, use the following code:

import 'package:syncfusion_flutter_charts/charts.dart';

Step 3 : Structuring the Application:

Create a class with a **Statefulwidget that further extends to a **Statelesswidget to give 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();

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

`

Step 4 : Designing the Function:

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: <CartesianSeries<_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(main.dart):

Dart `

import 'package:flutter/material.dart'; import 'package:syncfusion_flutter_charts/charts.dart';

void main() => 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 { _MyHomePage();

@override _MyHomePageState createState() => _MyHomePageState(); }

class _MyHomePageState extends State<_MyHomePage> { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text('GeeksForGeeks'), foregroundColor: Colors.white, 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: <CartesianSeries<_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: