import { Component } from '@angular/core' ; import { ColorService } from '@ux-aspects/ux-aspects' ; @ Component ( { selector : 'app' , templateUrl : './app.component.html' , styleUrls : [ './app.component.css' ] } ) export class AppComponent { donutChartData : Chart . ChartDataSets [ ] = [ { data : [ 25 , 15 , 18 , 20 , 10 ] , borderWidth : 0 } ] ; donutChartLabels : string [ ] = [ 'Sales 1' , 'Sales 2' , 'Sales 3' , 'Sales 4' , 'Sales 5' ] ; donutChartOptions : Chart . ChartOptions ; donutChartLegend : boolean = true ; donutChartColors : any ; constructor ( colorService ) { let tooltipBackgroundColor = colorService . getColor ( 'grey2' ) . toHex ( ) ; this . donutChartOptions = { maintainAspectRatio : false , responsive : true , cutoutPercentage : 70 , legend : { position : 'right' , labels : { boxWidth : 12 } } , tooltips : { callbacks : { title : ( item ) => { return ; } , label : ( item , data ) => { let dataset = data . datasets [ 0 ] ; let total = dataset . data . reduce ( ( previousValue , currentValue ) => { return previousValue + currentValue ; } ) ; let segmentValue = dataset . data [ item . index ] ; let precentage = Math . round ( ( ( segmentValue / total ) * 100 ) ) ; return `${ precentage }%, Sales ${ item . index + 1 }` ; } } , backgroundColor : tooltipBackgroundColor , cornerRadius : 0 , displayColors : false } as any } ; this . donutChartColors = [ { backgroundColor : [ colorService . getColor ( 'chart1' ) . toRgb ( ) , colorService . getColor ( 'chart2' ) . toRgb ( ) , colorService . getColor ( 'chart3' ) . toRgb ( ) , colorService . getColor ( 'chart4' ) . toRgb ( ) , colorService . getColor ( 'chart5' ) . toRgb ( ) ] , hoverBackgroundColor : [ colorService . getColor ( 'chart1' ) . setAlpha ( 0.3 ) . toRgba ( ) , colorService . getColor ( 'chart2' ) . setAlpha ( 0.3 ) . toRgba ( ) , colorService . getColor ( 'chart3' ) . setAlpha ( 0.3 ) . toRgba ( ) , colorService . getColor ( 'chart4' ) . setAlpha ( 0.3 ) . toRgba ( ) , colorService . getColor ( 'chart5' ) . setAlpha ( 0.3 ) . toRgba ( ) ] } ] ; } }