Flutter  -  Create Simple Line Chart 
Tags: dart, flutter, tutorial
Published: 2021-08-19 20:41:10

## 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. 

![Result Image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fn5740c7jv7kd7edf8wr.png)

-------------------------------------------------------------

## B. Step To Create Line Chart

![File Structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l4i0i5uvsni0vak9rd8l.png)

**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](https://flutter.dev/docs/get-started/test-drive?tab=vscode#create-app)

**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**

![Chart 2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j9mnsclh90wgz2y6gv5k.png)

**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.

![Chart Titles](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2v1lia4w6yqooi6hea40.png)

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**

![Chart 3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tekts3r6g45pcgptdz4o.png)

**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**
![Chart 4](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fn5740c7jv7kd7edf8wr.png)

## 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](https://github.com/RedHunter7/Flutter-FLChart-Tutorial)

Also, if you want to learn more about FL Chart Packages you can visit the documentation link : [Fl Chart Documentation](https://pub.dev/packages/fl_chart)