DEV Community: Adli Rafif

Flutter - Create Simple Pie Chart

Adli Rafif — Thu, 02 Sep 2021 19:15:25 +0000

A. Introduction

The last chapter, we will create a simple Pie Chart using FL Chart Package.

B. Step To Create Pie Chart

If you already read my previous tutorial about line chart and bar chart, you can skip step 1 - 4.

1). Create a Flutter project on your text editor like VS Code or Android Studio. For the detail of creating a new flutter project, you can visit this link : How To Create new Flutter Project

2). Install FL Chart using the below command :



flutter pub add fl_chart

3). In lib folder, create new file named chart_container.dart and insert the below code.



import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class ChartContainer extends StatelessWidget {
  final Color color;
  final String title;
  final Widget chart;

  const ChartContainer({
    Key? key,
    required this.title,
    required this.color,
    required this.chart,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        width: MediaQuery.of(context).size.width * 0.95,
        height: MediaQuery.of(context).size.width * 0.95 * 0.65,
        padding: EdgeInsets.fromLTRB(0, 10, 20, 10),
        decoration: BoxDecoration(
          color: color,
          borderRadius: BorderRadius.circular(20),
        ),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              title,
              style: TextStyle(
                  color: Colors.white,
                  fontSize: 16,
                  fontWeight: FontWeight.bold),
            ),
            Expanded(
                child: Container(
              padding: EdgeInsets.only(top: 10),
              child: chart,
            ))
          ],
        ),
      ),
    );
  }
}

Explanation :

ChartContainer class was created to store a chart and avoid writing the same code repeatedly.



class ChartContainer extends StatelessWidget

4). Make 2 new folder named chart and chart_data inside lib folder.

5). Open main.dart in lib folder, then write the below code.



import 'package:fl_chart_tutorial/chart/pie_chart.dart';
import 'package:fl_chart_tutorial/chart_container.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'FL Chart Tutorial',
      theme: ThemeData(
        primarySwatch: Colors.purple,
      ),
      home: MyHomePage(title: 'FL Chart Tutorial'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: Container(
          color: Color(0xfff0f0f0),
          child: ListView(
            padding: EdgeInsets.fromLTRB(0, 30, 0, 30),
            children: <Widget>[
              ChartContainer(
                title: 'Pie Chart', 
                color: Color(0xff24b273), 
                chart: PieChartContent()
              ), 
            ],
          ),
        ));
  }
}

6). To draw a Pie Chart, We need to create a file called pie_chart.dart then make a StatelessWidget Class named PieChartContent.

pie_chart.dart



import 'package:fl_chart/fl_chart.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';

class PirChartContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return PieChart(
      PieChartData(),
    );
  }
}

7). Next, we make a new file again called pie_chart_data.dart. In the file we have been created, write a pieChartSectionData list which contain sections data of Pie Chart.

pie_chart_data.dart



import 'dart:ui';
import 'package:fl_chart/fl_chart.dart';
import 'package:flutter/material.dart';

List<PieChartSectionData> pieChartSectionData = [
  PieChartSectionData(
      value: 20,
      title: '20%',
      color: Color(0xffed733f),
    ),
    PieChartSectionData(
      value: 35,
      title: '35%',
      color: Color(0xff584f84),
    ),
    PieChartSectionData(
      value: 15,
      title: '15%',
      color: Color(0xffd86f9b),
    ),
    PieChartSectionData(
      value: 30,
      title: '30%',
      color: Color(0xffa2663e),
    ),
];

Explanation :

PieChartSectionData is a widget to draw a pie chart section in FL Chart Package.
The usage of value property is to determine a weight of a section.

8). After creating a list of sections data, we can include that list to PieChartData widget in pie_chart.dart.

Don't forget to add import code on top of the line.



import 'package:fl_chart_tutorial/chart_data/pie_chart_data.dart';

Include pieChartSectionata list.



sections: pieChartSectionData

The code will look like this.

pie_chart.dart



import 'package:fl_chart/fl_chart.dart';
import 'package:fl_chart_tutorial/chart_data/pie_chart_data.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';

class PieChartContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return PieChart(PieChartData(
      sections: pieChartSectionData
    ));
  }
}

Output :

9). Next, we need to remove a center space of pie chart and space between each section.

Remove center space of pie chart with set value of centerSpaceRadius to 0.



