Chart doesn't render in an Angular2 Component

[rocramer]

I tried to use chartjs.dart with AngularDart. I added chartjs.dart as a dependency and put the chart.js in the header of my index.html. Then I wrapped your example in a component:

import 'package:angular2/angular2.dart';
import 'dart:html';
import 'dart:math' as math;

import 'package:chartjs/chartjs.dart';

@Component(
    selector: 'statistics',
    template: '''<h1>Statistics</h1>
          <div class="wrapper">
            <canvas id="quackChart" height="450" width="600"></canvas>
          </div>''',
    styleUrls: const ['statistics_component.css'])
class StatisticsComponent {

  void ngOnInit() => renderChart();

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

    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));

    new Chart(querySelector('#quackChart') as CanvasElement, config);
  }

}

Unfortunately the chart doesn't render. There are no errors in the console. Is there a known issue with using chartjs.dart and Angular2 together?

[ghost]

Hi, might not be relevant, but I get exactly the same (=nothing) with Google maps. But I hadn't tried it before anyway....

[wsv-accidis]

I'm not sure why, but having an otherwise pointless extra div around the canvas makes it work for me.

This works:

<div class="chart">
    <div>
        <canvas id="canvas" height="640" width="640"></canvas>
    </div>
</div>

This doesn't:

<div class="chart">
    <canvas id="canvas" height="640" width="640"></canvas>
</div>

To make it weirder, it depends on what CSS attributes I have on chart. Sometimes the second pattern will work. I haven't found a case where the first one doesn't regardless of CSS.