import { AfterViewInit , Component , ViewChild } from '@angular/core' ; import { ColorService } from '@ux-aspects/ux-aspects' ; import { Chart } from 'chart.js' ; import { BaseChartDirective } from 'ng2-charts' ; @ Component ( { selector : 'app' , templateUrl : './app.component.html' , styleUrls : [ './app.component.css' ] } ) export class AppComponent implements AfterViewInit { @ ViewChild ( BaseChartDirective ) baseChart : BaseChartDirective ; barChartData : Chart . ChartDataSets [ ] = [ { data : [ 34 , 25 , 19 , 34 , 32 , 44 , 50 , 67 ] , borderWidth : 1 , barPercentage : 0.5 , categoryPercentage : 1 } ] ; barChartLabels : string [ ] = [ '.doc' , '.ppt' , '.pdf' , '.xls' , '.html' , '.txt' , '.csv' , '.mht' ] ; barChartOptions : Chart . ChartOptions ; barChartLegend : boolean = false ; barChartColors : any ; constructor ( colorService ) { let borderColor = colorService . getColor ( 'grey2' ) . setAlpha ( 0.5 ) . toRgba ( ) ; let barBackgroundColor = colorService . getColor ( 'chart1' ) . setAlpha ( 0.1 ) . toRgba ( ) ; let barHoverBackgroundColor = colorService . getColor ( 'chart1' ) . setAlpha ( 0.2 ) . toRgba ( ) ; let barBorderColor = colorService . getColor ( 'chart1' ) . toHex ( ) ; let tooltipBackgroundColor = colorService . getColor ( 'grey2' ) . toHex ( ) ; this . barChartOptions = { maintainAspectRatio : false , responsive : true , scales : { xAxes : [ { gridLines : { display : true , zeroLineColor : borderColor , color : 'transparent' } } ] , yAxes : [ { type : 'linear' , gridLines : { zeroLineColor : borderColor } , ticks : { min : 0 , max : 80 , stepSize : 20 } as Chart . LinearTickOptions } ] } , tooltips : { backgroundColor : tooltipBackgroundColor , cornerRadius : 0 , callbacks : { title : ( item ) => { return ; } , label : ( item ) => { return `x: ${ item . xLabel }, y: ${ item . yLabel }` ; } } , displayColors : false } as any } ; this . barChartColors = [ { backgroundColor : barBackgroundColor , hoverBackgroundColor : barHoverBackgroundColor , borderColor : barBorderColor } ] ; } ngAfterViewInit ( ) { let chartInstance = this . baseChart . chart ; let chartJs = Chart as any ; chartJs . helpers . each ( chartInstance . getDatasetMeta ( 0 ) . data , ( bar , index ) => { if ( index >= 6 ) { bar . draw = function ( ) { chartInstance . ctx . save ( ) ; chartInstance . ctx . setLineDash ( [ 2 , 2 ] ) ; chartJs . elements . Rectangle . prototype . draw . apply ( this , arguments ) ; chartInstance . ctx . restore ( ) ; } ; } } ) ; } }