centerSpaceRadius: 0

Also remove space between section with set value of sectionsSpace to 0.



sectionsSpace: 0

The Code :



import 'package:fl_chart/fl_chart.dart';
import 'package:fl_chart_tutorial/chart_data/pie_chart_data.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';

class PieChartContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return PieChart(PieChartData(
      centerSpaceRadius: 0,
      sectionsSpace: 0,
      sections: pieChartSectionData
    ));
  }
}

Output :

10). As you can see in the last output picture, the pie chart size looks small. To extend its size, we must set the radius of each section in pieChartSectionData based on the device screen width.

To do that way, we need to change the code of pie_chart_data.dart file by create a function with a return list<PieChartSectionData> type.

pie_chart_data.dart



import 'dart:ui';
import 'package:fl_chart/fl_chart.dart';
import 'package:flutter/material.dart';

List<PieChartSectionData> getSectionData(double screenWidth) {
  double radius = screenWidth / 4.44;

  return [
    PieChartSectionData(
      value: 20,
      title: '20%',
      radius: radius,
      color: Color(0xffed733f),
    ),
    PieChartSectionData(
      value: 35,
      title: '35%',
      radius: radius,
      color: Color(0xff584f84),
    ),
    PieChartSectionData(
      value: 15,
      title: '15%',
      radius: radius,
      color: Color(0xffd86f9b),
    ),
    PieChartSectionData(
      value: 30,
      title: '30%',
      radius: radius,
      color: Color(0xffa2663e),
    ),
  ];
}

Explanation :

getSectionData function have parameter with double variable called screenWidth. this parameter is used to determine radius value of each pie chart section.

11). Last, open pie_chart.dart file and change sections property value by include the getSectionData function.

MediaQuery.of(context).size.width syntax is used to retrieve the device screen width.



sections: getSectionData(MediaQuery.of(context).size.width)

The final code of pie_chart.dart



import 'package:fl_chart/fl_chart.dart';
import 'package:fl_chart_tutorial/chart_data/pie_chart_data.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';

class PieChartContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return PieChart(PieChartData(
      sectionsSpace: 0,
      centerSpaceRadius: 0,
      sections: getSectionData(MediaQuery.of(context).size.width)
    ));
  }
}

Final output :

C. Conclusion

This is the last tutorial of Flutter Chart Series. I hope this tutorial will help you to create pie chart in flutter.

For more detail about this tutorial you can check my Github repo at this link: Source Code of Fl Chart Tutorial

Also, if you want to learn more about FL Chart Packages you can visit the documentation link : Fl Chart Documentation

Flutter - Create Simple Bar Chart

Adli Rafif — Thu, 26 Aug 2021 19:38:46 +0000

A. Introduction

Bar Chart is a type of chart which has a function to show the different values of several aspects of data. Because this type of chart is very readable for the user, many developers implement this chart in web and mobile applications.

So in this tutorial, I will show you how to a create simple bar chart using FL Chart Package.

B. Step To Create Line Chart

The process of creating a bar chart is quite similar to creating a line chart in the previous tutorial.

For that reason, you can skip steps 1 - 4 If you already follow the previous tutorial.

1). Create a Flutter project on your text editor like VS Code or Android Studio. For the detail of creating a new flutter project, you can visit this link : How To Create new Flutter Project

2). Install FL Chart using the below command :



flutter pub add fl_chart

3). In lib folder, create new file named chart_container.dart and insert the below code.



import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class ChartContainer extends StatelessWidget {
  final Color color;
  final String title;
  final Widget chart;

  const ChartContainer({
    Key? key,
    required this.title,
    required this.color,
    required this.chart,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        width: MediaQuery.of(context).size.width * 0.95,
        height: MediaQuery.of(context).size.width * 0.95 * 0.65,
        padding: EdgeInsets.fromLTRB(0, 10, 20, 10),
        decoration: BoxDecoration(
          color: color,
          borderRadius: BorderRadius.circular(20),
        ),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              title,
              style: TextStyle(
                  color: Colors.white,
                  fontSize: 16,
                  fontWeight: FontWeight.bold),
            ),
            Expanded(
                child: Container(
              padding: EdgeInsets.only(top: 10),
              child: chart,
            ))
          ],
        ),
      ),
    );
  }
}

Explanation :

ChartContainer class was created to store a chart and avoid writing the same code repeatedly.



