angular - How to create a bar chart with several bars between each time label (ng2-chart) -
i trying create chart time labels , more data points labels. here test chart trying display:
html:
<div> <div style="display: block; width: 600px"> <canvas basechart [datasets]="barchartdata" [labels]="barchartlabels" [options]="barchartoptions" [legend]="barchartlegend" [charttype]="barcharttype" (charthover)="charthovered($event)" (chartclick)="chartclicked($event)"></canvas> </div> </div>
js:
import { component } '@angular/core'; @component({ selector: 'test-chart', templateurl: './test-chart-component.html' }) export class testchartcomponent { public barchartoptions:any = { scaleshowverticallines: false, responsive: true, scales: { xaxes: [{ type: 'time', time: { round: 'year', unit: 'year', min: new date('2006'), max: new date('2012') } }] } }; public barchartlabels: date[] = [ new date('01/2006'), new date('06-2006'), new date('01/2007'), new date('06-2007'), new date('01/2008'), new date('06-2008'), new date('01/2009'), new date('06-2009'), new date('01/2010'), new date('06-2010'), new date('01/2011'), new date('06-2011'), new date('01/2012'), new date('06-2012') ]; public barcharttype:string = 'line'; public barchartlegend:boolean = true; public barchartdata:any[] = [ {data: [65, 70, 80, 30, 62, 81, 59, 80, 81, 56, 55, 40, 20, 12], label: 'test'}, ]; // events public chartclicked(e:any):void { console.log(e); } public charthovered(e:any):void { console.log(e); } }
dependencies :
"@angular/common": "~2.4.0", "@angular/compiler": "~2.4.0", "@angular/core": "~2.4.0", "@angular/forms": "~2.4.0", "@angular/http": "~2.4.0", "@angular/platform-browser": "~2.4.0", "@angular/platform-browser-dynamic": "~2.4.0", "@angular/router": "~3.4.0", "@ng-bootstrap/ng-bootstrap": "^1.0.0-alpha.20", "angular2-moment": "^1.3.3", "chart.js": "^2.5.0", "core-js": "^2.4.1", "express": "^4.0", "ng2-charts": "^1.5.0", "rxjs": "5.0.1", "zone.js": "^0.7.4"
in example, want 2 bars per year on time range between 2006 , 2012. don't errors bars not being displayed. have been reading doc on http://www.chartjs.org/docs/ , can't make sense out of it.
Comments
Post a Comment