A beautiful bezier line chart widget for flutter that is highly interactive and configurable.

Related tags

Charts bezier-chart
Overview

Bezier Chart

pub package Codemagic build status

A beautiful bezier line chart widget for flutter that is highly interactive and configurable.

Aeyrium Inc. is a provider of innovative software solutions for the business and commercial aviation

drawing drawing

drawing drawing

Features

  • Multi bezier lines
  • Allow numbers and datetimes
  • Gestures support like touch, pinch/zoom, scrolling
  • Highly customizable

Instructions

  • Long press and drag to display the indicator
  • Tap to dismiss the indicator
  • When using chart Scale different from Custom, you can change between WEEKLY, MONTHLY, YEARLY using pinch/zoom when the indicator is not visible.

Getting started

You should ensure that you add the dependency in your flutter project.

dependencies:
  bezier_chart: "^1.0.16"

You should then run flutter packages upgrade or update your packages in IntelliJ.

Example Project

There is a example project in the example folder. Check it out. Otherwise, keep reading to get up and running.

Usage

Custom Numbers

  Widget sample1(BuildContext context) {
  return Center(
    child: Container(
      color: Colors.red,
      height: MediaQuery.of(context).size.height / 2,
      width: MediaQuery.of(context).size.width * 0.9,
      child: BezierChart(
        bezierChartScale: BezierChartScale.CUSTOM,
        xAxisCustomValues: const [0, 5, 10, 15, 20, 25, 30, 35],
        series: const [
          BezierLine(
            data: const [
              DataPoint<double>(value: 10, xAxis: 0),
              DataPoint<double>(value: 130, xAxis: 5),
              DataPoint<double>(value: 50, xAxis: 10),
              DataPoint<double>(value: 150, xAxis: 15),
              DataPoint<double>(value: 75, xAxis: 20),
              DataPoint<double>(value: 0, xAxis: 25),
              DataPoint<double>(value: 5, xAxis: 30),
              DataPoint<double>(value: 45, xAxis: 35),
            ],
          ),
        ],
        config: BezierChartConfig(
          verticalIndicatorStrokeWidth: 3.0,
          verticalIndicatorColor: Colors.black26,
          showVerticalIndicator: true,
          backgroundColor: Colors.red,
          snap: false,
        ),
      ),
    ),
  );
}

Custom Numbers multiline

Widget sample2(BuildContext context) {
  return Center(
    child: Container(
      color: Colors.red,
      height: MediaQuery.of(context).size.height / 2,
      width: MediaQuery.of(context).size.width,
      child: BezierChart(
        bezierChartScale: BezierChartScale.CUSTOM,
        xAxisCustomValues: const [0, 3, 10, 15, 20, 25, 30, 35],
        series: const [
          BezierLine(
            label: "Custom 1",
            data: const [
              DataPoint<double>(value: 10, xAxis: 0),
              DataPoint<double>(value: 130, xAxis: 5),
              DataPoint<double>(value: 50, xAxis: 10),
              DataPoint<double>(value: 150, xAxis: 15),
              DataPoint<double>(value: 75, xAxis: 20),
              DataPoint<double>(value: 0, xAxis: 25),
              DataPoint<double>(value: 5, xAxis: 30),
              DataPoint<double>(value: 45, xAxis: 35),
            ],
          ),
          BezierLine(
            lineColor: Colors.blue,
            lineStrokeWidth: 2.0,
            label: "Custom 2",
            data: const [
              DataPoint<double>(value: 5, xAxis: 0),
              DataPoint<double>(value: 50, xAxis: 5),
              DataPoint<double>(value: 30, xAxis: 10),
              DataPoint<double>(value: 30, xAxis: 15),
              DataPoint<double>(value: 50, xAxis: 20),
              DataPoint<double>(value: 40, xAxis: 25),
              DataPoint<double>(value: 10, xAxis: 30),
              DataPoint<double>(value: 30, xAxis: 35),
            ],
          ),
          BezierLine(
            lineColor: Colors.black,
            lineStrokeWidth: 2.0,
            label: "Custom 3",
            data: const [
              DataPoint<double>(value: 5, xAxis: 0),
              DataPoint<double>(value: 10, xAxis: 5),
              DataPoint<double>(value: 35, xAxis: 10),
              DataPoint<double>(value: 40, xAxis: 15),
              DataPoint<double>(value: 40, xAxis: 20),
              DataPoint<double>(value: 40, xAxis: 25),
              DataPoint<double>(value: 9, xAxis: 30),
              DataPoint<double>(value: 11, xAxis: 35),
            ],
          ),
        ],
        config: BezierChartConfig(
          verticalIndicatorStrokeWidth: 2.0,
          verticalIndicatorColor: Colors.black12,
          showVerticalIndicator: true,
          contentWidth: MediaQuery.of(context).size.width * 2,
          backgroundColor: Colors.red,
        ),
      ),
    ),
  );
}

