fl_chart 0.8.7

  • Readme
  • Changelog
  • Example
  • Installing
  • 98

FL Chart #

pub package APK

FL Chart Logo

💥 A library to draw fantastic charts in Flutter 💥

Chart Types #

Read MoreRead MoreRead More
ScatterChartComing SoonComing Soon
Read More

Banner designed by Soheil Saffar, and samples inspired from David Kovalev, Ricardo Salazar, Dmitro Petrenko, Ghani Pradita, MONUiXD. Thank you all!

Let's get started #

1 - Depend on it #

Add it to your package's pubspec.yaml file
  fl_chart: ^0.8.7

2 - Install it #

Install packages from the command line
flutter packages get

3 - Learn it like a charm #

Read the docs from here
- Animations

4 - Follow the roadmap #

you can follow the roadmap from here, and (let me know your suggestions)

And the last but not least 🔥 #

🍺 pull requests are welcome!

💰 Donation (bitcoin) 💰

Buy me some food to survive, I would add more features if I was alive


Contributing #

  1. Make sure to format files using Dart formatter with line length of 100. VSC users will have these settings auto applied via the included VSC workspace config.

  2. Submit a PR with your changes.

0.8.7 #

  • Added show property in the VerticalLineLabel and set default to false, #256.
  • Fixed bug, when the screen size is square, #258.

