Charts Library for Flutter, written in Dart with Flutter.

Overview

Table of Contents

New in the current release

Current release is 0.2.0

See <CHANGELOG.md> for the list of new features and bug fixes in this release.

As noted in the CHANGELOG, the most important new features are:

  • null safety support

Illustration of the new "iterative auto layout" feature

This section illustrates how the auto layout behaves when less and less horizontal space is available to display the chart.

Flutter chart library automatically checks for the X label overlap, and follows with rule-based iterative re-layout, to prevent labels running into each other.

To illustrate "stressed" horizontal space for the chart, we are gradually adding a text widget containing and increasing number of '<' signs on the right of the chart.

Autolayout step 1

Let's say there are six labels on a chart, and sufficient space to display labels horizontally. The result may look like this:

img

We can see all x axis labels displayed it full, horizontally oriented.

Autolayout step 2

Next, let us make less available space by taking away some space on the right with a wider text label like this '<<<<<<'

img

We can see the labels were automatically tilted by angle ChartOptions labelTiltRadians for the labels to fit.

Autolayout step 3

Next, let us make even less available space by taking away some space on the right with a wider text label like this '<<<<<<<<<<<'.

img

We can see that labels are not only tilted, but also automatically skipped (every 2nd) for labels not to overlap.

Autolayout step 4

Next, let us make even less available space some more compared to step 3, with even a wider text label like this '<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<'.

img

We can see even more labels were skipped for labels to prevent overlap, the chart is showing evey 5th label

Autolayout step 5

Last, let us take away extreme amount of horizontal space by using '<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<',

img

Here we can see the "default auto layout" finally gave up, and overlaps labels. Also, the legend is now hidded, as there is not enough horizontal space.

How to include the flutter_charts library in your application

Flutter Charts is a charting library for Flutter, written in Flutter. Currently, column chart and line chart are supported.

The package is published on pub for inclusion in your application's pubspec.yaml: The Installing tab on https://pub.dartlang.org/packages/flutter_charts contains instructions on how to include the flutter_charts package in your application.

A chart created using flutter_charts - example application

There is an example application in flutter_charts: example/lib/main.dart. It shows how a Flutter Chart can be included in a Flutter application.

You can run the example application using one of the methods (6, 7) in the paragraph below.

This application is also used as a base to show several sample charts in the paragraphs below.

Here we show just two simple sample outputs, a column chart and a line chart.

A sample Vertical Bar Chart (Column Chart)

img

A sample point and Line Chart (Line Chart)

img

The output is generated from semi-random data. You can click the blue + button to rerun the chart with a different set of rows.

Known packages, libraries and apps that use this this flutter_charts package

  1. Michael R. Fairhurst's Language reader app - see https://github.com/MichaelRFairhurst/flutter-language-reader-app

Flutter Charts - an overview: data, options, classes

Before we show several examples of charts, a few notes.

  • The ChartData class: allows to define data - X labels, Y values, (optional) Y labels, each-dataRow (series) legends, each-dataRow (series) color. The list below provides a summary description of each item
    • X labels: ChartData.xLabels allow to define X labels. Setting xLabels is required, but client can set them to empty strings.
    • Y values: ChartData.dataRows allow to define Y values in rows. Assumption: size of each data row in ChartData.dataRows is the same, and each data row size == ChartData.xLabels.size
    • Y labels (optional): Normally, Y labels are generated from data. The option ChartOptions.useUserProvidedYLabels (default true), asks flutter_charts to data-generate Y labels. If this option is set to false, then ChartData.yLabels must be set. Any number of such user-provided Y labels is allowed.
    • Each-dataRow (each series) legends: ChartData.dataRowsLegends allow to define a legend for each data row in ChartData.dataRows. Assumption: ChartData.dataRows.size == ChartData.dataRowsLegends.size
    • Each-dataRow (each series) color: ChartData.dataRowsColors allow to define a color for each data row in ChartData.dataRows. Assumption: ChartData.dataRows.size == ChartData.dataRowsColors.size
  • The ChartOptions class: allows to define options, by using it's defaults, or setting some options to non default values. There are also LineChartOptions and VerticalBarChartOptions classes.
  • Support for randomly generated data, colors, labels: Flutter Charts also provides randomly generated data, in the class RandomChartData. This class generates:
    • Y values data,
    • X labels,
    • Series colors,
    • Series legends
  • Currently the only purpose of RandomChartData is for use in the examples below. To be clear, RandomChartData Y values, series colors, and series legends are not completely random - they hardcode some demoable label, legends, color values, and data ranges (data random within the range).