Weekly Chart

Widget sample3(BuildContext context) {
  final fromDate = DateTime(2019, 05, 22);
  final toDate = DateTime.now();

  final date1 = DateTime.now().subtract(Duration(days: 2));
  final date2 = DateTime.now().subtract(Duration(days: 3));

  return Center(
    child: Container(
      color: Colors.red,
      height: MediaQuery.of(context).size.height / 2,
      width: MediaQuery.of(context).size.width,
      child: BezierChart(
        fromDate: fromDate,
        bezierChartScale: BezierChartScale.WEEKLY,
        toDate: toDate,
        selectedDate: toDate,
        series: [
          BezierLine(
            label: "Duty",
            onMissingValue: (dateTime) {
              if (dateTime.day.isEven) {
                return 10.0;
              }
              return 5.0;
            },
            data: [
              DataPoint<DateTime>(value: 10, xAxis: date1),
              DataPoint<DateTime>(value: 50, xAxis: date2),
            ],
          ),
        ],
        config: BezierChartConfig(
          verticalIndicatorStrokeWidth: 3.0,
          verticalIndicatorColor: Colors.black26,
          showVerticalIndicator: true,
          verticalIndicatorFixedPosition: false,
          backgroundColor: Colors.red,
          footerHeight: 30.0,
        ),
      ),
    ),
  );
}

Monthly Chart

Widget sample4(BuildContext context) {
  final fromDate = DateTime(2018, 11, 22);
  final toDate = DateTime.now();

  final date1 = DateTime.now().subtract(Duration(days: 2));
  final date2 = DateTime.now().subtract(Duration(days: 3));

  final date3 = DateTime.now().subtract(Duration(days: 35));
  final date4 = DateTime.now().subtract(Duration(days: 36));

  final date5 = DateTime.now().subtract(Duration(days: 65));
  final date6 = DateTime.now().subtract(Duration(days: 64));

  return Center(
    child: Container(
      color: Colors.red,
      height: MediaQuery.of(context).size.height / 2,
      width: MediaQuery.of(context).size.width,
      child: BezierChart(
        bezierChartScale: BezierChartScale.MONTHLY,
        fromDate: fromDate,
        toDate: toDate,
        selectedDate: toDate,
        series: [
          BezierLine(
            label: "Duty",
            onMissingValue: (dateTime) {
              if (dateTime.month.isEven) {
                return 10.0;
              }
              return 5.0;
            },
            data: [
              DataPoint<DateTime>(value: 10, xAxis: date1),
              DataPoint<DateTime>(value: 50, xAxis: date2),
              DataPoint<DateTime>(value: 20, xAxis: date3),
              DataPoint<DateTime>(value: 80, xAxis: date4),
              DataPoint<DateTime>(value: 14, xAxis: date5),
              DataPoint<DateTime>(value: 30, xAxis: date6),
            ],
          ),
        ],
        config: BezierChartConfig(
          verticalIndicatorStrokeWidth: 3.0,
          verticalIndicatorColor: Colors.black26,
          showVerticalIndicator: true,
          verticalIndicatorFixedPosition: false,
          backgroundColor: Colors.red,
          footerHeight: 30.0,
        ),
      ),
    ),
  );
}

Yearly Chart

