Andreas/ngx-admin
1
0
Fork 0
mirror of https://github.com/akveo/ngx-admin.git synced 2025-12-19 00:40:12 +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

71
src/app/pages/charts/chartjs/chartjs-pie.component.ts
View file

@ -1,4 +1,5 @@
import { Component } from '@angular/core';
import { NgaThemeService } from '@akveo/nga-theme';
@Component({
selector: 'ngx-chartjs-pie',
@ -10,7 +11,7 @@ import { Component } from '@angular/core';
`,
],
template: `
<canvas baseChart width="400" height="400"
<canvas baseChart
[data]="chartData"
[labels]="chartLabels"
[options]="chartOptions"
@ -21,36 +22,48 @@ export class ChartjsPieComponent {
chartType: string = 'pie';
chartLabels: string[] = ['Download Sales', 'In-Store Sales', 'Mail Sales'];
chartData: number[] = [300, 500, 100];
chartOptions: any = {
responsive: true,
scales: {
xAxes: [
{
gridLines: {
display: true,
color: 'rgba(148,159,177,1)',
},
ticks: {
fontColor: 'white',
chartOptions: any;
constructor(private theme: NgaThemeService) {
this.theme.getJsTheme().subscribe(config => {
this.chartOptions = {
responsive: true,
scale: {
pointLabels: {
fontSize: 14,
fontColor: config.chartjsRadarPointLabelFontColor,
},
},
],
yAxes: [
{
gridLines: {
display: true,
color: 'rgba(148,159,177,1)',
},
ticks: {
fontColor: 'white',
scales: {
xAxes: [
{
gridLines: {
display: true,
color: config.chartjsPieXAxisColor,
},
ticks: {
fontColor: config.chartjsPitTickColor,
},
},
],
yAxes: [
{
gridLines: {
display: true,
color: config.chartjsPieYAxisColor,
},
ticks: {
fontColor: config.chartjsPieTickColor,
},
},
],
},
legend: {
labels: {
fontColor: config.chartjsPieLegendTextColor,
},
},
],
},
legend: {
labels: {
fontColor: 'white',
},
},
};
};
});
}
}