Flutter Charts - examples: LineChart and VerticalBarChart. Code and resulting charts

Flutter Charts code allow to define the following data elements:

*Data (Y values)* User-Provided or Random
*X Labels* User-Provided or Random
*Options including Colors* User-Provided or Random
*Data Rows Legends* User-Provided or Random
*Y Labels* User-Provided or Data-Generated

The examples below show a few alternative code snippets (User-Provided or Random data, labels, option) and the resulting charts.

The chart images were obtained by substituting the code snippet to the file:example/lib/main.dart code.

Random Data (Y values), Random X Labels, Random Colors, Random Data Rows Legends, Data-Generated Y Labels.

This example shows that Data-Generated Y labels is the default.
Flutter Charts support reasonably intelligently generated Y Labels from data, including dealing with negatives.

Code in defineOptionsAndData():

void defineOptionsAndData() {
  _lineChartOptions = new LineChartOptions();
  _verticalBarChartOptions = new VerticalBarChartOptions();
  _chartData = new RandomChartData(useUserProvidedYLabels: _lineChartOptions.useUserProvidedYLabels);
}

Result line chart:

img

Result vertical bar chart:

img

User-Provided Data (Y values), User-Provided X Labels, Random Colors, User-Provided Data Rows Legends, Data-Generated Y Labels,

Code in defineOptionsAndData():

void defineOptionsAndData() {
  _lineChartOptions = new LineChartOptions();
  _verticalBarChartOptions = new VerticalBarChartOptions();
  _chartData = new ChartData();
  _chartData.dataRowsLegends = [
    "Spring",
    "Summer",
    "Fall",
    "Winter"];
  _chartData.dataRows = [
    [10.0, 20.0,  5.0,  30.0,  5.0,  20.0, ],
    [30.0, 60.0, 16.0, 100.0, 12.0, 120.0, ],
    [25.0, 40.0, 20.0,  80.0, 12.0,  90.0, ],
    [12.0, 30.0, 18.0,  40.0, 10.0,  30.0, ],
  ];
  _chartData.xLabels =  ["Wolf", "Deer", "Owl", "Mouse", "Hawk", "Vole"];
  _chartData.assignDataRowsDefaultColors();
  // Note: ChartOptions.useUserProvidedYLabels default is still used (false);
}

Result line chart:

img

Result vertical bar chart:

img

User-Provided Data (Y values), User-Provided X Labels, Random Colors, User-Provided Data Rows Legends, User-Provided Y Labels

This example show how to use the option useUserProvidedYLabels, and scaling of data to the Y labels range.

Code in defineOptionsAndData():

void defineOptionsAndData() {
  // This example shows user defined Y Labels.
  //   When setting Y labels by user, the dataRows value scale
  //   is irrelevant. User can use for example interval <0, 1>,
  //   <0, 10>, or any other, even negative ranges. Here we use <0-10>.
  //   The only thing that matters is  the relative values in the data Rows.

  // Note that current implementation sets
  // the minimum of dataRows range (1.0 in this example)
  // on the level of the first Y Label ("Ok" in this example),
  // and the maximum  of dataRows range (10.0 in this example)
  // on the level of the last Y Label ("High" in this example).
  // This is not desirable, we need to add a userProvidedYLabelsBoundaryMin/Max.
  _lineChartOptions = new LineChartOptions();
  _verticalBarChartOptions = new VerticalBarChartOptions();
  _chartData = new ChartData();
  _chartData.dataRowsLegends = [
    "Java",
    "Dart",
    "Python",
    "Newspeak"];
  _chartData.dataRows = [
    [9.0, 4.0,  3.0,  9.0, ],
    [7.0, 6.0,  7.0,  6.0, ],
    [4.0, 9.0,  6.0,  8.0, ],
    [3.0, 9.0, 10.0,  1.0, ],
  ];
  _chartData.xLabels =  ["Fast", "Readable", "Novel", "Use"];
  _chartData.dataRowsColors = [
    Colors.blue,
    Colors.yellow,
    Colors.green,
    Colors.amber,
  ];
  _lineChartOptions.useUserProvidedYLabels = true; // use the labels below on Y axis
  _chartData.yLabels = [
    "Ok",
    "Higher",
    "High",
  ];
}

