import { Component , Input , OnInit } from '@angular/core' ; @ Component ( { selector : 'app-development-chart' , template : `
    <div style="display: block;">
      <canvas baseChart
              height="160"
              [datasets]="datasets"
              [labels]="labels"
              [options]="options"
              [colors]="colors"
              chartType="line"></canvas>
    </div>
  ` , } ) export class DevelopmentChartComponent implements OnInit { @ Input ( ) data = [ ] ; @ Input ( ) label = '' ; public datasets : any [ ] = [ ] ; public get labels ( ) { return this . datasets [ 0 ] . data ; } public options : any = { maintainAspectRatio : false , scales : { xAxes : [ { display : false , } , ] , yAxes : [ { display : false , } , ] , } , elements : { line : { borderWidth : 2 , tension : 0 , } , point : { radius : 0 , hitRadius : 10 , hoverRadius : 4 , } , } , legend : { display : false , } , animation : { duration : 0 , } , responsive : true , } ; public colors : Array < any > = [ { backgroundColor : 'rgba(70,127,207,0.1)' , borderColor : 'rgba(70,127,207)' , } , ] ; ngOnInit ( ) { this . datasets = [ { data : this . data , label : this . label , } , ] ; } }