class ChartContainer extends StatelessWidget

4). Make 2 new folder named chart and chart_data inside lib folder.

5). Open main.dart in lib folder, then write the below code.



import 'package:fl_chart_tutorial/chart/bar_chart.dart';
import 'package:fl_chart_tutorial/chart_container.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'FL Chart Tutorial',
      theme: ThemeData(
        primarySwatch: Colors.purple,
      ),
      home: MyHomePage(title: 'FL Chart Tutorial'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: Container(
          color: Color(0xfff0f0f0),
          child: ListView(
            padding: EdgeInsets.fromLTRB(0, 30, 0, 30),
            children: <Widget>[
              ChartContainer(
                title: 'Bar Chart', 
                color: Color(0xfffc5185), 
                chart: BarChartContent()
              ), 
            ],
          ),
        ));
  }
}

6). Create file inside chart folder named bar_chart.dart. Then create a stateless widget class named BarChartContent.



import 'package:fl_chart/fl_chart.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';

class BarChartContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return BarChart(
      BarChartData(),
    );
  }
}

7). Input maximum value of axis Y (ex: maxY: 16) in BarChartData widget. The code will like this.



Widget build(BuildContext context) {
    return BarChart(
      BarChartData(
        maxY: 16,
      ),
    );
  }

Explanation :

maxY: 16 is used to give maximum value of y axis.

8). So, we already make basic framework of Bar Chart. After that, we create file called 'bar_chart_data.dart' inside chart_data folder.

bar_chart_data.dart



import 'dart:ui';
import 'package:fl_chart/fl_chart.dart';

List<BarChartGroupData> barChartGroupData = [
  BarChartGroupData(x: 1, barRods: [
    BarChartRodData(y: 10, colors: [Color(0xff43dde6), Color(0xff43dde6)]),
  ]),
   BarChartGroupData(x: 2, barRods: [
    BarChartRodData(y: 8.5, colors: [Color(0xff43dde6), Color(0xff43dde6)]),
  ]),
   BarChartGroupData(x: 3, barRods: [
    BarChartRodData(y: 12.6, colors: [Color(0xff43dde6), Color(0xff43dde6)]),
  ]),
   BarChartGroupData(x: 4, barRods: [
    BarChartRodData(y: 11.4, colors: [Color(0xff43dde6), Color(0xff43dde6)]),
  ]),
   BarChartGroupData(x: 5, barRods: [
    BarChartRodData(y: 7.5, colors: [Color(0xff43dde6), Color(0xff43dde6)]),
  ]),
  BarChartGroupData(x: 6, barRods: [
    BarChartRodData(y: 14, colors: [Color(0xff43dde6), Color(0xff43dde6)]),
  ]),
   BarChartGroupData(x: 7, barRods: [
    BarChartRodData(y: 12.2, colors: [Color(0xff43dde6), Color(0xff43dde6)]),
  ]),
];

Explanation :

In this file, we create a list called barChartGroupData which has a purpose to show the bar lines. This list will be added to bar_chart.dart file.



List<BarChartGroupData> barChartGroupData

x: 1 is the position of the line bar in the x-axis. For example, we placed the line bar in position 1 on the x-axis.
The usage of barRods property in BarChartGroupData is to set height and color of line bars. y: 10 is the height of the a line bar and colors: [Color(0xff43dde6), Color(0xff43dde6)] is the background color of a line bar.



BarChartGroupData(x: 1, barRods: [
    BarChartRodData(y: 10, colors: [Color(0xff43dde6), Color(0xff43dde6)]),
])

9). Well, we have been creating the bar line data of the bar chart. Next we add 'barChartGroupData' list in 'bar_chart.dart' file.

Add this code in top of the line to import bar_chart_data.dart file .



import 'package:fl_chart_tutorial/chart_data/bar_chart_data.dart';

Most important, add barChartGroupData list to BarChartData widget.



barGroups: barChartGroupData

The code will look like this :

bar_chart.dart



import 'package:fl_chart/fl_chart.dart';
import 'package:fl_chart_tutorial/chart_data/bar_chart_data.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';

class BarChartContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return BarChart(BarChartData(
      maxY: 16,
      barGroups: barChartGroupData,
    ));
  }
}

Output

10). When we look at the picture above, we see the bottom and left titles are still untouchable. In this step, we customize left and bottom titles using FlTitlesData widget.

