README (README.md) Copy Section

[](https://pub.dartlang.org/packages/fl_chart)
[](https://codecov.io/gh/imaNNeo/fl_chart)
<a href="https://github.com/Solido/awesome-flutter#charts"><img src="https://img.shields.io/badge/awesome-flutter-blue.svg?longCache=true" alt="Awesome Flutter"></a>
<a href="https://pub.dev/packages/fl_chart"><img alt="GitHub Repo stars" src="https://img.shields.io/github/stars/imaNNeo/fl_chart"></a>
<a href="https://github.com/imaNNeo/fl_chart/graphs/contributors"><img alt="GitHub contributors" src="https://img.shields.io/github/contributors/imaNNeo/fl_chart"></a>
<a href="https://githubc.com/imaNNeo/fl_chart/issues?q=is%3Aissue+is%3Aclosed"><img src="https://img.shields.io/github/issues-closed-raw/imaNNeo/fl_chart" alt="GitHub closed issues"></a>

<span class="badge-buymeacoffee">
<a href="https://www.buymeacoffee.com/fl_chart" title="Donate to this project using Buy Me A Coffee"><img src="https://img.shields.io/badge/buy%20me%20a%20coffee-donate-yellow.svg" alt="Buy Me A Coffee donate button" /></a>
</span>

Our Financial Heroes Copy Section

Overview Copy Section

<a href="https://www.youtube.com/watch?v=hVRU-kpKNjQ&list=PL1-_rCwRcnbNpvodmbt43O81wMUdBv8-a"><img src="https://github.com/imaNNeo/fl_chart/raw/main/repo_files/images/overview_thumbnail.png"></p></a>

Chart Types Copy Section

|LineChart |BarChart |PieChart |
|:------------:|:------------:|:-------------:|
| [](https://github.com/imaNNeo/fl_chart/blob/main/repo_files/documentations/line_chart.md#sample-1-source-code) [](https://github.com/imaNNeo/fl_chart/blob/main/repo_files/documentations/line_chart.md#sample-2-source-code) | [](https://github.com/imaNNeo/fl_chart/blob/main/repo_files/documentations/bar_chart.md#sample-1-source-code) [](https://github.com/imaNNeo/fl_chart/blob/main/repo_files/documentations/bar_chart.md#sample-2-source-code) | [](https://github.com/imaNNeo/fl_chart/blob/main/repo_files/documentations/pie_chart.md#sample-1-source-code) [](https://github.com/imaNNeo/fl_chart/blob/main/repo_files/documentations/pie_chart.md#sample-2-source-code) |
|Read More|Read More|Read More|

|ScatterChart |RadarChart| CandlestickChart|
|:------------:|:------------:|:-------------:|
| [](https://github.com/imaNNeo/fl_chart/blob/main/repo_files/documentations/scatter_chart.md#sample-1-source-code) [](https://github.com/imaNNeo/fl_chart/blob/main/repo_files/documentations/scatter_chart.md#sample-2-source-code) | | |
|Read More|Read More|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

First of all, you need to add the fl_chart in your project. To do that, follow this guide.

Then you need to read the docs. Start from here.

We suggest that you check the sample source code.

##### - You can read about the animation handling here
|Sample1 |Sample2 |Sample3 |
|:------------:|:------------:|:-------------:|
| [](https://github.com/imaNNeo/fl_chart/blob/main/repo_files/documentations/line_chart.md#sample-1-source-code) | [](https://github.com/imaNNeo/fl_chart/blob/main/repo_files/documentations/line_chart.md#sample-2-source-code) | [](https://github.com/imaNNeo/fl_chart/blob/main/repo_files/documentations/bar_chart.md#sample-1-source-code) |

Try it out Copy Section

[](https://play.google.com/store/apps/details?id=dev.flchart.app)
[](https://apps.apple.com/us/app/fl-chart/id6476523019)
[](https://app.flchart.dev)

[//]: # ([![Download for macOS]&#40;https://img.shields.io/badge/Download-for%20macOS-darkblue?style=for-the-badge&logo=apple&logoColor=white&#41;]&#40;https://apps.apple.com/app/your-macos-app-id&#41;)
[//]: # ([![Download for Linux]&#40;https://img.shields.io/badge/Download-for%20Linux-orange?style=for-the-badge&logo=linux&logoColor=white&#41;]&#40;https://your-linux-distribution-link.com&#41;)
[//]: # ([![Download for Windows]&#40;https://img.shields.io/badge/Download-for%20Windows-blue?style=for-the-badge&logo=windows&logoColor=white&#41;]&#40;https://your-windows-app-link.com&#41;)

Donation Copy Section

1. You can be my sponsor on GitHub (This is the most reliable way to donate to me)
2. You can <a href="https://www.buymeacoffee.com/fl_chart">buy me a coffee!</a>
3. Or if you are a fan of crypto, you can donate me Bitcoins here: 1L7ghKdcmgydmUJAnmYmMaiVjT1LoP4a45

Contributing Copy Section

Our documentation may contain grammatical issues, and if you’re fluent in English, your help in correcting them would be greatly appreciated.

Check out CONTRIBUTING.md, which contains a guide for those who want to contribute to the FL Chart.

Reporting bugs and issues is also a contribution, yes, it is.

#### Below are the people who have contributed to the FL Chart. We hope we have your picture here soon.
[](https://github.com/imaNNeo/fl_chart/graphs/contributors)

---

.Codecov.Yml (.codecov.yml) Copy Section

comment:
require_changes: true

coverage:
status:
project:
default:
target: auto
threshold: 1%
patch:
default:
target: 50%
threshold: 10%
precision: 1
range: "80...100"

Ignore all the file inside the example and

end eventually also the autogenerate file

---

Analysis Options.Yaml (analysis_options.yaml) Copy Section

include: package:very_good_analysis/analysis_options.yaml
analyzer:
exclude:
- ".mocks.dart"
linter:
rules:
always_put_required_named_parameters_first: false
avoid_bool_literals_in_conditional_expressions: false
avoid_positional_boolean_parameters: false
comment_references: false
library_private_types_in_public_api: false
lines_longer_than_80_chars: false
no_default_cases: false
parameter_assignments: false
prefer_asserts_with_message: false
prefer_constructors_over_static_methods: false
public_member_api_docs: false
use_if_null_to_convert_nulls_to_bools: false
use_setters_to_change_properties: false
avoid_catches_without_on_clauses: false

---

CHANGELOG (CHANGELOG.md) Copy Section

1.2.0 Copy Chapter

1.1.1 Copy Chapter

1.1.0 Copy Chapter

BarChartRodStackItem(
  0,
  10,
  Colors.green,
  BorderSide(color: Colors.white),
),

BarChartRodStackItem(
  0,
  10,
  Colors.green,
  borderSide: BorderSide(color: Colors.white),
),

1.0.0 Copy Chapter

* FEATURE (by @imaNNeo) Implement a new chart type called CandlestickChart. You can take a look at the documentation here. And I just implemented a basic example to show the Bitcoin price in 2024, you can take a look at it in our sample app here. #433, #1143
<img width="400" alt="Image" src="https://github.com/user-attachments/assets/f71b9e4f-3aa8-4688-a5c1-ffd8ff12fba1" />

* BREAKING (by @imaNNeo) Remove the deprecated tooltipRoundedRadius property -> you should use tooltipBorderRadius instead.
* BUGFIX (by @imaNNeo) Fix the BarChartData mismatch issue when changing the data, #1911
* FEATURE (by @frybitsinc) Add fillGradient property in RadarDataSet
* BREAKING (by @imaNNeo) Upgrade the min flutter version to 3.27.4. So please make sure that your project is not using an old flutter version, #1846
* IMPORTANT (by @imaNNeo) You can read more about this release and the history of fl_chart here in my blog post

0.71.0 Copy Chapter

0.70.2 Copy Chapter

0.70.1 Copy Chapter

0.70.0 Copy Chapter

0.69.2 Copy Chapter

0.69.1 Copy Chapter

0.69.0 Copy Chapter

0.68.0 Copy Chapter

0.67.0 Copy Chapter

/// Migration guide:
/// This is the old way:
BarChartData(
  barTouchData: BarTouchData(
    touchTooltipData: BarTouchTooltipData(
      tooltipBgColor: Colors.blueGrey,
    )
  )
)
/// This is the new way:
BarChartData(
  barTouchData: BarTouchData(
    touchTooltipData: BarTouchTooltipData(
      getTooltipColor: (BarChartGroupData group) => Colors.blueGrey,
    )
  )
)

0.66.2 Copy Chapter

0.66.1 Copy Chapter

0.66.0 Copy Chapter

/// Migration guide:
/// This is the old way:
ScatterSpot(
  2,
  5,
  color: Colors.red,
  radius: 12,
)
/// This is the new way:
ScatterSpot(
  2,
  8,
  dotPainter: FlDotCirclePainter(
    color: Colors.red,
    radius: 22,
  ),
),

0.65.0 Copy Chapter

0.64.0 Copy Chapter

0.63.0 Copy Chapter

0.62.0 Copy Chapter

0.61.0 Copy Chapter

0.60.0 Copy Chapter

0.55.2 Copy Chapter

<img src="https://github.com/imaNNeo/fl_chart/raw/main/repo_files/images/tmp_iran_banner.png" width=500 />

As you might know, Islamic Republic of Iran is murdering people in silence right now in Iran
They shut the Internet down to do that. That’s why I cannot maintain this library for a while.
Now we need your help, please be our voice by spreading news in your media to support us
Search these hashtags:

#MahsaAmini
مهسا_امینی
OpIran

Also, this article might help.

0.55.1 Copy Chapter

0.55.0 Copy Chapter

0.51.0 Copy Chapter

getTitlesWidget: (double value, TitleMeta meta) {
  return SideTitleWidget(
    axisSide: meta.axisSide,
    space: 8.0,
    angle: 0.0,
    child: const Text("This is your widget"),
  );
},

0.50.6 Copy Chapter

0.50.5 Copy Chapter

0.50.4 Copy Chapter

0.50.3 Copy Chapter

0.50.1 Copy Chapter

0.50.0 Copy Chapter

LineChartSample 8 (Source Code)

<img src="https://github.com/imaNNeo/fl_chart/raw/main/repo_files/images/line_chart/line_chart_sample_8.png" width="300" >

> BarChartSample 7 (Source Code)

> <img src="https://github.com/imaNNeo/fl_chart/raw/main/repo_files/images/bar_chart/bar_chart_sample_7.gif" width="300" >

0.46.0 Copy Chapter

0.45.1 Copy Chapter

0.45.0 Copy Chapter

0.41.0 Copy Chapter

0.40.6 Copy Chapter

0.40.5 Copy Chapter

0.40.2 Copy Chapter

0.40.1 Copy Chapter

0.40.0 Copy Chapter

0.36.4 Copy Chapter

0.36.3 Copy Chapter

0.36.2 Copy Chapter

0.36.1 Copy Chapter

0.36.0 Copy Chapter

0.35.0 Copy Chapter

LineTouchData(
  ...
  getTouchLineStart: (barData, index) => -double.infinity // default: from bottom,
  getTouchLineEnd: (barData, index) => double.infinity //to top,
  ...
)

0.30.0 Copy Chapter

0.20.1 Copy Chapter

0.20.0-nullsafety1 Copy Chapter

0.12.3 Copy Chapter

0.12.2 Copy Chapter

0.12.1 Copy Chapter

0.12.0 Copy Chapter

0.11.1 Copy Chapter

0.11.0 Copy Chapter

0.10.1 Copy Chapter

0.10.0 Copy Chapter

0.9.4 Copy Chapter

0.9.3 Copy Chapter

0.9.2 Copy Chapter

0.9.0 Copy Chapter

0.8.7 Copy Chapter

0.8.6 Copy Chapter

0.8.5 Copy Chapter

0.8.4-test1 Copy Chapter

0.8.4 Copy Chapter

0.8.3 Copy Chapter

0.8.2 Copy Chapter

0.8.1 Copy Chapter

0.8.0 Copy Chapter

0.7.0 Copy Chapter

0.6.3 Copy Chapter

0.6.2 Copy Chapter

0.6.1 Copy Chapter

0.6.0 Copy Chapter

0.5.2 Copy Chapter

0.5.1 Copy Chapter

0.5.0 Copy Chapter

0.4.3 Copy Chapter

0.4.2 Copy Chapter

make sure              # Run tests + checkstyle (use before pushing)
make runTests          # flutter test
make analyze           # flutter analyze
make checkFormat       # Verify formatting (dry run)
make format            # Auto-format code
make checkstyle        # analyze + format check
make codeGen           # Generate mock files: dart run build_runner build --delete-conflicting-outputs
flutter test test/chart/line_chart/line_chart_painter_test.dart  # Run a single test file

Every chart type in lib/src/chart/ follows a consistent structure:
- {type}_chart.dart — Widget (extends ImplicitlyAnimatedWidget for built-in animations)
- {type}_chart_data.dart — Data classes (extend BaseChartData or AxisChartData)
- {type}_chart_painter.dart — Canvas drawing logic (extends BaseChartPainter)
- {type}_chart_renderer.dart — Rendering widget that builds the custom painter
- {type}_chart_helper.dart — Chart-specific utility functions

Class Hierarchy Copy Section

BaseChartData
├── AxisChartData (charts with X/Y axes)
│   ├── LineChartData
│   ├── BarChartData
│   ├── ScatterChartData
│   └── RadarChartData
├── PieChartData
└── CandlestickChartData

Painters follow the same hierarchy: BaseChartPainter → AxisChartPainter → specific painters.

Key Design Decisions Copy Section

- CanvasWrapper (lib/src/utils/canvas_wrapper.dart): All drawing goes through this proxy instead of Canvas directly, enabling unit testing of paint logic with Mockito.
- PaintHolder: Holds current data, target data, text scaler, and virtual rect — passed to painters for rendering and animation interpolation.
- Implicit animations: Charts use ImplicitlyAnimatedWidget with *DataTween classes. Default: 150ms linear.
- Equatable: All data classes use equatable for value equality.
- Lerp: Data models must implement a lerp() method to enable smooth implicit animations between states. See lib/src/utils/lerp.dart for helpers.
- Theme-aware text styles: When rendering text in painters, always use Utils().getThemeAwareTextStyle(context, style) instead of hardcoded fallback TextStyle values. This merges user-provided styles with the app's theme.

Touch System Copy Section

Each chart type defines *TouchData and uses FlTouchEvent base class. Touch callbacks are configured in the chart data classes.

Testing Copy Chapter

Tests mirror the lib/ structure under test/. Each chart has tests for data, painter, renderer, and helper. Painter tests mock CanvasWrapper to verify drawing calls.

Key test utilities:
- test/helper_methods.dart — Path/RRect equality helpers
- test/chart/data_pool.dart — Shared mock data
- *.mocks.dart files are generated by Mockito (run make codeGen to regenerate)

Code Style Copy Chapter

- Uses very_good_analysis linter (strict, with some relaxed rules in analysis_options.yaml)
- public_member_api_docs is disabled — public API docs are not enforced
- lines_longer_than_80_chars is disabled
- Generated *.mocks.dart files are excluded from analysis

PR Conventions Copy Chapter

PR titles must follow Conventional Commits: <type>: <Subject> (e.g., feat: Add tooltip support). Types: feat, fix, docs, style, refactor, perf, test, build, ci, chore, revert. Breaking changes use ! (e.g., feat!: Change API). Subject starts with a capital letter.

---

CONTRIBUTING (CONTRIBUTING.md) Copy Section

Contributing

Don't forget that open-source makes no sense without contributors. No matter how big your changes are, it helps us a lot, even if it is just a line of change.

This file is intended to be a guide for those who are interested in contributing to the FL Chart.

#### Below are the people who have contributed to FL Chart. We hope to have your picture here soon.
[](https://github.com/imaNNeo/fl_chart/graphs/contributors)

Let's get Started Copy Chapter

Make sure you have Flutter installed and on your path (follow the installation guide).

Follow these steps to clone FL Chart and set up the development environment:

1. Fork the repository

2. Clone the project, you can find it in your repositories: git clone https://github.com/your-username/fl_chart.git

3. Go into the cloned directory: cd fl_chart

4. Install all packages: flutter packages get

5. Try to run the sample app. It should work on all platforms (Android, iOS, Web, Linux, MacOS, Windows)

6. Create a new branch for your changes: git checkout -b your-branch-name.
The branch name doesn't matter for our project history (as we use Squash and Merge), but it's good practice to use descriptive names. You can read more about naming conventions here.

Before Modifying the Code Copy Chapter

If the work you intend to do is non-trivial, it is necessary to open
an issue before starting to write your code. This helps us and the
community to discuss the issue and choose what is deemed to be the
best solution.

Mention the related issues: Copy Section

We use Squash and Merge, which combines all your PR commits into a single, clean commit in the main branch.

Checking Your Code's Quality Copy Chapter

After you have made your changes, you have to make sure your code works
correctly and meets our guidelines. Our guidelines are:

You can simply run make checkstyle, and if you faced any formatting problem, run make format.

##### Run make checkstyle to ensure that your code is formatted correctly
- It runs flutter analyze to verify that there are no warnings or errors.
- It runs dart format --set-exit-if-changed --dry-run . to verify that code has formatted correctly.

#### Run make format to reformat the code
- It runs dart format . to format your code.


#### Run make runTests to ensure that all tests are passing.
- It runs flutter test under the hood.

#### Run make sure before pushing your code.
- It runs both make runTests and then make checkstyle sequentially with a single command.

Test coverage (unit tests) Copy Chapter

The title must follow this format:
<type>: <Subject>

- Type: Must be one of feat, fix, docs, style, refactor, perf, test, build, ci, chore, revert.
- Subject: Must start with a Capital Letter and adequately summarize the changes.
- Breaking Changes: If your PR contains a breaking change, add a ! after the type (e.g., feat!: Change PieChart API).

Examples:
- feat: Add rounded corners to PieChart
- fix: Resolve memory leak in BarChart
- docs: Update BarChart documentation

A GitHub Action will validate your PR title and will fail if it doesn't follow this convention.

PR Description Copy Section

invoked from the command line by running flutter analyze.

The following line activates a set of recommended lints for Flutter apps,

linter:
# The lint rules applied to this project can be customized in the
# section below to disable rules from the package:flutter_lints/flutter.yaml
# included above or to enable additional rules. A list of all available lints
# and their documentation is published at https://dart.dev/lints.
#
# Instead of disabling a lint rule for the entire project in the
# section below, it can also be suppressed for a single line of code
# or a specific dart file by using the // ignore: name_of_lint and
# // ignore_for_file: name_of_lint syntax on the line or in the file
# producing the lint.
rules:
# avoid_print: false # Uncomment to disable the avoid_print rule
# prefer_single_quotes: true # Uncomment to enable the prefer_single_quotes` rule

Additional information about this file can be found at

https://dart.dev/guides/language/analysis-options

---

Example/Pubspec.Yaml (example/pubspec.yaml) Copy Section

name: fl_chart_app
description: FL Chart App is an application to demonstrate samples of the fl_chart (A Flutter package to draw charts).
publish_to: 'none'
version: 1.2.0+10200

environment:
sdk: ^3.0.0
dependencies:
flutter:
sdk: flutter
flutter_web_plugins:
sdk: flutter
cupertino_icons: ^1.0.8
google_fonts: ^6.3.2
flutter_svg: ^2.2.1
universal_platform: ^1.1.0
flutter_staggered_grid_view: ^0.7.0
url_launcher: ^6.3.2
go_router: ^16.2.4
dartx: ^1.2.0
fl_chart:
path: ../
flutter_bloc: ^9.1.1
package_info_plus: ^9.0.0
equatable: ^2.0.7
intl: ^0.20.2

dev_dependencies:
flutter_test:
sdk: flutter
flutter_lints: ^6.0.0
msix: ^3.16.13

flutter:
uses-material-design: true
fonts:
- family: Digital
fonts:
- asset: assets/fonts/digital-7.ttf

assets:
- assets/icons/
- assets/fonts/
- assets/data/

msix_config:
display_name: FL Chart
publisher_display_name: App2Pack
identity_name: App2Pack.FLChart
publisher: CN=FBB84607-3250-433E-9236-B21FF8A84B05
msix_version: 1.2.0.0
logo_path: assets/icons/fl_chart_logo_icon.png
architecture: x64
capabilities: internetClient
store: true

---