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

feat(charts): integrate js theme with chart.js

Browse source
This commit is contained in:
Alexander Zhukov 2017-07-28 16:09:02 +03:00
parent 0f0bea801d
commit bc536dbded
7 changed files with 335 additions and 183 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,4 +1,5 @@
import { Component } from '@angular/core';
import { NgaThemeService } from '@akveo/nga-theme';
@Component({
selector: 'ngx-chartjs-line',
@ -24,40 +25,45 @@ export class ChartjsLineComponent {
{ data: [28, 48, 40, 19, 86, 27, 90], label: 'Series B' },
{ data: [18, 48, 77, 9, 100, 27, 40], label: 'Series C' },
];
chartLabels: any[] = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
chartOptions: 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',
},
},
};
chartLegend: boolean = true;
chatyType: string = 'line';
chartOptions: any;
constructor(private theme: NgaThemeService) {
this.theme.getJsTheme().subscribe(config => {
this.chartOptions = {
responsive: true,
scales: {
xAxes: [
{
gridLines: {
display: true,
color: config.chartjsLineXAxisColor,
},
ticks: {
fontColor: config.chartjsLineTickColor,
},
},
],
yAxes: [
{
gridLines: {
display: true,
color: config.chartjsLineYAxisColor,
},
ticks: {
fontColor: config.chartjsLineTickColor,
},
},
],
},
legend: {
labels: {
fontColor: config.chartjsLineLegendTextColor,
},
},
};
});
}
}