The step to customizing titles in a bar chart is similar to a line chart, so you will use the same code from the previous tutorial.

Open bar_chart.dart file and add this code inside BarChartData widget.



titlesData: FlTitlesData(
          bottomTitles: SideTitles(
            showTitles: true,
            getTextStyles: (value) => TextStyle(
                color: Colors.white, 
                fontSize: 12, 
                fontWeight: FontWeight.bold
              ),
            getTitles: (value) {
              switch (value.toInt()) {
                case 1:
                  return 'Mon';
                case 2:
                  return 'Tues';
                case 3:
                  return 'Wed';
                case 4:
                  return 'Thu';
                case 5:
                  return 'Fri';
                case 6:
                  return 'Sat';
                case 7:
                  return 'Sun';
              }
              return '';
            },
          ),
          leftTitles: SideTitles(
            interval: 4,
            showTitles: true,
            getTextStyles: (value) => TextStyle(
                color: Colors.white, 
                fontSize: 14, 
                fontWeight: FontWeight.bold
              ),
            getTitles: (value) {
              if(value.toInt() == 0) return '';
              else return value.toInt().toString();
            },
          ),
        ),

Explanation :

FlTitlesData is a widget which has a function to customize titles around charts. On code above, we only customize left and top tiles.
When we look at the last output picture, it seems to have too many titles. To decrease titles amount, we set interval to 4 and when we do that, it change the title for example {0,1,2,3,4,5,6,7,8,9,10} to {0,4,8}.



interval: 4

On bottom titles, we change the format from number to day. We must create a custom function to do that and insert that function to getTitles property in SideTitles widget.



getTitles: (value) {
              switch (value.toInt()) {
                case 1:
                  return 'Mon';
                case 2:
                  return 'Tues';
                case 3:
                  return 'Wed';
                case 4:
                  return 'Thu';
                case 5:
                  return 'Fri';
                case 6:
                  return 'Sat';
                case 7:
                  return 'Sun';
              }
              return '';
            },

Output

11). Last, we need to change border style and set bar lines alignment to space-evenly.



borderData: FlBorderData(
          border: Border.all(
            color: Colors.white, 
            width: 0.5
          )
        ),
alignment: BarChartAlignment.spaceEvenly,

The final code of bar_chart.dart will look like this :



import 'package:fl_chart/fl_chart.dart';
import 'package:fl_chart_tutorial/chart_data/bar_chart_data.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';

class BarChartContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return BarChart(BarChartData(
      titlesData: FlTitlesData(
        bottomTitles: SideTitles(
          showTitles: true,
          getTextStyles: (value) => TextStyle(
              color: Colors.white, 
              fontSize: 12, 
              fontWeight: FontWeight.bold
            ),
          getTitles: (value) {
            switch (value.toInt()) {
              case 1:
                return 'Mon';
              case 2:
                return 'Tues';
              case 3:
                return 'Wed';
              case 4:
                return 'Thu';
              case 5:
                return 'Fri';
              case 6:
                return 'Sat';
              case 7:
                return 'Sun';
            }
            return '';
          },
        ),
        leftTitles: SideTitles(
          interval: 4,
          showTitles: true,
          getTextStyles: (value) => TextStyle(
              color: Colors.white, 
              fontSize: 14, 
              fontWeight: FontWeight.bold
            ),
          getTitles: (value) {
              if(value.toInt() == 0) return '';
              else return value.toInt().toString();
          },
        ),
      ),
      borderData:
            FlBorderData(
              border: Border.all(
                color: Colors.white, 
                width: 0.5
              )
            ),
      alignment: BarChartAlignment.spaceEvenly,
      maxY: 16,
      barGroups: barChartGroupData,
    ));
  }
}

Final Output

C. Conclusion

I hope this guide will help you to create a bar chart in flutter. Thank You for reading my article.

Next chapter, i will write a tutorial about creating Pie Chart.

For more detail about this tutorial you can check my Github repo at this link: Source Code of Fl Chart Tutorial

Also, if you want to learn more about FL Chart Packages you can visit the documentation link : Fl Chart Documentation

Flutter - Create Simple Line Chart

Adli Rafif — Thu, 19 Aug 2021 20:41:10 +0000

A. Introduction