0.8.6 #

  • Fixed exception on extraLinesData, #251.
  • Show extra lines value with 1 floating-point.
  • Implemented multi-section lines in LineChart, check this issue (#26) and this merge request (#252)

0.8.5 #

  • Added fitInsideHorizontally and fitInsideVertically in ScatterTouchTooltipData
  • Fixed clipToBorder functionality basdd on the border sides.

0.8.4-test1 #

  • Improved documentations

0.8.4 #

  • Added preventCurveOvershootingThreshold in LineChartBarData for applying prevent overshooting algorithm, #193.
  • Fixed clipToBorder bug in the LineChartData, #228, #214.
  • Removed unused enableNormalTouch property from all charts TouchData.
  • Implemented ImageAnnotations feature (added image, and sizedPicture in the VerticalLine, and the HorizontalLine, check this sample for more information.
  • Enable 'fitInsideTheChart' to support vertical tooltip overflow as well, #225.
  • BREAKING CHANGE-> changed fitInsideTheChart to fitInsideHorizontally and added fitInsideVertically to support both sides, #225.

0.8.3 #

  • prevent to set BorderRadius with numbers larger than (width / 2), fixed #200.
  • added fitInsideTheChart property inside BarTouchTooltipData and LineTouchTooltipData to force tooltip draw inside the chart (shift it to the chart), fixed #159.

0.8.2 #

0.8.1 #

  • yaaay, added some basic unit tests
  • skipped the first and the last grid lines from drawing, #174.
  • prevent to draw touchedSpotDot if show is false, #180.
  • improved paint order, more details in #175.
  • added possibility to set double.nan in centerSpaceRadius for the PieChart to let it to be calculated according to the view size, fixed #179.

0.8.0 #

  • added functionallity to have dashed lines, in everywhere we draw line, there should be a property called dashArray (for example check LineChartBarData, and see LineChartSample8)
  • swapped HorizontalExtraLines, and VerticalExtraLines functionalities (now it has a well definition)
  • and also removed showVerticalLines, and showHorizontalLines from ExtraLinesData, if the horizontalLines, or verticalLines is empty we don't show them

0.7.0 #

  • added rangeAnnotations in the LineChartData to show range annotations, #163.
  • removed isRound fiend in the BarChartRodData to add more customizability, and fixed #147 bug.
  • fixed sever bug of click on pie chart, #146.

0.6.3 #

  • Fixed drawing borddr bug, #143.
  • Respect text scale factor when drawing text.

0.6.2 #

0.6.1 #

0.6.0 #

  • fixed calculating size for handling touches bug, #126
  • added rotateAngle property to rotate the SideTitles, fixed issue #75 , see in this sample
  • some property names updated in the FlGridData: drawHorizontalGrid -> drawHorizontalLine, getDrawingHorizontalGridLine -> getDrawingHorizontalLine, checkToShowHorizontalGrid -> checkToShowHorizontalLine (and same for vertical properties), fixed issue #92

0.5.2 #

  • drawing titles using targetData instead of animating data, fixed issue #130.

0.5.1 #

  • prevent to show touch indicators if barData.show is false in LineChart, #125.

0.5.0 #

0.4.3 #

  • fixed a size bug, #100.
  • direction support for gradient on the LineChart (added gradientFrom and gradientTo in the LineChartBarData).

0.4.2 #

  • implemented stacked bar chart, check the samples
  • added `groupSpace in BarChartData to apply space between bar groups
  • fixed drawing left and right titles of the BarChart
  • fixed showing gridLines bug (the grid line of exact max value of each direction doesn't show)

0.4.1 #

  • fixed handling disabled handleBuiltInTouches state bug

0.4.0 #

  • There is no FlChart class anymore, instead use LineChart, BarChart, and PieChart directly as a widget.
  • Touch handling system is improved and for sure we have some changes, there is no touchedResultSink anymore and use touchCallback function which is added to each TouchData like (LineTouchData), read more.
  • TouchTooltipData class inside LineTouchData and BarTouchData renamed to LineTouchTooltipData and BarTouchTooltipData respectively, and also TooltipItem class renamed to LineTooltipItem and BarTooltipItem.
  • spots inside LineTouchResponse renamed to lineBarSpots and type changed from LineTouchedSpot to LineBarSpot.
  • FlTouchNormapInput renamed to FlTouchNormalInput (fixed typo)
  • added showingTooltipIndicators in LineChartData to show manually tooltips in LineChart.
  • added showingIndicators in LineChartBarData to show manually indicators in LineChart.
  • added showingTooltipIndicators in BarChartGroupData to show manually tooltips in BarChart.

0.3.4 #

  • swapped horizontal and vertical semantics in FlGridData, fixed this issue.

0.3.3 #

  • added support for drawing below and above areas separately in LineChart
  • added cutOffY feature in LineChart, see this issue
  • added aboveBarData in LineChartBarData
  • BelowBarData class renamed to BarAreaData to reuse for both above and below areas
  • belowSpotsLine renamed to spotsLine in BarAreaData
  • cutOffY and applyCutOffY fields are added in BarAreaData to handle cutting of drawing below or above area
  • BelowSpotsLine renamed to BarAreaSpotsLine, and inside it checkToShowSpotBelowLine renamed to checkToShowSpotLine

0.3.2 #

  • provided default size (square with 30% smaller than screen) for the FLChart, fixed this issue.

0.3.1 #

0.3.0 #

0.2.2 #

  • fixed a typo on CHANGELOG
  • reformatted dart files with flutter format command

0.2.1 #

  • fixed #64, added a technical debt :(

0.2.0 #

  • fixed a critical got stuck in draw loop bug,
  • set BarChartGroupData x as required property to keep consistency and prevent unpredictable bugs

0.1.6 #

  • added enableNormalTouch property to chart's TouchData to handle normal taps, and enabled by default.

0.1.5 #

  • reverted getPixelY() on axis_chart_painter to solve the regression bug (fixed issue #48)
  • (fix) BelowBar considers its own color stops refs #46

0.1.4 #

  • bugfix -> fixed draw bug on BarChart when y value is very low in high scale y values (#43).

0.1.3 #

  • added SideTitles class to hold titles representation data, and used in FlTitlesData to show left, top, right, bottom titles, instead of legacy direct parameters, and implemented a reversed chart sample using this update.

0.1.2 #

  • added preventCurveOverShooting on BarData, check this issue

0.1.1 #

  • nothing important

0.1.0 #

  • added Touch Interactivity, read more about it here

0.0.8 #

  • added backgroundColor to axis based charts (LineChart, BarChart) to draw a solid background color behind the chart
  • added getDrawingHorizontalGridLine, getDrawingVerticalGridLine on FlGridData to determine how(color, strokeWidth) the grid lines should be drawn with the given value on FlGridLine

0.0.7 #

  • added ExtraLinesData in the LineChartData to draw extra horizontal and vertical lines on LineChart
  • added BelowSpotsLine in the BlowBarData to draw lines from spot to the bottom of chart on LineChart

0.0.6 #

  • fixed charts repainting bug, #16

0.0.5 #

  • added clipToBorder to the LineChartData to clip the drawing to the border, #3

0.0.4 #

  • fixed bug of adding bar with y = 0 on bar chart #13

0.0.3 #

  • renamed FlChartWidget to FlChart (our main widget) and now you have to import package:fl_chart/fl_chart.dart instead of package:fl_chart/fl_chart_widget.dart
  • renamed FlChart* to BaseChart* (parent class of our charts like PieChart)
  • renamed FlAxisChart* to AxisChart*

0.0.2 #

  • fixed minX, maxX functionality on LineChart
  • restricted to access private classes of the library

0.0.1 - Released on (2019 June 4) #


import 'package:example/scatter_chart/scatter_chart_page.dart';
import 'package:flutter/material.dart';

import 'bar_chart/bar_chart_page.dart';
import 'bar_chart/bar_chart_page2.dart';
import 'line_chart/line_chart_page.dart';
import 'line_chart/line_chart_page2.dart';
import 'line_chart/line_chart_page3.dart';
import 'line_chart/line_chart_page4.dart';
import 'pie_chart/pie_chart_page.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'FlChart Demo',
      showPerformanceOverlay: false,
      theme: ThemeData(
        primaryColor: const Color(0xff262545),
        primaryColorDark: const Color(0xff201f39),
        brightness: Brightness.dark,
      home: const MyHomePage(title: 'fl_chart'),

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  _MyHomePageState createState() => _MyHomePageState();

class _MyHomePageState extends State<MyHomePage> {
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: PageView(
          children: <Widget>[

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:

  fl_chart: ^0.8.7

2. Install it

You can install packages from the command line:

with Flutter:

$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:

import 'package:fl_chart/fl_chart.dart';
Describes how popular the package is relative to other packages. [more]
Code health derived from static analysis. [more]
Reflects how tidy and up-to-date the package is. [more]
Weighted score of the above. [more]
Learn more about scoring.

We analyzed this package on Mar 27, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.7.1
  • pana: 0.13.6
  • Flutter: 1.12.13+hotfix.8

Health suggestions

Fix lib/src/extensions/canvas_extension.dart. (-0.50 points)

Analysis of lib/src/extensions/canvas_extension.dart reported 1 hint:

line 6 col 1: Extension methods weren't supported until version 2.6.0, but this code is required to be able to run on earlier versions.

Fix lib/src/extensions/path_extension.dart. (-0.50 points)

Analysis of lib/src/extensions/path_extension.dart reported 1 hint:

line 6 col 1: Extension methods weren't supported until version 2.6.0, but this code is required to be able to run on earlier versions.

Format lib/src/chart/bar_chart/bar_chart.dart.

Run flutter format to format lib/src/chart/bar_chart/bar_chart.dart.

Fix additional 18 files with analysis or formatting issues.

Additional issues in the following files:

  • lib/src/chart/bar_chart/bar_chart_data.dart (Run flutter format to format lib/src/chart/bar_chart/bar_chart_data.dart.)
  • lib/src/chart/bar_chart/bar_chart_painter.dart (Run flutter format to format lib/src/chart/bar_chart/bar_chart_painter.dart.)
  • lib/src/chart/base/axis_chart/axis_chart_data.dart (Run flutter format to format lib/src/chart/base/axis_chart/axis_chart_data.dart.)
  • lib/src/chart/base/axis_chart/axis_chart_painter.dart (Run flutter format to format lib/src/chart/base/axis_chart/axis_chart_painter.dart.)
  • lib/src/chart/base/base_chart/base_chart_data.dart (Run flutter format to format lib/src/chart/base/base_chart/base_chart_data.dart.)
  • lib/src/chart/base/base_chart/base_chart_painter.dart (Run flutter format to format lib/src/chart/base/base_chart/base_chart_painter.dart.)
  • lib/src/chart/base/base_chart/touch_input.dart (Run flutter format to format lib/src/chart/base/base_chart/touch_input.dart.)
  • lib/src/chart/line_chart/line_chart.dart (Run flutter format to format lib/src/chart/line_chart/line_chart.dart.)
  • lib/src/chart/line_chart/line_chart_data.dart (Run flutter format to format lib/src/chart/line_chart/line_chart_data.dart.)
  • lib/src/chart/line_chart/line_chart_painter.dart (Run flutter format to format lib/src/chart/line_chart/line_chart_painter.dart.)
  • lib/src/chart/pie_chart/pie_chart.dart (Run flutter format to format lib/src/chart/pie_chart/pie_chart.dart.)
  • lib/src/chart/pie_chart/pie_chart_data.dart (Run flutter format to format lib/src/chart/pie_chart/pie_chart_data.dart.)
  • lib/src/chart/pie_chart/pie_chart_painter.dart (Run flutter format to format lib/src/chart/pie_chart/pie_chart_painter.dart.)
  • lib/src/chart/scatter_chart/scatter_chart.dart (Run flutter format to format lib/src/chart/scatter_chart/scatter_chart.dart.)
  • lib/src/chart/scatter_chart/scatter_chart_data.dart (Run flutter format to format lib/src/chart/scatter_chart/scatter_chart_data.dart.)
  • lib/src/chart/scatter_chart/scatter_chart_painter.dart (Run flutter format to format lib/src/chart/scatter_chart/scatter_chart_painter.dart.)
  • lib/src/utils/lerp.dart (Run flutter format to format lib/src/utils/lerp.dart.)
  • lib/src/utils/utils.dart (Run flutter format to format lib/src/utils/utils.dart.)


Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.1.0 <3.0.0
flutter 0.0.0
path_drawing ^0.4.1 0.4.1
Transitive dependencies
collection 1.14.11 1.14.12
meta 1.1.8
path_parsing 0.1.4
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8
Dev dependencies