How to use Charts in Flutter with FL Chart

How to use Charts in Flutter with FL Chart

FL Chart is a library that allows you to create simple and animated charts in Flutter.



November 20, 2021

In this article, we are going to integrate charts in Flutter applications. We are using fl_chart package to add charts in Flutter applications.

Flutter Fl Chart Package

Fl Chart is a powerful Flutter chart library, currently supporting Line Chart, Bar Chart and Pie Chart.

Let's get started

To do that please open your pubspec.yaml file and add the blow dependency:

dependencies:
  fl_chart: ^0.40.5

After this, run ‘flutter packages get’ to add the package.

Line Chart Usage

To add line chart into your Flutter app use the code below and customize it

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

LineChart(
  // chart options data
  mainData(),
  swapAnimationCurve: Curves.easeInOutCubic,
  swapAnimationDuration: Duration(milliseconds: 1000),
)
// monthly data
List<FlSpot> _monthlySpots = [
  FlSpot(0, 110.0),
  FlSpot(1, 110.0),
  FlSpot(2, 130.0),
  FlSpot(3, 100.0),
  FlSpot(4, 130.0),
  FlSpot(5, 160.0),
  FlSpot(6, 190.0),
  FlSpot(7, 150.0),
  FlSpot(8, 170.0),
  FlSpot(9, 180.0),
  FlSpot(10, 140.0),
  FlSpot(11, 150.0),
];

LineChartData mainData() {
  return LineChartData(
    borderData: FlBorderData(
      show: false, // to remove border around chart
    ),
    gridData: FlGridData(
      show: false, // to remove grids 
      horizontalInterval: 1.6,
      drawVerticalLine: false // or just remove vertical lines
    ),
    titlesData: FlTitlesData(
      show: false, // for hide charts titles
      rightTitles: SideTitles(showTitles: false), // for hide right side titles
      topTitles: SideTitles(showTitles: false),
      bottomTitles: SideTitles( // customize bottom titles
        showTitles: false,
        reservedSize: 22,
        interval: 1,
        getTextStyles: (context, value) => const TextStyle(
          color: Color(0xff68737d),
          fontWeight: FontWeight.bold,
          fontSize: 8
        ),
        getTitles: (value) {
          switch (value.toInt()) {
            case 1:
              return 'JAN';
            case 2:
              return 'FEB';
            case 3:
              return 'MAR';
            case 4:
              return 'APR';
            case 5:
              return 'MAY';
            case 6:
              return 'JUN';
            case 7:
              return 'JUL';
            case 8:
              return 'AUG';
            case 9:
              return 'SEP';
            case 10:
              return 'OCT';
            case 11:
              return 'NOV';
            case 12:
              return 'DEC';
          }
          return '';
        },
        margin: 10,
      ),
      leftTitles: SideTitles( // customize left titles
        showTitles: false,
        interval: 1,
        getTextStyles: (context, value) => const TextStyle(
          color: Color(0xff67727d),
          fontWeight: FontWeight.bold,
          fontSize: 12,
        ),
        getTitles: (value) {
          switch (value.toInt()) {
            case 1:
              return '10k';
            case 3:
              return '30k';
            case 5:
              return '50k';
          }
          return '';
        },
      ),
    ),
    minX: 0,
    maxX: _monthlySpots.length.toDouble()
    minY: 0,
    maxY: 200,
    lineTouchData: LineTouchData(
      getTouchedSpotIndicator: (LineChartBarData barData, List<int> spotIndexes) {
        return spotIndexes.map((index) {
          return TouchedSpotIndicatorData(
            FlLine(
              color: Colors.white.withOpacity(0.1),
              strokeWidth: 2,
              dashArray: [3, 3],
            ),
            FlDotData(
              show: false,
              getDotPainter: (spot, percent, barData, index) =>
                FlDotCirclePainter(
                  radius: 8,
                  color: [
                    Colors.black,
                    Colors.black,
                  ][index],
                  strokeWidth: 2,
                  strokeColor: Colors.black,
                ),
            ),
          );
        }).toList();
      },
      enabled: true,
      touchTooltipData: LineTouchTooltipData( // customize tooltip
        tooltipPadding: const EdgeInsets.all(8),
        tooltipBgColor: Color(0xff2e3747).withOpacity(0.8),
        getTooltipItems: (touchedSpots) {
          return touchedSpots.map((touchedSpot) {
            return LineTooltipItem(
              '\$${touchedSpot.y.round()}.00',
              const TextStyle(color: Colors.white, fontSize: 12.0),
              
            );
          }).toList();
        },
      ),
      handleBuiltInTouches: true,
    ),
    lineBarsData: [
      LineChartBarData( // draw line chart
        spots: _monthlySpots,
        isCurved: true,
        colors: gradientColors,
        barWidth: 2,
        dotData: FlDotData(
          show: false,
        ),
        belowBarData: BarAreaData(
          show: true,
          gradientFrom: Offset(0, 0),
          gradientTo: Offset(0, 1),
          colors: [
            Colors.black.withOpacity(0.1),
            Colors.black.withOpacity(0),
          ]
        ),
      )
    ],
  );
}

If you did everything right, you should have a chart like this

line chart

Links

Github Repository Twitter Instagram