The chart feature on mobile development is very useful for a user to more understand some data set. The application display will look professional if the chart showing animation and a great display.

This time, we will create a Line Chart using FL Chart Package.

B. Step To Create Line Chart

1). Create a Flutter project on your text editor like VS Code or Android Studio. For the detail of creating a new flutter project, you can visit this link : How To Create new Flutter Project

2). Install FL Chart using the below command :



flutter pub add fl_chart

3). Open main.dart in lib folder, then write the below code.



import 'package:fl_chart_tutorial/chart/line_chart.dart';
import 'package:fl_chart_tutorial/chart_container.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'FL Chart Tutorial',
      theme: ThemeData(
        primarySwatch: Colors.purple,
      ),
      home: MyHomePage(title: 'FL Chart Tutorial'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: Container(
          color: Color(0xfff0f0f0),
          child: ListView(
            padding: EdgeInsets.fromLTRB(0, 30, 0, 30),
            children: <Widget>[
              ChartContainer(
                title: 'Line Chart', 
                color: Color.fromRGBO(45, 108, 223, 1), 
                chart: LineChartContent(),
              ), 
            ],
          ),
        ));
  }
}

4). In lib folder, create new file named chart_container.dart and insert the below code.



import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class ChartContainer extends StatelessWidget {
  final Color color;
  final String title;
  final Widget chart;

  const ChartContainer({
    Key? key,
    required this.title,
    required this.color,
    required this.chart,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        width: MediaQuery.of(context).size.width * 0.95,
        height: MediaQuery.of(context).size.width * 0.95 * 0.65,
        padding: EdgeInsets.fromLTRB(0, 10, 20, 10),
        decoration: BoxDecoration(
          color: color,
          borderRadius: BorderRadius.circular(20),
        ),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              title,
              style: TextStyle(
                  color: Colors.white,
                  fontSize: 16,
                  fontWeight: FontWeight.bold),
            ),
            Expanded(
                child: Container(
              padding: EdgeInsets.only(top: 10),
              child: chart,
            ))
          ],
        ),
      ),
    );
  }
}

Explanation :

ChartContainer class was created to store a chart and avoid writing the same code repeatedly.



class ChartContainer extends StatelessWidget

5). Create a new folder named chart in lib folder, then create file inside chart folder named line_chart.dart .

Insert import code at the top of the line.



import 'package:fl_chart/fl_chart.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';

6). Next, create a stateless widget class named LineChartContent.



class LineChartContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return LineChart(
      LineChartData(),
    );
  }
}

7). Input minimum and maximum value of axis X (ex: minX: 1 & maxX: 7) and axis Y (ex: minY: 0 & maxY: 16) In LineChartData widget, . The code will like this.



Widget build(BuildContext context) {
    return LineChart(
      LineChartData(
        minX: 1,
        minY: 0,
        maxX: 7,
        maxY: 16,
      ),
    );
  }

8). To create a chart line based on data, create folder chart_data then make dart file line_chart_data.dart .

line_chart_data.dart



import 'package:fl_chart/fl_chart.dart';
import 'package:flutter/material.dart';

List<Color> lineColor = [
    Color(0xfff3f169),
];

List<LineChartBarData> lineChartBarData = [
  LineChartBarData(
    colors: lineColor,
    isCurved: true,
    spots: [
      FlSpot(1, 8),
      FlSpot(2, 12.4),
      FlSpot(3, 10.8),
      FlSpot(4, 9),
      FlSpot(5, 8),
      FlSpot(6, 8.6),
      FlSpot(7, 10)
    ]
  )
];

Explanation :

lineChartBarData is a list that used to show the chart's line .



List<LineChartBarData> lineChartBarData

FlSpot(x, y) is a syntax to draw x (x starts from left) and y (y starts from bottom) coordinate.



FlSpot(x, y)

9). After we create lineChartBarData list, we must add this list on file line_chart.dart .

Add this code in top of the line to import line_chart_data.dart file .



import 'package:fl_chart_tutorial/chart_data/line_chart_data.dart';

Most important, add lineChartBarData list to LineChartData widget.



lineBarsData: lineChartBarData

line_chart.dart



import 'package:fl_chart/fl_chart.dart';
import 'package:fl_chart_tutorial/chart_data/line_chart_data.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';