Result line chart:

img (Disclaimer: Not actually measured)

Result vertical bar chart: Here the Y values should be numeric (if any) as manual labeling "Ok", "Higher", High" does not make sense for stacked type charts.

img (Disclaimer: Not actually measured)

VerticalBar Chart - one more example, showing positive/negative stacks:

User-Provided Data (Y values), User-Provided X Labels, User-Provided Colors, User-Provided Data Rows Legends, User-Provided Y Labels

This example has again user defined Y Labels, with a bar chart, using the smart auto-layout of user defined Y Labels. The chart shows negative and positive values similar to %down/%up stock charts.

Code in defineOptionsAndData():

void defineOptionsAndData() {
  // This example shows user defined Y Labels with
  // a bar chart, showing negative and positive values
  // similar to %down/%up stock charts.
  _lineChartOptions = new LineChartOptions();
  _verticalBarChartOptions = new VerticalBarChartOptions();
  _chartData = new ChartData();
  _chartData.dataRowsLegends = [
    "-2%_0%",
    "<-2%",
    "0%_+2%",
    ">+2%"];
  // each column absolute values should add to same number todo- 100 would make more sense, to represent 100% of stocks in each category
  _chartData.dataRows = [
    [-9.0, -8.0,  -8.0,  -5.0, -8.0, ],
    [-1.0, -2.0,  -4.0,  -1.0, -1.0, ],
    [7.0, 8.0,  7.0, 11.0, 9.0, ],
    [3.0, 2.0, 1.0,  3.0,  3.0, ],
  ];
  _chartData.xLabels =  ["Energy", "Health", "Finance", "Chips", "Oil"];
  _chartData.dataRowsColors = [
    Colors.grey,
    Colors.red,
    Colors.greenAccent,
    Colors.black,
  ];
  _lineChartOptions.useUserProvidedYLabels = false; // use labels below
  //_chartData.yLabels = [
  //  "Ok",
  //  "Higher",
  //  "High",
  //];
}

Result vertical bar chart:

img

(there is a bug here,see Known Bugs)