Widget sample5(BuildContext context) {
  final fromDate = DateTime(2012, 11, 22);
  final toDate = DateTime.now();

  final date1 = DateTime.now().subtract(Duration(days: 2));
  final date2 = DateTime.now().subtract(Duration(days: 3));

  final date3 = DateTime.now().subtract(Duration(days: 300));
  final date4 = DateTime.now().subtract(Duration(days: 320));

  final date5 = DateTime.now().subtract(Duration(days: 650));
  final date6 = DateTime.now().subtract(Duration(days: 652));

  return Center(
    child: Container(
      color: Colors.red,
      height: MediaQuery.of(context).size.height / 2,
      width: MediaQuery.of(context).size.width,
      child: BezierChart(
        bezierChartScale: BezierChartScale.YEARLY,
        fromDate: fromDate,
        toDate: toDate,
        selectedDate: toDate,
        series: [
          BezierLine(
            label: "Duty",
            onMissingValue: (dateTime) {
              if (dateTime.year.isEven) {
                return 20.0;
              }
              return 5.0;
            },
            data: [
              DataPoint<DateTime>(value: 10, xAxis: date1),
              DataPoint<DateTime>(value: 50, xAxis: date2),
              DataPoint<DateTime>(value: 100, xAxis: date3),
              DataPoint<DateTime>(value: 100, xAxis: date4),
              DataPoint<DateTime>(value: 40, xAxis: date5),
              DataPoint<DateTime>(value: 47, xAxis: date6),
            ],
          ),
          BezierLine(
            label: "Flight",
            lineColor: Colors.black26,
            onMissingValue: (dateTime) {
              if (dateTime.month.isEven) {
                return 10.0;
              }
              return 3.0;
            },
            data: [
              DataPoint<DateTime>(value: 20, xAxis: date1),
              DataPoint<DateTime>(value: 30, xAxis: date2),
              DataPoint<DateTime>(value: 150, xAxis: date3),
              DataPoint<DateTime>(value: 80, xAxis: date4),
              DataPoint<DateTime>(value: 45, xAxis: date5),
              DataPoint<DateTime>(value: 45, xAxis: date6),
            ],
          ),
        ],
        config: BezierChartConfig(
          verticalIndicatorStrokeWidth: 3.0,
          verticalIndicatorColor: Colors.black26,
          showVerticalIndicator: true,
          verticalIndicatorFixedPosition: false,
          backgroundGradient: LinearGradient(
            colors: [
              Colors.red[300],
              Colors.red[400],
              Colors.red[400],
              Colors.red[500],
              Colors.red,
            ],
            begin: Alignment.topCenter,
            end: Alignment.bottomCenter,
          ),
          footerHeight: 30.0,
        ),
      ),
    ),
  );
}

API

In this table, you can find all attributes provided by BezierChartConfig:

Attribute Default value Description
showVerticalIndicator true true if you want to display the vertical indicator
verticalIndicatorColor Colors.black
verticalIndicatorStrokeWidth 2.0 width of the line used for the vertical indicator
verticalIndicatorFixedPosition false true if you want to keep the info indicator in a fixed position
verticalLineFullHeight true if you want to display the vertical line in full height
bubbleIndicatorColor Colors.white Color of the bubble indicator, it's white by default
bubbleIndicatorTitleStyle const TextStyle() TextStyle for the title displayed inside the bubble indicator
bubbleIndicatorValueStyle const TextStyle() TextStyle for the value displayed inside the bubble indicator
bubbleIndicatorValueFormat null NumberFormat for the value displayed inside the bubble indicator
bubbleIndicatorLabelStyle const TextStyle() TextStyle for the label displayed inside the bubble indicator
backgroundColor Colors.transparent Color of the background of the chart
backgroundGradient Gradient of the background of the chart
displayYAxis false true if you want to display the value of the Y axis, [false] by default
stepsYAxis If [displayYAxis] is true, then you can set a positive value to display the steps of Y axis values.
e.g 1: stepsYAxis : 5 , if your maxValue is 100, then the Y values should be: [0,5,10,15 .... 100]
e.g 2: stepsYAxis : 10 , if your maxValue is 100, then the Y values should be: [10,20,30,40 .... 100]
startYAxisFromNonZeroValue true true if you want to start the values of Y axis from the minimum value of your Y values
yAxisTextStyle TextStyle of the text of the Y Axis values
xAxisTextStyle TextStyle of the text of the X Axis values
footerHeight 35.0 Height of the footer
showDataPoints true true if you want to display the data points
snap true true if you want to snap between each data point
pinchZoom true true if you want to enable pinch Zoom for bezierChartScale of date types
Pinch and zoom is used to switch beetwen charts of date types
contentWidth If the contentWidth is upper than the current width then the content will be scrollable (only valid for bezierChartScale = CUSTOM)
displayLinesXAxis false true if you want to display a vertical line on each X data point, it only works when there is one BezierLine
xLinesColor Colors.grey Color for the vertical line in each X point, only works when displayLinesXAxis is true
displayDataPointWhenNoValue true true if you want do display the dot when there is no value specified (The values inside onMissingValue)
physics const AlwaysScrollableScrollPhysics() The physics for horizontal ScrollView
updatePositionOnTap false true if you want do update bubble info on tap action instead of long press. This option will disable tap to hide bubble action

