Andreas/ngx-admin
1
0
Fork 0
mirror of https://github.com/akveo/ngx-admin.git synced 2025-12-17 07:50:12 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat(charts): add the charts demos

Browse source
This commit is contained in:
Alexander Zhukov 2017-07-27 12:06:50 +03:00
parent cf9ccf1850
commit dd7acac528
25 changed files with 925 additions and 228 deletions
Download patch file Download diff file Expand all files Collapse all files

63
src/app/pages/charts/chartjs/chartjs-line.component.ts
View file

@ -1,7 +1,7 @@
import { Component } from '@angular/core';
@Component({
selector: 'ngx-chart-js-line',
selector: 'ngx-chartjs-line',
styles: [
`
:host {
@ -11,44 +11,46 @@ import { Component } from '@angular/core';
],
template: `
<canvas baseChart
[datasets]="lineChartData"
[labels]="lineChartLabels"
[options]="lineChartOptions"
[legend]="lineChartLegend"
[chartType]="lineChartType"></canvas>
[datasets]="chartData"
[labels]="chartLabels"
[options]="chartOptions"
[legend]="chartLegend"
[chartType]="chatyType"></canvas>
`,
})
export class ChartjsLineComponent {
lineChartData: any[] = [
chartData: 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 = {
chartLabels: any[] = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
chartOptions: any = {
responsive: true,
scales: {
xAxes: [{
gridLines: {
display: true,
color: 'rgba(148,159,177,1)',
xAxes: [
{
gridLines: {
display: true,
color: 'rgba(148,159,177,1)',
},
ticks: {
fontColor: 'white',
},
},
ticks: {
fontColor: 'white',
],
yAxes: [
{
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: {
@ -56,9 +58,6 @@ export class ChartjsLineComponent {
},
},
};
lineChartLegend: boolean = true;
lineChartType: string = 'line';
chartLegend: boolean = true;
chatyType: string = 'line';
}