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?