Flutter package for creating simple yet modern looking charts

Modern charts does not display the chart, but the legends are shown. kindly see the image attached. I've also attached the browser console logs. Thank you.

Environment Dart Version : Dart VM version: 2.1.0 (Tue Nov 13 18:22:02 2018 +0100) on "macos_x64" modern_charts: ^0.1.16 angular: ^5.0.0

browser-console-error.log

import 'package:angular/angular.dart';
import 'package:modern_charts/modern_charts.dart';
import 'dart:html';
@Component(
    selector: 'dashboard',
    styleUrls: ['dashboard_component.css'],
    templateUrl: 'dashboard_component.html',
    directives: [coreDirectives])
class DashboardComponent implements OnInit{
@ViewChild('portfolioPie')
  DivElement pieDiv;
  var data = DataTable([
    ['BTC','1'],
    ['ETH', '1'],
    ['ICX','1']
    ]);

  @override
  void ngOnInit() {
    var container = pieDiv;
    var table = DataTable([
      ['Categories', 'Long series name', 'Series 2', 'Series 3'],
      ['January', 1, 3, 5],
      ['February', 3, 4, 6],
      ['March', 4, 3, 1],
      ['April', null, 5, 1],
      ['May', 3, 4, 2],
      ['June', 5, 10, 4],
      ['July', 4, 12, 8],
      ['August', 1, 3, 5],
      ['September', 3, 4, 6],
      ['October', 4, 3, 1],
      ['November', null, 5, 1],
      ['December', 3, 4, 2],
    ]);

    var options = {
      'animation': {
        'onEnd': () {
        }
      },
      'series': {
        'labels': {'enabled': true}
      },
      'xAxis': {
        'crosshair': {'enabled': true},
        'labels': {'maxRotation': 90, 'minRotation': 0}
      },
      'yAxis': {'maxValue': 30, 'minInterval': 5},
      'title': {'text': 'Bar Chart Demo'},
      'tooltip': {'valueFormatter': (value) => '$value units'}
    };

    var chart = BarChart(container);
    chart.draw(table, options);


  }

}

<h3>Dashboard</h3>
<section>
    <div class="panel">
        <div class="panel-body">
            <h3 class="card-title">Portfolio</h3>
            <div id="portfolioPie" #portfolioPie></div>
        </div>
    </div>
</section>

#portfolioPie{
    height:400px;
    max-width: 100%;
}

Although the function signature lists the options map as an optional parameter, if it is not passed, no defaults are substituted and mergeMap errors out.

Invocation: chart.draw(chartData);

Stacktrace:

EXCEPTION: NullError: invalid member on null: 'forEach'
STACKTRACE: 
package:modern_charts/src/utils.dart 156:6                               mergeMap
package:modern_charts/src/base.dart 873:25                               draw

It's seems to have a problem with the label position. When the value is "none" it breaks the lib

    var chart = new LineChart(container);

    var options = {


    'legend': {
        'position': 'none'
    },
    'series': {
            'labels': {
                'enabled': false
            }
        }
    };

    chart.draw(table, options);

Version 0.1.18 fixes important bugs, but it requires Intl version 0.16.0. Intl version 0.16.0 is not compatible with any publicly available version of Angular. Even Angular 6.0.0-alpha+1 (the latest as of this time) requires Intl < 0.16.0.

Version solving for an Angular project including modern_charts 0.1.18 results in something like the following.

Pubspec Snippet:

dependencies:
  angular: ^6.0.0-alpha+1
  modern_charts: ^0.1.18
  intl:

pub get:

Resolving dependencies...
Because modern_charts >=0.1.18 depends on intl ^0.16.0 and angular 6.0.0-alpha+1 depends on intl >=0.13.0 <0.16.0, modern_charts >=0.1.18 is incompatible with angular 6.0.0-alpha+1.
And because no versions of angular match >6.0.0-alpha+1 <7.0.0, modern_charts >=0.1.18 is incompatible with angular ^6.0.0-alpha+1.
So, because test_project depends on both angular ^6.0.0-alpha+1 and modern_charts ^0.1.18, version solving failed.

The easiest solution appears to be making the modern_charts Intl version requirement more lenient. The Intl 0.16.0 release appears to have few changes compared with previous so hopefully they wound not impact the functionality of modern_charts.

BarChart fails to draw any bars when there is only one data point and crashes when you mouseover the chart with an index out of range error.

Take the following DataTable as an example for a website visitor count chart.

DataTable table = DataTable([
    ['Categories', 'Visitors'],
    ['2019-09-07', 23],
  ]);

Creating a BarChart with that table will not draw the single bar that it should and mousing over will result in an error that looks something like the following:

EXCEPTION: RangeError (index): Index out of range: index must not be negative: -1
STACKTRACE: 
dart:sdk_internal                                                                             _get]
package:modern_charts/packages/modern_charts/src/base.dart 1362:26                            [_getEntityGroupIndex]
package:modern_charts/packages/modern_charts/src/base.dart 719:17                             [_mouseMove]
package:stack_trace                                                                           <fn>
package:angular/src/core/change_detection/packages/angular/src/core/zone/ng_zone.dart 144:18  <fn>
dart:sdk_internal                                                                             runUnary
package:angular/src/core/change_detection/packages/angular/src/core/zone/ng_zone.dart 141:18  [_runUnary]

dart:sdk_internal                                                                                                                              listen
package:modern_charts/packages/modern_charts/src/base.dart 755:43                                                                              [_initializeTooltip]
package:modern_charts/packages/modern_charts/src/base.dart 891:5                                                                               draw