mirror of
https://github.com/akveo/ngx-admin.git
synced 2025-12-18 16:30:13 +01:00
55 lines
1.1 KiB
TypeScript
55 lines
1.1 KiB
TypeScript
|
import { Component } from '@angular/core';
|
||
|
|
|
||
|
|
@Component({
|
||
|
|
selector: 'ngx-chart-js-pie',
|
||
|
|
styles: [
|
||
|
|
`
|
||
|
|
:host {
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
`,
|
||
|
|
],
|
||
|
|
template: `
|
||
|
|
<canvas baseChart
|
||
|
|
[data]="pieChartData"
|
||
|
|
[labels]="pieChartLabels"
|
||
|
|
[options]="pieChartOptions"
|
||
|
|
[chartType]="pieChartType"></canvas>
|
||
|
|
`,
|
||
|
|
})
|
||
|
|
export class ChartJsPieComponent {
|
||
|
|
|
||
|
|
pieChartType: string = 'pie';
|
||
|
|
pieChartLabels: string[] = ['Download Sales', 'In-Store Sales', 'Mail Sales'];
|
||
|
|
pieChartData: number[] = [300, 500, 100];
|
||
|
|
pieChartOptions: any = {
|
||
|
|
responsive: true,
|
||
|
|
scales: {
|
||
|
|
xAxes: [{
|
||
|
|
gridLines: {
|
||
|
|
display: true,
|
||
|
|
color: 'rgba(148,159,177,1)',
|
||
|
|
},
|
||
|
|
ticks: {
|
||
|
|
fontColor: 'white',
|
||
|
|
},
|
||
|
|
}],
|
||
|
|
yAxes: [{
|
||
|
|
gridLines: {
|
||
|
|
display: true,
|
||
|
|
color: 'rgba(148,159,177,1)',
|
||
|
|
},
|
||
|
|
ticks: {
|
||
|
|
fontColor: 'white',
|
||
|
|
},
|
||
|
|
}],
|
||
|
|
},
|
||
|
|
legend: {
|
||
|
|
labels: {
|
||
|
|
fontColor: 'white',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
};
|
||
|
|
|
||
|
|
}
|