Has anyone managed to get the Chartjs to work in AngularDart?

Question

Update: SOLVED. I was missing the script include for Chartjs in the index.html file, Oops:

    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>

It works with just Dart following the example, but it doesn't seem to work with AngularDart.

I am using a fresh Angular web application with modifications based on the Dart example.

I added to app_component.html the same DIV element with one exception and that is a local-variable so I can access it via ViewChild:

<div>
  <p>Canvas</p>
  <div class="wrapper">
      <canvas #theCanvas id="canvas" height="450" width="600"></canvas>
  </div>
</div>

I then added the styles to app_component.css (plus a border to see the canvas). I can even draw to a rectangle and see it:

div.wrapper {
 margin: 0 auto;
 max-width: 800px;
 text-align: center;
 font-style: italic;
 border: #6bc5ff 1px solid;
}

I then added the same chart code from the Dart example to the app_commponent.dart file:

 Angular imports...
 import 'package:chartjs/chartjs.dart';

 @Component(
    selector: 'my-app',
    styleUrls: const ['app_component.css'],
    templateUrl: 'app_component.html',
    directives: const [materialDirectives, HelloDialog],
    providers: const [materialProviders],
)
class AppComponent implements AfterContentInit, AfterViewInit {
  @ViewChild('theCanvas')
  ElementRef canvas;

  CanvasElement canvasEl;

  math.Random rnd = new math.Random();
  List<String> months = <String>[
    "January", "February", "March", "April", "May", "June"];

  ngAfterContentInit() {
    canvasEl = canvas.nativeElement;
  }

  ngAfterViewInit() {
    var data = new LinearChartData(labels: months, datasets: <ChartDataSets>[
      new ChartDataSets(
          label: "My First dataset",
          backgroundColor: "rgba(220,220,220,0.2)",
          data: months.map((_) => rnd.nextInt(100)).toList()),
      new ChartDataSets(
          label: "My Second dataset",
          backgroundColor: "rgba(151,187,205,0.2)",
          data: months.map((_) => rnd.nextInt(100)).toList())
    ]);

    var config = new ChartConfiguration(
        type: 'line', data: data, options: new ChartOptions(responsive: true));

    Chart chart = new Chart(canvasEl, config);
  }
}

I added the dependency to pubspec.yaml:

chartjs:

Which in turn included the js dependency. As I mentioned I can make draw calls, like drawing lines, so I know the canvas works.

Dartium's console shows an error:

Uncaught Unhandled exception:
Not a valid JS object
#0      JsNative.callConstructor (dart:js:1461)
#1      Chart.Chart (package:chartjs/chartjs.dart_js_interop_patch.dart:31:30)
#2      AppComponent.ngAfterViewInit (package:DeuronNG/app_component.dart:59:23)
...

Does anyone know if I missed something or what the JS error means?

Answer 1

I was missing the script include for Chartjs in the index.html file, Oops:

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>