Aeyrium Inc

You can follow me on twitter @diegoveloper

Comments
  • Step Y Axis missing Label.  Bubble Indicator cut off at top.

    Step Y Axis missing Label. Bubble Indicator cut off at top.

    chart-with-step-y-axis

    We're having an issue when setting a Custom Scale chart to display the Y axis with steps set to 2.

    • The step number below the top indicator is missing. This only happens when doing a non-debug build.
    • The bubble indicator is cut off at the top

    Thank you for your efforts on this widget!

    `Container( color: Colors.transparent, height: 250, child: BezierChart( bezierChartScale: BezierChartScale.CUSTOM, xAxisCustomValues: const [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23], footerValueBuilder: (double value) {

                  int hour = value.toInt();
    
                  if(hour == 0) {
                    return '12 am';
                  } else if (hour < 12) {
                    return '$hour am';
                  } else {
                    return '${hour > 12 ? hour - 12 : hour} pm';
                  }
                },
                series: [
                  BezierLine(
                    lineColor: Colors.blue,
                    lineStrokeWidth: 2.0,
                    label: "feet",
                    data: dataPoints,
                  ),
                ],
                config: BezierChartConfig(
                  verticalIndicatorStrokeWidth: 2.0,
                  verticalIndicatorColor: Colors.grey.shade800,
                  bubbleIndicatorColor: Colors.grey.shade800,
                  displayYAxis: true,
                  startYAxisFromNonZeroValue: false,
                  stepsYAxis: 2,
                  contentWidth: 1400,
                  bubbleIndicatorTitleStyle: TextStyle(
                    color: Colors.grey.shade800,
                  ),
                  bubbleIndicatorValueStyle: TextStyle(
                    color: Colors.white
                  ),
                  yAxisTextStyle: TextStyle (
                    fontSize: 14
                  ),
                  xAxisTextStyle: TextStyle (
                    fontSize: 14
                  ),
                ),
              )
            ),`
    
    opened by PlymouthRock 17
  • Suggested Features

    Suggested Features

    Would it be possible to add the options below?

    • Display a vertical indicator at each x-value, instead of only the selected value.

    • Apply the gradient to only the space below the curve. Not the entire background.

    opened by wilscott 14
  • Web Platform not supported?

    Web Platform not supported?

    As with Flutter 1.9, the flutter web platform has merged with the main flutter repository, it should be possible to use libraries that function on the main flutter repository and make web builds with them. With this library, however, while trying to use this bezier-chart library I get the following error that makes my compiling skip.

    bezier_chart|lib/src/bezier_chart_widget.dart

    https://github.com/dart-lang/build/blob/master/docs/faq.md#how-can-i-resolve-skipped-compiling-warnings

    opened by Sekaiichi4 13
  • [Question] - is it possible to show data points only in case real y value is provided

    [Question] - is it possible to show data points only in case real y value is provided

    Hi there, I wonder if the chart can be configured to show data points on the curve only in case data series provide y value for specific x value? In case the y value is provided from onMissingValue callback, the point should not be drawn onto the curve. Again in case this is not possible (as I suspect), could be so kind to direct me to the code, so I can see if I can tweak it? Thanks!

    opened by angel1st 12
  • Graph does not update with state

    Graph does not update with state

    I want to have a few graphs in separate cupertino segment. When I switch between tabs the chart data is refreshed but the chart remains with the initial data (does not refresh - kind of like a singleton chart) Each tab has a different date range (monthly, weekly etc...)

    opened by guyzk 12
  • Format bubble value & updatePositionOnTap

    Format bubble value & updatePositionOnTap

    Hi,

    I've added 2 new options for this package:

    1. The ability to format value in bubble indicator by using NumberFormat from intl package: Eg: 123456789.01 -> 123,456,789.01

    2. While experience current package, I've found that the long press gesture to display bubble indicator on each point would not easy for end-user. The option updatePositionOnTap will solve that problem. However, there is a trade off with the ability to hide the indicator.

    Above options are optional and keep the default behavior from master repository

    Thanks

    opened by ltdangkhoa 11
  • Y axis Labels are overlapping.

    Y axis Labels are overlapping.

    Hi there, I have values starting at 150 with a max at 195. If the Y-axis starts at zero there is a big space below the chart so it is not very readable and the y-axis labels overlap each other. I would like my chart to start at 150 instead of zero so the decline or increase in the data points are more dramatic.

    Here is a screenshot of what I'm experiencing. https://pasteboard.co/IQj26LX.png image

    opened by organicintel 11
  • Y axis labels are overlaying chart line

    Y axis labels are overlaying chart line

    The problem is that when I start to scroll the chart, the Y axis labels are overlaying the chart line, making it hard to read the labels.

    Problem: image

    How it should look: image

    • The chart line should never pass beyound that imaginary white line when scrolling, the solution would be to make only the container of the chart line scrolable and the Y axis labels to be in a different container.
    enhancement waiting for customer response 
    opened by xylish7 11
  • Feature Request: Added parameter in BezierChartScale (QUARTER)- partially working. Help needed

    Feature Request: Added parameter in BezierChartScale (QUARTER)- partially working. Help needed

    Hi @diegoveloper, i'm trying to display points on chart every 15 minutes.

    I'm using the bezierChartAggregation AVERAGE with this DataSet:

    data: [
    DataPoint<DateTime>(value: 29, xAxis: DateTime(2020, 03, 17, 16, 29)),
    DataPoint<DateTime>(value: 25, xAxis: DateTime(2020, 03, 18, 22, 22)),
    DataPoint<DateTime>(value: 19.5, xAxis: DateTime(2020, 03, 20, 13, 38)),
    DataPoint<DateTime>(value: 17.65, xAxis: DateTime(2020, 03, 21, 13, 38)),
    DataPoint<DateTime>(value: 14.32, xAxis: DateTime(2020, 03, 22, 09, 38)),
    DataPoint<DateTime>(value: 34.5, xAxis: DateTime(2020, 03, 22, 16, 46)),
    DataPoint<DateTime>(value: 45.5,xAxis: DateTime(2020, 03, 23, 03, 46)),
    DataPoint<DateTime>(value: 28.5, xAxis: DateTime(2020, 03, 23, 05, 05)),
    DataPoint<DateTime>(value: 26.5, xAxis: DateTime(2020, 03, 23, 10, 23)),
    DataPoint<DateTime>(value: 18.5, xAxis: DateTime(2020, 03, 23, 09, 17)),
    ]
    

    The current behaviour is this: For the day 03/22 i have 2 values: 14.32 and 34.5 but on the graph for the same day, all day long, i have only the first between the two (as you can see in the screenshot) even if i don't have the values for other ranges.

    The behaviour i'm expecting should be: All 0 values for the missing timing in the DataSet and only 2 values for the point that DataSet contain (14.32 at about 09:38am and 34.5 at about 4:46pm)

    I hope that the screenshot in attachment will be useful.

    Thank you for the support.

    Schermata 2020-03-23 alle 11 26 08 Schermata 2020-03-23 alle 11 26 19 Schermata 2020-03-23 alle 11 26 42 Schermata 2020-03-23 alle 11 26 50

    This is the modified library

    bezier_chart_widget.txt

    opened by fagottino 10
  • Trying to animate datapoints. Almost have it, but not quite.

    Trying to animate datapoints. Almost have it, but not quite.

    I was trying to use the below to animate the datapoints. I feel like it is close, but it's just not happening. If I click on the graph the points all jump into place, but it's not actually performing the tween. I am guessing it is missing a set state, but I am not quite sure how I would implement that. Any suggestions?

    An example can be seen here. https://i.imgur.com/jn7rEib.gifv

    Thanks, -MH

      double numberAnimate(double order, double current) {
        var adjustedValue = new Tween(begin: 1.0, end: current).animate(
          new CurvedAnimation(
            parent: controller,
            curve: new Interval(
              0.350, // + (order * 0.1),
              0.650,
              curve: Curves.easeIn,
            ),
          ),
        );
        return adjustedValue.value;
      }
    
    
              data:  [
                      DataPoint<double>(
                          value: widget._controller
                              .numberAnimate(date7.day.truncateToDouble(), 10.0),
                          xAxis: date7.day.truncateToDouble()),
                      DataPoint<double>(
                          value: widget._controller
                              .numberAnimate(date6.day.truncateToDouble(), 30.0),
                          xAxis: date6.day.truncateToDouble()),
                      DataPoint<double>(
                          value: widget._controller
                              .numberAnimate(date5.day.truncateToDouble(), 50),
                          xAxis: date5.day.truncateToDouble()),
                      DataPoint<double>(
                          value: widget._controller
                              .numberAnimate(date4.day.truncateToDouble(), 20),
                          xAxis: date4.day.truncateToDouble()),
                      DataPoint<double>(
                          value: widget._controller
                              .numberAnimate(date3.day.truncateToDouble(), 80),
                          xAxis: date3.day.truncateToDouble()),
                      DataPoint<double>(
                          value: widget._controller
                              .numberAnimate(date2.day.truncateToDouble(), 14),
                          xAxis: date2.day.truncateToDouble()),
                      DataPoint<double>(
                          value: widget._controller
                              .numberAnimate(date1.day.truncateToDouble(), 30),
                          xAxis: date1.day.truncateToDouble()),
                    ],
    
    opened by MostHated 10
  • Feature Requests

    Feature Requests

    A few things to make the library even more amazing:

    1. Interactive legends For charts with multiple lines it would be great if there was an option to add legends on top of the chart. The legends will get the same text as the labels in the bubble. The legend shape and type could be one of 2 options a) Informative - A simple circle/square with the same color as the line next to the text (like a regular legend) b) Interactive - A checkbox with the same color as the line that when checked will show/hide the line from the chart.

    2. When using the monthly chart and the series is less than a year, the width is smaller than the screen width (or the charts given width). It could be awesome to get an option to force filling the charts width for a more professional look.

    3. Hourly chart - A series of a 24 hour period showing the data per hour

    opened by guyzk 10
  • Missing Null Safety Support!

    Missing Null Safety Support!

    opened by Raunakk02 12
  • Looking for maintainers of this package

    Looking for maintainers of this package

    Hey people, I noticed a lot of issues and Pull requests have been made, I was in charge of this package time ago but now I can't continue doing the support for this.

    I know the community is great (that's what we see some PR's), but I don't have time to review PRs/Issues now.

    Any volunteer who wants to have this responsibility?

    opened by diegoveloper 2
  • Scrolling not working on 1.0.17

    Scrolling not working on 1.0.17

    Scrolling is not working on version 1.0.17 and 1.0.17+1. I've downgraded to 1.0.16 and it works. To replicate this just try the second example using the 17 version.

    opened by MisterWeeMan 0
  • updatePositionOnTap do not work

    updatePositionOnTap do not work

    updatePositionOnTap only work like this, in dedug,fist set updatePositionOnTap=false,after screan show,then set updatePositionOnTap=true. if updatePositionOnTap=true in first,it do not work.

    opened by hu70258tao 2
Owner
Aeyrium
Aeyrium
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 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
Animated line chart for flutter

fl_animated_linechart An animated chart library for flutter. Support for datetime axis Multiple y axis, supporting different units Highlight selection

null 51 Sep 25, 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
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
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
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
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
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
: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
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
A Flutter widget to use Apache ECharts (incubating) in a reactive way.

中文 [![pub](https://img.shields.io/pub/v/flutter_echarts.svg)](https://pub.dev/packages/flutter_echarts) A Flutter widget to use Apache ECharts in a re

LIN Chen 629 Dec 29, 2022
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
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