Comments
  • how do I use this?

    how do I use this?

    If I add

        flutter_charts: ^0.1.0
    

    to my pubspec.yaml of a fresh flutter project, I get

    ERR : Incompatible dependencies on flutter:
        | - flutter_charts 0.1.0 depends on it from source hosted
        | - flutter_test 0.0.15 depends on it from source sdk
        | - reader depends on it from source sdk
    

    I ordinarily would not consider this something I should go to you about, except for that this is what your instructions say on pub's site.

    opened by MichaelRFairhurst 8
  • Change font family

    Change font family

    Hi,

    First, Thank you so much for this amazing packages. It's really good.

    I've a problem with font family. In my theme, I'm using a custom font family, but the graph is not using it.

    I've seen that there is a class called LabelCommonOptions, but there isn't a option to change font family. I've tried to wrap the LineChart class with a DefaultTextStyle widget, but it doesn't work too.

    Is there any way to modify it?

    Thanks.

    opened by manuelcodigobase 6
  • Offset argument contained a NaN value

    Offset argument contained a NaN value

    Hi, I want to really commend the great work done so far with this library.

    I experience the error above when i have data rows as below

    _chartData.dataRows = [
          [0.0, 0.0, 0.0, 0.0, 0.0],
          [0.0, 0.0, 0.0, 0.0, 0.0],
          [0.0, 0.0, 0.0, 0.0, 0.0],
          [0.0, 0.0, 0.0, 0.0, 0.0],
        ];
    

    Part of the error message:

    flutter: ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
    flutter: The following assertion was thrown during paint():
    flutter: Offset argument contained a NaN value.
    flutter: 'dart:ui/painting.dart': Failed assertion: line 38: '<optimized out>'
    flutter:
    flutter: Either the assertion indicates an error in the framework itself, or we should provide substantially
    flutter: more information in this error message to help you determine and fix the underlying cause.
    flutter: In either case, please report this assertion by filing a bug on GitHub:
    flutter:   https://github.com/flutter/flutter/issues/new?template=BUG.md
    flutter:
    flutter: When the exception was thrown, this was the stack:
    flutter: #2      _offsetIsValid (dart:ui/painting.dart:38:10)
    flutter: #3      Canvas.drawLine (dart:ui/painting.dart:3146:12)
    flutter: #4      LineContainer.paint (package:flutter_charts/src/chart/line_container.dart:20:12)
    flutter: #5      GridLinesContainer.paint.<anonymous closure> (package:flutter_charts/src/chart/container.dart:1094:62)
    flutter: #6      List.forEach (dart:core/runtime/libgrowable_array.dart:277:8)
    flutter: #7      GridLinesContainer.paint (package:flutter_charts/src/chart/container.dart:1094:21)
    flutter: #8      DataContainer.paint (package:flutter_charts/src/chart/container.dart:1028:31)
    flutter: #9      ChartPainter.drawGrid (package:flutter_charts/src/chart/painter.dart:76:29)
    flutter: #10     ChartPainter.paint (package:flutter_charts/src/chart/painter.dart:55:5)
    flutter: #11     RenderCustomPaint._paintWithPainter (package:flutter/src/rendering/custom_paint.dart:521:13)
    flutter: #12     RenderCustomPaint.paint (package:flutter/src/rendering/custom_paint.dart:559:7)
    flutter: #13     RenderObject._paintWithContext
    
    opened by papakay 4
  • Ordering of paints for overlapping lines

    Ordering of paints for overlapping lines

    Hey Milan,

    I noticed that if I make two lines in the line chart, it seems that the first line gets painted before the second line. Could this be reversed?

    The reason here is that the first line's legend shows up first in the chart, so it should be the "prioritized" line most of the time. However, if the second line overlaps it, it will be drawn over the first line.

    This makes it hard to clearly prioritize one line over another -- its either later in the legend, or its underneath the rest.

    opened by MichaelRFairhurst 4
  • Coloring support for points in line chart

    Coloring support for points in line chart

    Hey Milan,

    it looks like I can change the size of the points on the line chart (inner radius, outer radius). Is there a way I can change the color as well?

    opened by MichaelRFairhurst 4
  • useUserProvidedYLabels cannot be used as a setting because it is final

    useUserProvidedYLabels cannot be used as a setting because it is final

    I have been trying to run the sample code but it is giving me the following error on the line:

     _lineChartOptions.useUserProvidedYLabels = true;
    

    It says:

    useUserProvidedYLabels cannot be used as a setting because it is final

    Please may you fix.

    opened by Winghin2517 3
  • View seconds in timeseries chart

    View seconds in timeseries chart

    I am using flutter_charts to plot data online that I receive from a sensor at 6Hz. The graph is great, but I found no way to show the seconds in the X axis as AutoDateTimeTickFormatterSpec does not have a seconds option. I tried using a linechart instead with the number of seconds since start, but the graph does not scroll (removing points does not cause the X axis to update bounds).Am I missing something? Is there an existing way of doing this?

    Thanks!

    opened by danielle-h 2
  • PieChart放在listview的第一个item报错

    PieChart放在listview的第一个item报错

    I/flutter (20853): ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════ I/flutter (20853): The following assertion was thrown during performLayout(): I/flutter (20853): FlutterError contained multiple error summaries. I/flutter (20853): All FlutterError objects should have only a single short (one line) summary description of the I/flutter (20853): problem that was detected. I/flutter (20853): Malformed FlutterError: I/flutter (20853): RenderCustomMultiChildLayoutBox object was given an infinite size during layout. I/flutter (20853): This probably means that it is a render object that tries to be as big as possible, but it was put I/flutter (20853): inside another render object that allows its children to pick their own size. I/flutter (20853): RenderCustomMultiChildLayoutBox object was given an infinite size during layout. I/flutter (20853): This probably means that it is a render object that tries to be as big as possible, but it was put I/flutter (20853): inside another render object that allows its children to pick their own size. I/flutter (20853): The nearest ancestor providing an unbounded height constraint is: RenderIndexedSemantics#c2871 relayoutBoundary=up3 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE: I/flutter (20853): creator: IndexedSemantics ← NotificationListener ← KeepAlive ← I/flutter (20853): AutomaticKeepAlive ← KeyedSubtree ← SliverList ← MediaQuery ← SliverPadding ← Viewport ← I/flutter (20853): IgnorePointer-[GlobalKey#f9e30] ← Semantics ← Listener ← ⋯ I/flutter (20853): parentData: index=0; layoutOffset=0.0 (can use size) I/flutter (20853): constraints: BoxConstraints(w=360.0, 0.0<=h<=Infinity) I/flutter (20853): semantic boundary I/flutter (20853): size: MISSING I/flutter (20853): index: 0 I/flutter (20853): The constraints that applied to the RenderCustomMultiChildLayoutBox were: I/flutter (20853): BoxConstraints(w=360.0, 0.0<=h<=Infinity) I/flutter (20853): The exact size it was given was: I/flutter (20853): Size(360.0, Infinity) I/flutter (20853): See https://flutter.dev/docs/development/ui/layout/box-constraints for more information. I/flutter (20853): I/flutter (20853): The malformed error has 2 summaries. I/flutter (20853): Summary 1: RenderCustomMultiChildLayoutBox object was given an infinite size during layout. I/flutter (20853): Summary 2: RenderCustomMultiChildLayoutBox object was given an infinite size during layout. I/flutter (20853): I/flutter (20853): This error should still help you solve your problem, however please also report this malformed error I/flutter (20853): in the framework by filing a bug on GitHub: I/flutter (20853): https://github.com/flutter/flutter/issues/new?template=BUG.md I/flutter (20853): I/flutter (20853): When the exception was thrown, this was the stack: I/flutter (20853): #0 new FlutterError.fromParts. (package:flutter/src/foundation/assertions.dart:540:9) I/flutter (20853): #1 new FlutterError.fromParts (package:flutter/src/foundation/assertions.dart:543:6) I/flutter (20853): #2 RenderBox.debugAssertDoesMeetConstraints. (package:flutter/src/rendering/box.dart:1966:28) I/flutter (20853): #3 RenderBox.debugAssertDoesMeetConstraints (package:flutter/src/rendering/box.dart:2029:6) I/flutter (20853): #4 RenderBox.size=. (package:flutter/src/rendering/box.dart:1740:7) I/flutter (20853): #5 RenderBox.size= (package:flutter/src/rendering/box.dart:1742:6) I/flutter (20853): #6 RenderCustomMultiChildLayoutBox.performLayout (package:flutter/src/rendering/custom_layout.dart:355:5) I/flutter (20853): #7 RenderObject.layout (package:flutter/src/rendering/object.dart:1619:7) I/flutter (20853): #8 _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:105:13) I/flutter (20853): #9 RenderObject.layout (package:flutter/src/rendering/object.dart:1619:7) I/flutter (20853): #10 _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:105:13) I/flutter (20853): #11 RenderObject.layout (package:flutter/src/rendering/object.dart:1619:7) I/flutter (20853): #12 RenderSliverList.performLayout (package:flutter/src/rendering/sliver_list.dart:165:27) I/flutter (20853): #13 RenderObject.layout (package:flutter/src/rendering/object.dart:1619:7) I/flutter (20853): #14 RenderSliverPadding.performLayout (package:flutter/src/rendering/sliver_padding.dart:181:11) I/flutter (20853): #15 RenderObject.layout (package:flutter/src/rendering/object.dart:1619:7) I/flutter (20853): #16 RenderViewportBase.layoutChildSequence (package:flutter/src/rendering/viewport.dart:406:13) I/flutter (20853): #17 RenderViewport._attemptLayout (package:flutter/src/rendering/viewport.dart:1334:12) I/flutter (20853): #18 RenderViewport.performLayout (package:flutter/src/rendering/viewport.dart:1252:20) I/flutter (20853): #19 RenderObject.layout (package:flutter/src/rendering/object.dart:1619:7) I/flutter (20853): #20 _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:105:13) I/flutter (20853): #21 RenderObject.layout (package:flutter/src/rendering/object.dart:1619:7) I/flutter (20853): #22 _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:105:13) I/flutter (20853): #23 RenderObject.layout (package:flutter/src/rendering/object.dart:1619:7) I/flutter (20853): #24 _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:105:13) I/flutter (20853): #25 RenderObject.layout (package:flutter/src/rendering/object.dart:1619:7) I/flutter (20853): #26 _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:105:13) I/flutter (20853): #27 RenderObject.layout (package:flutter/src/rendering/object.dart:1619:7) I/flutter (20853): #28 _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:105:13) I/flutter (20853): #29 RenderObject.layout (package:flutter/src/rendering/object.dart:1619:7) I/flutter (20853): #30 _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:105:13) I/flutter (20853): #31 RenderObject.layout (package:flutter/src/rendering/object.dart:1619:7) I/flutter (20853): #32 _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:105:13) I/flutter (20853): #33 RenderObject.layout (package:flutter/src/rendering/object.dart:1619:7) I/flutter (20853): #34 _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:105:13) I/flutter (20853): #35 RenderObject.layout (package:flutter/src/rendering/object.dart:1619:7) I/flutter (20853): #36 _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:105:13) I/flutter (20853): #37 RenderObject.layout (package:flutter/src/rendering/object.dart:1619:7) I/flutter (20853): #38 MultiChildLayoutDelegate.layoutChild (package:flutter/src/rendering/custom_layout.dart:142:11) I/flutter (20853): #39 _ScaffoldLayout.performLayout (package:flutter/src/material/scaffold.dart:443:7) I/flutter (20853): #40 MultiChildLayoutDelegate._callPerformLayout (package:flutter/src/rendering/custom_layout.dart:212:7) I/flutter (20853): #41 RenderCustomMultiChildLayoutBox.performLayout (package:flutter/src/rendering/custom_layout.dart:356:14) I/flutter (20853): #42 RenderObject.layout (package:flutter/src/rendering/object.dart:1619:7) I/flutter (20853): #43 _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:105:13) I/flutter (20853): #44 RenderObject.layout (package:flutter/src/rendering/object.dart:1619:7) I/flutter (20853): #45 _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:105:13) I/flutter (20853): #46 _RenderCustomClip.performLayout (package:flutter/src/rendering/proxy_box.dart:1214:11) I/flutter (20853): #47 RenderObject.layout (package:flutter/src/rendering/object.dart:1619:7) I/flutter (20853): #48 _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:105:13) I/flutter (20853): #49 RenderObject.layout (package:flutter/src/rendering/object.dart:1619:7) I/flutter (20853): #50 _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:105:13) I/flutter (20853): #51 RenderObject.layout (package:flutter/src/rendering/object.dart:1619:7) I/flutter (20853): #52 _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:105:13) I/flutter (20853): #53 RenderObject.layout (package:flutter/src/rendering/object.dart:1619:7) I/flutter (20853): #54 _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:105:13) I/flutter (20853): #55 RenderObject.layout (package:flutter/src/rendering/object.dart:1619:7) I/flutter (20853): #56 _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:105:13) I/flutter (20853): #57 RenderObject.layout (package:flutter/src/rendering/object.dart:1619:7) I/flutter (20853): #58 _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:105:13) I/flutter (20853): #59 RenderObject.layout (package:flutter/src/rendering/object.dart:1619:7) I/flutter (20853): #60 _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:105:13) I/flutter (20853): #61 RenderObject.layout (package:flutter/src/rendering/object.dart:1619:7) I/flutter (20853): #62 RenderOffstage.performLayout (package:flutter/src/rendering/proxy_box.dart:3074:14) I/flutter (20853): #63 RenderObject.layout (package:flutter/src/rendering/object.dart:1619:7) I/flutter (20853): #64 RenderStack.performLayout (package:flutter/src/rendering/stack.dart:510:15) I/flutter (20853): #65 RenderObject._layoutWithoutResize (package:flutter/src/rendering/object.dart:1496:7) I/flutter (20853): #66 PipelineOwner.flushLayout (package:flutter/src/rendering/object.dart:765:18) I/flutter (20853): #67 _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding&PaintingBinding&SemanticsBinding&RendererBinding.drawFrame (package:flutter/src/rendering/binding.dart:346:19) I/flutter (20853): #68 _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding&PaintingBinding&SemanticsBinding&RendererBinding&WidgetsBinding.drawFrame (package:flutter/src/widgets/binding.dart:701:13) I/flutter (20853): #69 _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding&PaintingBinding&SemanticsBinding&RendererBinding._handlePersistentFrameCallback (package:flutter/src/rendering/binding.dart:285:5) I/flutter (20853): #70 _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding._invokeFrameCallback (package:flutter/src/scheduler/binding.dart:1016:15) I/flutter (20853): #71 _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding.handleDrawFrame (package:flutter/src/scheduler/binding.dart:958:9) I/flutter (20853): #72 _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding._handleDrawFrame (package:flutter/src/scheduler/binding.dart:874:5) I/flutter (20853): #76 _invoke (dart:ui/hooks.dart:236:10) I/flutter (20853): #77 _drawFrame (dart:ui/hooks.dart:194:3) I/flutter (20853): (elided 3 frames from package dart:async) I/flutter (20853): I/flutter (20853): The following RenderObject was being processed when the exception was fired: RenderCustomMultiChildLayoutBox#dc822 relayoutBoundary=up5 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE: I/flutter (20853): creator: CustomMultiChildLayout ← PieChart ← RepaintBoundary ← IndexedSemantics ← I/flutter (20853): NotificationListener ← KeepAlive ← AutomaticKeepAlive ← KeyedSubtree ← I/flutter (20853): SliverList ← MediaQuery ← SliverPadding ← Viewport ← ⋯ I/flutter (20853): parentData: (can use size) I/flutter (20853): constraints: BoxConstraints(w=360.0, 0.0<=h<=Infinity) I/flutter (20853): size: Size(360.0, Infinity) I/flutter (20853): This RenderObject had the following descendants (showing up to depth 5): I/flutter (20853): child 1: RenderSemanticsGestureHandler#25afc NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE I/flutter (20853): child: RenderPointerListener#3f173 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE I/flutter (20853): child: ChartContainerRenderObject#7318a NEEDS-LAYOUT NEEDS-PAINT I/flutter (20853): ════════════════════════════════════════════════════════════════════════════════════════════════════

    opened by huangxiaoyu 2
  • example using data from Sqflite

    example using data from Sqflite

    All of your examples use hardcoded data. Any chance you could show how to use a database, such as Sqflite, and how to correctly format this mapped data into the list format for creating a Chart?

    opened by bremington 2
  • Negative values

    Negative values

    I'm having trouble seeing bar charts for negative values. The chart seems to scale properly, and the axes are show in the right range, with negative values... The only problem is, the bars themselves do not render. Has anyone been able to see negative values on a bar chart?

    opened by takaoandrew 2
  • Running on iOS emulator

    Running on iOS emulator

    When running on iOS emulator, the following error is encountered:

    Finished with error: TimeoutException: Request to Dart VM Service timed out: _flutter.listViews({isolateId: isolates/961460569})

    This error results in the emulator just displaying a white screen with no graphs on it.

    screen shot 2018-06-09 at 09 21 51

    Here is my flutter doctor:

    Doctor summary (to see all details, run flutter doctor -v): [✓] Flutter (Channel master, v0.4.5-pre.56, on Mac OS X 10.13.4 17E202, locale en-ZA) [✓] Android toolchain - develop for Android devices (Android SDK 27.0.3) [!] iOS toolchain - develop for iOS devices (Xcode 9.4) ! CocoaPods out of date (1.5.0 is recommended). CocoaPods is used to retrieve the iOS platform side's plugin code that responds to your plugin usage on the Dart side. Without resolving iOS dependencies with CocoaPods, plugins will not work on iOS. For more info, see https://flutter.io/platform-plugins To upgrade: brew upgrade cocoapods pod setup [✓] Android Studio (version 3.1) [!] IntelliJ IDEA Community Edition (version 2016.1.1) ✗ Flutter plugin not installed; this adds Flutter specific functionality. ✗ Dart plugin not installed; this adds Dart specific functionality. ✗ This install is older than the minimum recommended version of 2017.1.0. [!] VS Code (version 1.23.1) [✓] Connected devices (1 available)

    ! Doctor found issues in 3 categories.

    I'm running Flutter through Android Studios.

    opened by Winghin2517 2
  • Fix compile and runtime errors (showing white screen still)

    Fix compile and runtime errors (showing white screen still)

    Fixed errors for Dart 2/ Flutter 0.3.1, but only showing white screen on run, and below message:

    I/flutter ( 3663):  ### Size: ui.window.physicalSize=Size(768.0, 1184.0), windowLogicalSize = mediaQueryData.size = Size(384.0, 592.0),chartLogicalSize=Size(384.0, 296.0)
    
    
    opened by vijayvepa 4
  • Time support in line chart x axis

    Time support in line chart x axis

    Hey Milan,

    just gonna share a few things I saw I wish this library had. First up: I'm doing a line chart of values over time...is there a way to make this take a List<DateTime> and get time formatting on a line chart?

    opened by MichaelRFairhurst 4
  • ChartData X values

    ChartData X values

    Hi, it would be useful to have x values in the ChartData for line charts - i.e. instead of ChartData.dataRows being of type List<List<double>>, make it of type List<List<Point>>.

    This would be useful for graphing arbitrary functions and time series data. Willing to contribute if you agree, I already have some unpublished code that does this...

    opened by jt70 12
