mirror of
https://github.com/akveo/ngx-admin.git
synced 2025-12-17 07:50:12 +01:00
65 lines
1.3 KiB
TypeScript
65 lines
1.3 KiB
TypeScript
|
import { Component } from '@angular/core';
|
||
|
|
|
||
|
|
@Component({
|
||
|
|
selector: 'ngx-chart-js-line',
|
||
|
|
styles: [
|
||
|
|
`
|
||
|
|
:host {
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
`,
|
||
|
|
],
|
||
|
|
template: `
|
||
|
|
<canvas baseChart
|
||
|
|
[datasets]="lineChartData"
|
||
|
|
[labels]="lineChartLabels"
|
||
|
|
[options]="lineChartOptions"
|
||
|
|
[legend]="lineChartLegend"
|
||
|
|
[chartType]="lineChartType"></canvas>
|
||
|
|
`,
|
||
|
|
})
|
||
|
|
export class ChartJsLineComponent {
|
||
|
|
|
||
|
|
lineChartData: any[] = [
|
||
|
|
{ data: [65, 59, 80, 81, 56, 55, 40], label: 'Series A' },
|
||
|
|
{ data: [28, 48, 40, 19, 86, 27, 90], label: 'Series B' },
|
||
|
|
{ data: [18, 48, 77, 9, 100, 27, 40], label: 'Series C' },
|
||
|
|
];
|
||
|
|
|
||
|
|
lineChartLabels: any[] = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
|
||
|
|
|
||
|
|
lineChartOptions: 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',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
};
|
||
|
|
|
||
|
|
lineChartLegend: boolean = true;
|
||
|
|
|
||
|
|
lineChartType: string = 'line';
|
||
|
|
|
||
|
|
}
|