class LineChartContent extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return LineChart(
      LineChartData(
        minX: 1,
        minY: 0,
        maxX: 7,
        maxY: 16,
        lineBarsData: lineChartBarData,
      ),
    );
  }
}

Output

10). In the picture above, you see on left titles and bottom titles still untouchable. We must customize it to make it readable by the user.

Go to line_chart.dart file and add this code inside LineChartData widget.



titlesData: FlTitlesData(
          bottomTitles: SideTitles(
            showTitles: true,
            getTextStyles: (value) => TextStyle(
                color: Colors.white, 
                fontSize: 12, 
                fontWeight: FontWeight.bold
              ),
            getTitles: (value) {
              switch (value.toInt()) {
                case 1:
                  return 'Mon';
                case 2:
                  return 'Tues';
                case 3:
                  return 'Wed';
                case 4:
                  return 'Thu';
                case 5:
                  return 'Fri';
                case 6:
                  return 'Sat';
                case 7:
                  return 'Sun';
              }
              return '';
            },
          ),
          leftTitles: SideTitles(
            interval: 4,
            showTitles: true,
            getTextStyles: (value) => TextStyle(
                color: Colors.white, 
                fontSize: 14, 
                fontWeight: FontWeight.bold
              ),
            getTitles: (value) {
              if(value.toInt() == 0) return '';
              else return value.toInt().toString();
            },
          ),
        ),

Explanation :

FlTitlesData is a widget which has a function to customize titles around charts. On code above, we only customize left and top tiles.
When we look at the last output picture, it seems to have too many titles. To decrease titles amount, we set interval to 4 and when we do that, it change the title for example {0,1,2,3,4,5,6,7,8,9,10} to {0,4,8}.



interval: 4

On bottom titles, we change the format from number to day. We must create a custom function to do that and insert that function to getTitles property in SideTitles widget.



getTitles: (value) {
              switch (value.toInt()) {
                case 1:
                  return 'Mon';
                case 2:
                  return 'Tues';
                case 3:
                  return 'Wed';
                case 4:
                  return 'Thu';
                case 5:
                  return 'Fri';
                case 6:
                  return 'Sat';
                case 7:
                  return 'Sun';
              }
              return '';
            },

Output

11). Last step, we need to change the border color to white and remove the horizontal line.



borderData: FlBorderData(
          border: Border.all(
            color: Colors.white, 
            width: 0.5
          )
        ),
gridData: FlGridData(
          drawHorizontalLine: false,
        ),

The final code of line chart will look like this :



import 'package:fl_chart/fl_chart.dart';
import 'package:fl_chart_tutorial/chart_data/line_chart_data.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';

class LineChartContent extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return LineChart(
      LineChartData(
        borderData: FlBorderData(
          border: Border.all(
            color: Colors.white, 
            width: 0.5
          )
        ),
        gridData: FlGridData(
          drawHorizontalLine: false,
        ),
        titlesData: FlTitlesData(
          bottomTitles: SideTitles(
            showTitles: true,
            getTextStyles: (value) => TextStyle(
                color: Colors.white, 
                fontSize: 12, 
                fontWeight: FontWeight.bold
              ),
            getTitles: (value) {
              switch (value.toInt()) {
                case 1:
                  return 'Mon';
                case 2:
                  return 'Tues';
                case 3:
                  return 'Wed';
                case 4:
                  return 'Thu';
                case 5:
                  return 'Fri';
                case 6:
                  return 'Sat';
                case 7:
                  return 'Sun';
              }
              return '';
            },
          ),
          leftTitles: SideTitles(
            interval: 4,
            showTitles: true,
            getTextStyles: (value) => TextStyle(
                color: Colors.white, 
                fontSize: 14, 
                fontWeight: FontWeight.bold
              ),
            getTitles: (value) {
              if(value.toInt() == 0) return '';
              else return value.toInt().toString();
            },
          ),
        ),
        minX: 1,
        minY: 0,
        maxX: 7,
        maxY: 16,
        lineBarsData: lineChartBarData,
      ),
    );
  }
}

Final Output

C. Conclusion

So, this is a tutorial about creating a line chart using Fl Chart. I hope this tutorial will be helpful for you.

In the next chapter, we will learn about creating a bar chart.

For more detail about this tutorial you can check my Github repo at this link: Source Code of Fl Chart Tutorial

Also, if you want to learn more about FL Chart Packages you can visit the documentation link : Fl Chart Documentation