Owner
Milan Zimmermann
Milan Zimmermann
A library to draw fantastic bar charts race in Flutter

bar_chart_race The first library to draw fantastic bar charts race in Flutter Usage Let's get started add the dependencies to your app: dependencies:

Mimene Younes 6 Jun 24, 2022
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 257 Oct 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 35.8k Nov 26, 2022
kg_charts icon library. At present, there are only radar charts

kg_charts icon library. At present, there are only radar charts. Other types of charts may be added later

zhonghua 10 Oct 25, 2022
A flutter package which makes it easier to plot different types of charts with lots of customization, made purely in dart

multi_charts It is a library that provides different types of charts to plot data points. Currently it supports only Radar Chart, but will support mor

Intkhab Ahmed 28 Nov 9, 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 382 Oct 17, 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 252 Sep 20, 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 399 Nov 15, 2022
Flutter package for creating simple yet modern looking charts

A package for creating simple yet modern looking charts. Five chart types Bar Gauge Line Pie Radar Canvas + DOM modern_charts combines Canvas and DOM

Man Hoang 68 Nov 4, 2022
Flutter Cryptocurrency Charts application based on Clean Architecture.

About the project The purpose of this project is to develop the best Cryptocurrency, markets data and charts experience. This project has been built u

null 23 Nov 20, 2022
Charts [2148⭐] - By Google Team.

