My attempt to create a Bar Chart with this GitHub repository is not working in Chrome. You can view my code on Plunker. Can someone help me identify the issue?
Below is the updated code:
app.ts
import {Component, Pipe, PipeTransform} from 'angular2/core';
import {CORE_DIRECTIVES, NgClass, FORM_DIRECTIVES, Control, ControlGroup, FormBuilder, Validators} from 'angular2/common';
import {CHART_DIRECTIVES} from './ng2-charts.ts';
@Component({
selector: 'my-app',
templateUrl: 'mytemplate.html',
directives: [CHART_DIRECTIVES, NgClass, CORE_DIRECTIVES, FORM_DIRECTIVES]
})
export class AppComponent {
constructor() {
console.log('bar demo');
}
private barChartOptions = {
scaleShowVerticalLines: false,
responsive: true,
multiTooltipTemplate: '<%if (datasetLabel){%><%=datasetLabel %>: <%}%><%= value %>'
};
private barChartLabels = ['2006', '2007', '2008', '2009', '2010', '2011', '2012'];
private barChartSeries = ['Series A', 'Series B'];
public barChartType = 'Bar';
private barChartLegend:boolean = true;
private barChartData = [
[65, 59, 80, 81, 56, 55, 40],
[28, 48, 40, 19, 86, 27, 90]
];
// events
chartClicked(e:any) {
console.log(e);
}
chartHovered(e:any) {
console.log(e);
}
}
app.html
<base-chart class="chart"
[data]="barChartData"
[labels]="barChartLabels"
[options]="barChartOptions"
[series]="barChartSeries"
[legend]="barChartLegend"
[chartType]="barChartType"
(chartHover)="chartHovered($event)"
(chartClick)="chartClicked($event)"></base-chart>
If anyone knows of another library that can display data on a bar chart for Angular 2, please suggest it.