Animated line chart for flutter

Overview

fl_animated_linechart

Codemagic build status

Animations

An animated chart library for flutter.

  • Support for datetime axis
  • Multiple y axis, supporting different units
  • Highlight selection
  • Animation of the chart
  • Tested with more than 3000 points and still performing

There are currently two different charts:

  • line chart
  • area chart

Getting Started

Try the sample project or include in your project.

Highlight for the line chart: Chart example with highlight

Area chart: Area Chart example Area Chart example

Example code:

LineChart lineChart = LineChart.fromDateTimeMaps([line1, line2], [Colors.green, Colors.blue]);

return Scaffold(
  appBar: AppBar(
    title: Text(widget.title),
  ),
  body: Container(
    child: Column(
        mainAxisSize: MainAxisSize.max,
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: [
          Expanded(child: AnimatedLineChart(lineChart)),
        ]
    ),
  ),
);

The example app, can toggle between line chart and area chart. Example app

Comments
  • Minor changes and improvements

    Minor changes and improvements

    In this pull request I add the ability to set a custom label for yAxis (still use units[index] if not provided). Fix exception when DateTime in series is the same for all values in Map(offset in NaN exception). Update example app to remove deprecated FlatButton and add windows support (tested on my windows 11 pc).

    opened by AndriiHarashchak 4
  • How to show three line graph

    How to show three line graph

    Hi @JacobJust

    According to your implementation, i can able to show only two charts. I need to show three lines (High,low,medium) graph. How to acheive it? In your pictorial representation, you have showed three graphs. Let me have some examples for showing three lines as i am facing exception

    Thanks in advance

    opened by srishalu 1
  • Migration to null safety

    Migration to null safety

    In this pull request, this package migrated this package to null safety. The basic functionality is working, but need to do some minor changes in the components to remove some not fully correct transitions.

    opened by AndriiHarashchak 0
  • Customize text and color properties

    Customize text and color properties

    Is it possible to customize the text and color properties of different parts of the chart? ex. color of the horizontal and vertical lines, color and font of text?

    opened by ewohtech 0
  • This is the best line graph plugin for Flutter I've ever used. Thank you so much for sharing

    This is the best line graph plugin for Flutter I've ever used. Thank you so much for sharing

    There are some disadvantages, such as the inability to set the Y axis minimum, too few configurable parameters, and a slightly more complex function that requires a large amount of source code modification. It is highly recommended to add a configurable parameter: Y axis minimum

    opened by jjvu-xiao 0
  • Is it possible to plot simple data (not dated) ?

    Is it possible to plot simple data (not dated) ?

    I managed to make the example run, but I can't find a way to plot a simple x,y data line. My attempt was to do so :

    var points = [ChartPoint(1.0,2.0),ChartPoint(2.0,0.0),ChartPoint(3.0,4.0),ChartPoint(4.0,1.0),ChartPoint(5.0,4.0),ChartPoint(6.0,6.0)];
    var data = ChartLine(points,Color(0xFF42A5F5),'°C');
    chart = LineChart([data],??);
    

    but the fromTo arguments seems to want "Dates" ... I don't have any :) Any ideas ? Thanks

    opened by quai20 0
  • Error when data length is 1

    Error when data length is 1

    Hi there! Great library

    Only issue I have is when length of the data map is only 1, my layout shifts weirdly and I get this error:

    Exception caught by rendering library The following assertion was thrown during paint(): Offset argument contained a NaN value. 'dart:ui/painting.dart': Failed assertion: line 38: ''

    Either the assertion indicates an error in the framework itself, or we should provide substantially more information in this error message to help you determine and fix the underlying cause. In either case, please report this assertion by filing a bug on GitHub: https://github.com/flutter/flutter/issues/new?template=BUG.md

    The relevant error-causing widget was AnimatedLineChart-[#5c159] lib\…\anomaly_tag_screens\wristbands_screen.dart:190 When the exception was thrown, this was the stack #2 _offsetIsValid (dart:ui/painting.dart:38:10) #3 Canvas.drawCircle (dart:ui/painting.dart:3643:12) #4 ChartPainter._drawLines.. (package:fl_animated_linechart/chart/animated_line_chart.dart:351:40) #5 List.forEach (dart:core-patch/growable_array.dart:285:8) #6 ChartPainter._drawLines. (package:fl_animated_linechart/chart/animated_line_chart.dart:351:18) ... The following RenderObject was being processed when the exception was fired: RenderCustomPaint#996d4 RenderObject: RenderCustomPaint#996d4 parentData: (can use size) constraints: BoxConstraints(w=330.0, h=229.5) size: Size(330.0, 229.5)

    opened by hsynaksu 2
Releases(1.0.2)
Owner
null
Sliver bar chart - A package that supports Bar Chart in a Flutter Sliver

Sliver bar chart - A package that supports Bar Chart in a Flutter Sliver. This Package allows us to add Bar Chart in Sliver and sets a Bar Chart as a Header on Slivers Scroll.

MindInventory 19 Oct 11, 2022
A beautiful bezier line chart widget for flutter that is highly interactive and configurable.

Bezier Chart A beautiful bezier line chart widget for flutter that is highly interactive and configurable. Features Multi bezier lines Allow numbers a

Aeyrium 428 Dec 21, 2022
A powerful 🚀 Android chart view / graph view library, supporting line- bar- pie- radar- bubble- and candlestick charts as well as scaling, panning and animations.

⚡ A powerful & easy to use chart library for Android ⚡ Charts is the iOS version of this library Table of Contents Quick Start Gradle Maven Documentat

Philipp Jahoda 36k Dec 28, 2022
A scrollable time chart in Flutter.

time_chart An amazing time chart in Flutter. Chart Types TimeChart AmountChart Getting Started 1 - Depend on it Add it to your package's pubspec.yaml

Minseong Kim 26 Oct 28, 2022
This project is used to introduce the use of flutter canvas, include draw chart, clip image's path and draw progress indicator.

flutter_canvas This project is used to introduce the use of flutter canvas, include draw chart, clip image's path and draw progress indicator. draw ch

YouXianMing 9 Oct 27, 2022
Maybe this is the best k chart in Flutter.Support drag,scale,long press,fling.And easy to use.

k_chart Maybe this is the best k chart in Flutter.Support drag,scale,long press,fling.And easy to use. display image gif Getting Started Install depen

OpenFlutter 342 Jan 9, 2023
Flutter chart library contains depth charts supporting various indicators and zooming

flutter_k_chart 介绍 一个仿火币的flutter图表库包含深度图,支持各种指标及放大缩小、平移等操作 webdemo演示 Demo v0.1.0:下载 APK 演示 简单用例 1.在 pubspec.yaml 中添加依赖 本项目数据来自火币openApi,火币的接口可能需要翻墙,接口

gwh 259 Dec 30, 2022
Flutter Pie chart with animation

Pie Chart This Flutter package provides a Pie Chart Widget with cool animation. Live Demo: https://apgapg.github.io/pie_chart/ ?? Try LIVE Demo Live D

Ayush P Gupta 161 Dec 24, 2022
Basic radar chart for Flutter

flutter_radar_chart Animated radar chart for Flutter inspired by The Python Graph Gallery (https://python-graph-gallery.com/radar-chart/). Follow the

Dan Panaite 44 Dec 10, 2022
A simple radial chart for Flutter

A simple radial chart for Flutter

null 2 Jun 2, 2022
A simple candlestick chart for flutter. Supports smooth scroll and zoom

simple_candlestick_chart A simple candlestick chart for flutter. Supports smooth

7c00 14 Oct 17, 2022
Flutter heatmap calendar inspired by github contribution chart. [traditional mode / calendar mode]

Flutter Heatmap Flutter heatmap calendar inspired by github contribution chart.

Kim Seung Hwan 1 Dec 26, 2021
📆 Flutter heatmap calendar inspired by github contribution chart.

Flutter Heatmap Calendar Flutter Heatmap Calendar inspired by github contribution chart. Flutter Heatmap Calendar provides traditional contribution ch

Kim Seung Hwan 22 Jan 1, 2023
Stores and manages the data of your week expenses with a chart

personal_expenses_app A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you st

null 1 Dec 26, 2021
Animated radial and pie charts for Flutter

Flutter Circular Chart A library for creating animated circular chart widgets with Flutter, inspired by Zero to One with Flutter. Overview Create easi

Victor Choueiri 387 Dec 26, 2022
:bar_chart: [wip] Create beautiful, responsive, animated charts using a simple and intuitive API.

fcharts A work-in-progress chart library for Flutter. Until version 1.0.0 the API is subject to change drastically. Needless to say, fcharts is not pr

Keenan Thompson 323 Dec 21, 2022
Charts Library for Flutter, written in Dart with Flutter.

Table of Contents New in the current release Illustration of the new "iterative auto layout" feature Autolayout step 1 Autolayout step 2 Autolayout st

Milan Zimmermann 225 Dec 25, 2022
Beautiful sparkline charts for Flutter

flutter_sparkline Beautiful sparkline charts for Flutter. Installation Install the latest version from pub. Quick Start Import the package, create a S

Victor Choueiri 255 Dec 21, 2022
Elegant OHLC Candlestick and Trade Volume charts for @Flutter

flutter_candlesticks Elegant OHLC Candlestick and Trade Volume charts for Flutter Usage Install for Flutter with pub. Property Description data Requir

Trent Piercy 402 Dec 21, 2022