Charts is a general charting library, currently enabled for the Flutter mobile UI framework. See the online gallery for supported chart types and exam

Google 2.8k Nov 19, 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 322 Nov 12, 2022
In this project you will see how to generate charts with the data from the Firestore.

FlutterChartFirestore Flutter Tutorial - Flutter Charts+Firestore Video series can be watched here https://youtu.be/HGkbPrTSndM Getting Started In thi

Whatsupcoders 49 Oct 21, 2022
A powerful Flutter chart library, currently supporting Line Chart, Bar Chart, Pie Chart, Scatter Chart and Radar Chart.

FL Chart ?? A library to draw fantastic charts in Flutter ?? Chart Types LineChart BarChart PieChart Read More Read More Read More ScatterChart RadarC

Iman khoshabi 5.1k Nov 23, 2022
A Flutter data visualization library based on Grammar of Graphics.

Graphic is now under a total refactoring. The prior available version code is here: v0.3.0 . A Flutter data visualization library based on Grammar of

LIN Chen 859 Nov 21, 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 424 Nov 18, 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 616 Nov 13, 2022
Flutter cryptocurrency UI dashboard.

?? ?? Crypto Dashboard Flutter UI Kit ?? ?? ?? ⭐️ ⭐️ ??‍?? Free Flutter UI Kits based on designs on UpLabs ?? . Watch Youtube Speed code Tutorial Here

Olayemii Garuba 69 Nov 20, 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