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

86
src/app/pages/charts/chartjs/chartjs-multiple-xaxis.component.ts
View file

@ -1,4 +1,5 @@
import { Component } from '@angular/core';
import { NgaThemeService } from '@akveo/nga-theme';
@Component({
selector: 'ngx-chartjs-multiple-xaxis',
@ -21,39 +22,6 @@ import { Component } from '@angular/core';
export class ChartjsMultipleXaxisComponent {
chartType: string = 'line';
chartLabels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
chartOptions: {
responsive: true;
legend: {
position: 'bottom';
};
hover: {
mode: 'index';
};
scales: {
xAxes: [
{
display: true;
scaleLabel: {
display: true;
labelString: 'Month';
};
}
];
yAxes: [
{
display: true;
scaleLabel: {
display: true;
labelString: 'Value';
};
}
];
};
title: {
display: true;
text: 'Chart.js Line Chart - Different point sizes';
};
};
chartLegend: boolean = true;
chartData: any[] = [
{
@ -124,6 +92,58 @@ export class ChartjsMultipleXaxisComponent {
pointHitRadius: 20,
},
];
chartOptions: any;
constructor(private theme: NgaThemeService) {
this.theme.getJsTheme().subscribe(config => {
this.chartOptions = {
responsive: true,
legend: {
position: 'bottom',
labels: {
fontColor: config.chartjsLineLegendTextColor,
},
},
hover: {
mode: 'index',
},
scales: {
xAxes: [
{
display: true,
scaleLabel: {
display: true,
labelString: 'Month',
},
gridLines: {
display: true,
color: config.chartjsLineXAxisColor,
},
ticks: {
fontColor: config.chartjsLineTickColor,
},
},
],
yAxes: [
{
display: true,
scaleLabel: {
display: true,
labelString: 'Value',
},
gridLines: {
display: true,
color: config.chartjsLineXAxisColor,
},
ticks: {
fontColor: config.chartjsLineTickColor,
},
},
],
},
};
});
}
private randomScalingFactor() {
return Math.round(Math.random() * 100);