Flutter Charts

A chart is a graphical representation of data where data is represented by a symbol such as a line, bar, pie, etc. In Flutter we can add the fl_chart package.

Supported Chart Types in Flutter

fl_chart supports mainly three types of charts, and each chart comes with their own configuration options:

  1. Line Chart
  2. Bar Chart
  3. Pie and Donut Chart

Line Chart

A line chart is a graph that helps us create lines by connecting two coordinates.

We can use it as below:
LineChart(  
  LineChartData(  
    // write your logic  
  ),  
);  

Bar Chart

It is a graph that shows data using rectangular bars. These bars can be horizontal or vertical.

We can use it as below:
BarChart(  
  BarChartData(  
    // write your logic  
  ),  
);    

Pie or Donut Chart

It is a graph that is used to display the information in a circular graph.

We can use it as below:
PieChart(  
  PieChartData(  
    // write your logic  
  ),  
);     

Let us understand it with the help of an example.

Example

Add the fl_chart in the package.yaml file

dependencies:  
  flutter:  
    sdk: flutter  
  fl_chart: ^0.10.1       

After adding the dependency, click on the get packages link shown on the screen’s top left corner:

import 'package:flutter/material.dart';  
import 'package:fl_chart/fl_chart.dart';  
  
void main() => runApp(MyApp());  
  
/// This Widget is the main application widget.  
class MyApp extends StatelessWidget {  
  @override  
  Widget build(BuildContext context) {  
    return MaterialApp(  
      home: HomePage(),  
    );  
  }  
}  
  
class HomePage extends StatelessWidget {  
  @override  
  Widget build(BuildContext context) {  
    return Scaffold(  
      appBar: AppBar(  
        title: const Text('Flutter Chart Example'),  
          backgroundColor: Colors.green  
      ),  
      body: Center(  
        child: Column(  
          mainAxisAlignment: MainAxisAlignment.center,  
          children: [  
            LineCharts(),  
            Padding(  
              padding: const EdgeInsets.all(16.0),  
              child: Text(  
                "Traffic Source Chart",  
                  style: TextStyle(  
                      fontSize: 20,  
                      color: Colors.purple,  
                      fontWeight: FontWeight.w700,  
                      fontStyle: FontStyle.italic  
                  )  
              )  
            ),  
          ],  
        ),  
      ),  
    );  
  }  
}  
  
class LineCharts extends StatelessWidget {  
  @override  
  Widget build(BuildContext context) {  
    const cutOffYValue = 0.0;  
    const yearTextStyle =  
    TextStyle(fontSize: 12, color: Colors.black);  
  
    return SizedBox(  
      width: 360,  
      height: 250,  
      child: LineChart(  
        LineChartData(  
          lineTouchData: LineTouchData(enabled: false),  
          lineBarsData: [  
            LineChartBarData(  
              spots: [  
                FlSpot(0, 1),  
                FlSpot(1, 1),  
                FlSpot(2, 3),  
                FlSpot(3, 4),  
                FlSpot(3, 5),  
                FlSpot(4, 4)  
              ],  
              isCurved: true,  
              barWidth: 2,  
              colors: [  
                Colors.black,  
              ],  
              belowBarData: BarAreaData(  
                show: true,  
                colors: [Colors.lightBlue.withOpacity(0.5)],  
                cutOffY: cutOffYValue,  
                applyCutOffY: true,  
              ),  
              aboveBarData: BarAreaData(  
                show: true,  
                colors: [Colors.lightGreen.withOpacity(0.5)],  
                cutOffY: cutOffYValue,  
                applyCutOffY: true,  
              ),  
              dotData: FlDotData(  
                show: false,  
              ),  
            ),  
          ],  
          minY: 0,  
          titlesData: FlTitlesData(  
            bottomTitles: SideTitles(  
                showTitles: true,  
                reservedSize: 5,  
                textStyle: yearTextStyle,  
                getTitles: (value) {  
                  switch (value.toInt()) {  
                    case 0:  
                      return '2016';  
                    case 1:  
                      return '2017';  
                    case 2:  
                      return '2018';  
                    case 3:  
                      return '2019';  
                    case 4:  
                      return '2020';  
                    default:  
                      return '';  
                  }  
                }),  
            leftTitles: SideTitles(  
              showTitles: true,  
              getTitles: (value) {  
                return '\$ ${value + 100}';  
              },  
            ),  
          ),  
          axisTitleData: FlAxisTitleData(  
              leftTitle: AxisTitle(showTitle: true, titleText: 'Value', margin: 10),  
              bottomTitle: AxisTitle(  
                  showTitle: true,  
                  margin: 10,  
                  titleText: 'Year',  
                  textStyle: yearTextStyle,  
                  textAlign: TextAlign.right)),  
          gridData: FlGridData(  
            show: true,  
            checkToShowHorizontalLine: (double value) {  
              return value == 1 || value == 2 || value == 3 || value == 4;  
            },  
          ),  
        ),  
      ),  
    );  
  }  
}       
Example

flutter-chart-example

Subscribe Now