diff --git a/package-lock.json b/package-lock.json index 0984df50..243949a8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -454,6 +454,14 @@ } } }, + "angular2-chartjs": { + "version": "0.3.0", + "resolved": "https://registry.npmjs.org/angular2-chartjs/-/angular2-chartjs-0.3.0.tgz", + "integrity": "sha1-KVA/pR9j4FpJAO11CqMLEeTB7hg=", + "requires": { + "chart.js": "2.5.0" + } + }, "angular2-toaster": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/angular2-toaster/-/angular2-toaster-4.0.0.tgz", @@ -5740,14 +5748,6 @@ "integrity": "sha1-KzJxhOiZIQEXeyhWP7XnECrNDKk=", "dev": true }, - "ng2-charts": { - "version": "1.5.0", - "resolved": "https://registry.npmjs.org/ng2-charts/-/ng2-charts-1.5.0.tgz", - "integrity": "sha1-clVqH/D2dYwhq8fsz+cZhMgunC0=", - "requires": { - "chart.js": "2.5.0" - } - }, "ng2-ckeditor": { "version": "1.1.6", "resolved": "https://registry.npmjs.org/ng2-ckeditor/-/ng2-ckeditor-1.1.6.tgz", diff --git a/package.json b/package.json index 2aa9457a..182a8715 100644 --- a/package.json +++ b/package.json @@ -37,6 +37,7 @@ "@asymmetrik/angular2-leaflet": "2.1.4", "@ng-bootstrap/ng-bootstrap": "1.0.0-alpha.26", "@swimlane/ngx-charts": "5.2.0", + "angular2-chartjs": "^0.3.0", "angular2-toaster": "4.0.0", "bootstrap": "4.0.0-alpha.6", "chart.js": "2.5.0", @@ -50,7 +51,6 @@ "intl": "1.2.5", "ionicons": "2.0.1", "leaflet": "1.0.3", - "ng2-charts": "1.5.0", "ng2-ckeditor": "1.1.6", "ng2-smart-table": "1.1.0", "ng2-tree": "2.0.0-alpha.5", diff --git a/src/app/@theme/styles/theme.cosmic.ts b/src/app/@theme/styles/theme.cosmic.ts index d823c4f0..e8cee71a 100644 --- a/src/app/@theme/styles/theme.cosmic.ts +++ b/src/app/@theme/styles/theme.cosmic.ts @@ -43,7 +43,7 @@ export const COSMIC_THEME = { tooltipExtraCss: 'box-shadow: 0px 2px 46px 0 rgba(0, 255, 170, 0.35); border-radius: 10px; padding: 8px 24px;', tooltipTextColor: '#ffffff', - xAxisColor: 'rgba(161, 161 ,229, 0.3)', + axisLineColor: 'rgba(161, 161 ,229, 0.3)', xAxisTextColor: '#a1a1e5', yAxisSplitLine: 'rgba(161, 161 ,229, 0.2)', @@ -78,21 +78,8 @@ export const COSMIC_THEME = { }, chartjs: { - xAxisColor: 'rgba(148,159,177,1)', - yAxisColor: 'rgba(148,159,177,1)', - tickColor: 'white', - legendTextColor: 'white', - - barHorizontal: { - colors: ['red', 'blue'], - }, - - radar: { - colors: ['red', 'blue'], - scaleGridLinesColor: 'white', - scaleAngleLinesColor: 'white', - pointLabelFontColor: 'white', - }, + axisLineColor: '#a1a1e5', + textColor: '#ffffff', }, d3: { diff --git a/src/app/@theme/styles/theme.default.ts b/src/app/@theme/styles/theme.default.ts index 392939d9..2a01e033 100644 --- a/src/app/@theme/styles/theme.default.ts +++ b/src/app/@theme/styles/theme.default.ts @@ -37,7 +37,7 @@ export const DEFAULT_THEME = { tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;', tooltipTextColor: '#222222', - xAxisColor: 'rgba(0, 0, 0, 0)', + axisLineColor: 'rgba(0, 0, 0, 0)', xAxisTextColor: '#222222', yAxisSplitLine: '#ebeef2', @@ -72,21 +72,8 @@ export const DEFAULT_THEME = { }, chartjs: { - xAxisColor: 'rgba(148,159,177,1)', - yAxisColor: 'rgba(148,159,177,1)', - tickColor: 'white', - legendTextColor: 'white', - - barHorizontal: { - colors: ['red', 'blue'], - }, - - radar: { - colors: ['red', 'blue'], - scaleGridLinesColor: 'white', - scaleAngleLinesColor: 'white', - pointLabelFontColor: 'white', - }, + axisLineColor: '#cccccc', + textColor: '#484848', }, d3: { diff --git a/src/app/pages/charts/chartjs/chartjs-bar-horizontal.component.ts b/src/app/pages/charts/chartjs/chartjs-bar-horizontal.component.ts index ee6b4d8f..bacf5d24 100644 --- a/src/app/pages/charts/chartjs/chartjs-bar-horizontal.component.ts +++ b/src/app/pages/charts/chartjs/chartjs-bar-horizontal.component.ts @@ -3,95 +3,63 @@ import { NbThemeService } from '@nebular/theme'; @Component({ selector: 'ngx-chartjs-bar-horizontal', - styles: [ - ` - :host { - display: block; - } - `, - ], template: ` - + `, }) export class ChartjsBarHorizontalComponent { - chartData: any[]; - chartLabels = ['January', 'February', 'March', 'April', 'May', 'June', 'July']; - chartLegend: boolean = true; - chartType: string = 'horizontalBar'; - chartOptions: any; + data: any; + options: any; constructor(private theme: NbThemeService) { this.theme.getJsTheme().subscribe(config => { + const colors: any = config.variables; const chartjs: any = config.variables.chartjs; - this.chartData = [ - { - label: 'Dataset 1', - backgroundColor: chartjs.barHorizontal.colors[0], - borderColor: chartjs.barHorizontal.colors[0], - borderWidth: 1, - data: [ - this.randomScalingFactor(), - this.randomScalingFactor(), - this.randomScalingFactor(), - this.randomScalingFactor(), - this.randomScalingFactor(), - this.randomScalingFactor(), - this.randomScalingFactor(), - ], - }, - { - label: 'Dataset 2', - backgroundColor: chartjs.barHorizontal.colors[1], - borderColor: chartjs.barHorizontal.colors[1], - data: [ - this.randomScalingFactor(), - this.randomScalingFactor(), - this.randomScalingFactor(), - this.randomScalingFactor(), - this.randomScalingFactor(), - this.randomScalingFactor(), - this.randomScalingFactor(), - ], - }, - ]; + this.data = { + labels: ['January', 'February', 'March', 'April', 'May', 'June'], + datasets: [{ + label: 'Dataset 1', + backgroundColor: colors.infoLight, + borderWidth: 1, + data: [this.random(), this.random(), this.random(), this.random(), this.random(), this.random()], + }, { + label: 'Dataset 2', + backgroundColor: colors.successLight, + data: [this.random(), this.random(), this.random(), this.random(), this.random(), this.random()], + }, + ], + }; - this.chartOptions = { - // Elements options apply to all of the options unless overridden in a dataset - // In this case, we are setting the border of each horizontal bar to be 2px wide + this.options = { + responsive: true, + maintainAspectRatio: false, elements: { rectangle: { borderWidth: 2, }, }, - responsive: true, scales: { xAxes: [ { gridLines: { display: true, - color: chartjs.xAxisColor, + color: chartjs.axisLineColor, }, ticks: { - fontColor: chartjs.tickColor, + fontColor: chartjs.textColor, }, }, ], yAxes: [ { gridLines: { - display: true, - color: chartjs.yAxisColor, + display: false, + color: chartjs.axisLineColor, }, ticks: { - fontColor: chartjs.tickColor, + fontColor: chartjs.textColor, }, }, ], @@ -106,7 +74,7 @@ export class ChartjsBarHorizontalComponent { }); } - private randomScalingFactor() { + private random() { return Math.round(Math.random() * 100); } } diff --git a/src/app/pages/charts/chartjs/chartjs-bar.component.ts b/src/app/pages/charts/chartjs/chartjs-bar.component.ts index a0e112b1..72dd5041 100644 --- a/src/app/pages/charts/chartjs/chartjs-bar.component.ts +++ b/src/app/pages/charts/chartjs/chartjs-bar.component.ts @@ -1,41 +1,37 @@ import { Component } from '@angular/core'; -import { NbThemeService } from '@nebular/theme'; +import { NbThemeService, NbColorHelper } from '@nebular/theme'; @Component({ selector: 'ngx-chartjs-bar', - styles: [ - ` - :host { - display: block; - } - `, - ], template: ` - + `, }) export class ChartjsBarComponent { - chartLabels: string[] = ['2006', '2007', '2008', '2009', '2010', '2011', '2012']; - chartType: string = 'bar'; - chartLegend: boolean = true; - chartData: any[] = [ - { data: [65, 59, 80, 81, 56, 55, 40], label: 'Series A' }, - { data: [28, 48, 40, 19, 86, 27, 90], label: 'Series B' }, - ]; - chartOptions: any; + data: any; + options: any; constructor(private theme: NbThemeService) { this.theme.getJsTheme().subscribe(config => { + const colors: any = config.variables; const chartjs: any = config.variables.chartjs; - this.chartOptions = { - scaleShowVerticalLines: false, + this.data = { + labels: ['2006', '2007', '2008', '2009', '2010', '2011', '2012'], + datasets: [{ + data: [65, 59, 80, 81, 56, 55, 40], + label: 'Series A', + backgroundColor: NbColorHelper.hexToRgbA(colors.primaryLight, 0.8), + }, { + data: [28, 48, 40, 19, 86, 27, 90], + label: 'Series B', + backgroundColor: NbColorHelper.hexToRgbA(colors.infoLight, 0.8), + }], + }; + + this.options = { + maintainAspectRatio: false, responsive: true, legend: { labels: { @@ -46,11 +42,11 @@ export class ChartjsBarComponent { xAxes: [ { gridLines: { - display: true, - color: chartjs.xAxisColor, + display: false, + color: chartjs.axisLineColor, }, ticks: { - fontColor: chartjs.tickColor, + fontColor: chartjs.textColor, }, }, ], @@ -58,10 +54,10 @@ export class ChartjsBarComponent { { gridLines: { display: true, - color: chartjs.yAxisColor, + color: chartjs.axisLineColor, }, ticks: { - fontColor: chartjs.tickColor, + fontColor: chartjs.textColor, }, }, ], diff --git a/src/app/pages/charts/chartjs/chartjs-line.component.ts b/src/app/pages/charts/chartjs/chartjs-line.component.ts index 2fbd465b..35d55a30 100644 --- a/src/app/pages/charts/chartjs/chartjs-line.component.ts +++ b/src/app/pages/charts/chartjs/chartjs-line.component.ts @@ -1,51 +1,55 @@ import { Component } from '@angular/core'; -import { NbThemeService } from '@nebular/theme'; +import { NbThemeService, NbColorHelper } from '@nebular/theme'; @Component({ selector: 'ngx-chartjs-line', - styles: [ - ` - :host { - display: block; - } - `, - ], template: ` - + `, }) export class ChartjsLineComponent { - 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' }, - ]; - chartLabels: any[] = ['January', 'February', 'March', 'April', 'May', 'June', 'July']; - chartLegend: boolean = true; - chatyType: string = 'line'; - chartOptions: any; + data: any; + options: any; constructor(private theme: NbThemeService) { this.theme.getJsTheme().subscribe(config => { + const colors: any = config.variables; const chartjs: any = config.variables.chartjs; - this.chartOptions = { + this.data = { + labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], + datasets: [{ + data: [65, 59, 80, 81, 56, 55, 40], + label: 'Series A', + backgroundColor: NbColorHelper.hexToRgbA(colors.primary, 0.3), + borderColor: colors.primary, + }, { + data: [28, 48, 40, 19, 86, 27, 90], + label: 'Series B', + backgroundColor: NbColorHelper.hexToRgbA(colors.danger, 0.3), + borderColor: colors.danger, + }, { + data: [18, 48, 77, 9, 100, 27, 40], + label: 'Series C', + backgroundColor: NbColorHelper.hexToRgbA(colors.info, 0.3), + borderColor: colors.info, + }, + ], + }; + + this.options = { responsive: true, + maintainAspectRatio: false, scales: { xAxes: [ { gridLines: { display: true, - color: chartjs.xAxisColor, + color: chartjs.axisLineColor, }, ticks: { - fontColor: chartjs.tickColor, + fontColor: chartjs.textColor, }, }, ], @@ -53,10 +57,10 @@ export class ChartjsLineComponent { { gridLines: { display: true, - color: chartjs.yAxisColor, + color: chartjs.axisLineColor, }, ticks: { - fontColor: chartjs.tickColor, + fontColor: chartjs.textColor, }, }, ], diff --git a/src/app/pages/charts/chartjs/chartjs-multiple-xaxis.component.ts b/src/app/pages/charts/chartjs/chartjs-multiple-xaxis.component.ts index a7153684..ef8fe9bb 100644 --- a/src/app/pages/charts/chartjs/chartjs-multiple-xaxis.component.ts +++ b/src/app/pages/charts/chartjs/chartjs-multiple-xaxis.component.ts @@ -3,104 +3,62 @@ import { NbThemeService } from '@nebular/theme'; @Component({ selector: 'ngx-chartjs-multiple-xaxis', - styles: [ - ` - :host { - display: block; - } - `, - ], template: ` - + `, }) export class ChartjsMultipleXaxisComponent { - chartType: string = 'line'; - chartLabels = ['January', 'February', 'March', 'April', 'May', 'June', 'July']; - chartLegend: boolean = true; - chartData: any[] = [ - { - label: 'dataset - big points', - data: [ - this.randomScalingFactor(), - this.randomScalingFactor(), - this.randomScalingFactor(), - this.randomScalingFactor(), - this.randomScalingFactor(), - this.randomScalingFactor(), - this.randomScalingFactor(), - ], - backgroundColor: 'red', - borderColor: 'red', - fill: false, - borderDash: [5, 5], - pointRadius: 15, - pointHoverRadius: 10, - }, - { - label: 'dataset - individual point sizes', - data: [ - this.randomScalingFactor(), - this.randomScalingFactor(), - this.randomScalingFactor(), - this.randomScalingFactor(), - this.randomScalingFactor(), - this.randomScalingFactor(), - this.randomScalingFactor(), - ], - backgroundColor: 'blue', - borderColor: 'blue', - fill: false, - borderDash: [5, 5], - pointRadius: [2, 4, 6, 18, 0, 12, 20], - }, - { - label: 'dataset - large pointHoverRadius', - data: [ - this.randomScalingFactor(), - this.randomScalingFactor(), - this.randomScalingFactor(), - this.randomScalingFactor(), - this.randomScalingFactor(), - this.randomScalingFactor(), - this.randomScalingFactor(), - ], - backgroundColor: 'green', - borderColor: 'green', - fill: false, - pointHoverRadius: 30, - }, - { - label: 'dataset - large pointHitRadius', - data: [ - this.randomScalingFactor(), - this.randomScalingFactor(), - this.randomScalingFactor(), - this.randomScalingFactor(), - this.randomScalingFactor(), - this.randomScalingFactor(), - this.randomScalingFactor(), - ], - backgroundColor: 'yellow', - borderColor: 'yellow', - fill: false, - pointHitRadius: 20, - }, - ]; - chartOptions: any; + data: {}; + options: any; constructor(private theme: NbThemeService) { this.theme.getJsTheme().subscribe(config => { + const colors: any = config.variables; const chartjs: any = config.variables.chartjs; - this.chartOptions = { + this.data = { + labels: ['January', 'February', 'March', 'April', 'May', 'June'], + datasets: [{ + label: 'dataset - big points', + data: [this.random(), this.random(), this.random(), this.random(), this.random(), this.random()], + borderColor: colors.primary, + backgroundColor: colors.primary, + fill: false, + borderDash: [5, 5], + pointRadius: 8, + pointHoverRadius: 10, + }, { + label: 'dataset - individual point sizes', + data: [this.random(), this.random(), this.random(), this.random(), this.random(), this.random()], + borderColor: colors.dangerLight, + backgroundColor: colors.dangerLight, + fill: false, + borderDash: [5, 5], + pointRadius: 8, + pointHoverRadius: 10, + }, { + label: 'dataset - large pointHoverRadius', + data: [this.random(), this.random(), this.random(), this.random(), this.random(), this.random()], + borderColor: colors.info, + backgroundColor: colors.info, + fill: false, + pointRadius: 8, + pointHoverRadius: 10, + }, { + label: 'dataset - large pointHitRadius', + data: [this.random(), this.random(), this.random(), this.random(), this.random(), this.random()], + borderColor: colors.success, + backgroundColor: colors.success, + fill: false, + pointRadius: 8, + pointHoverRadius: 10, + }], + }; + + this.options = { responsive: true, + maintainAspectRatio: false, legend: { position: 'bottom', labels: { @@ -120,10 +78,10 @@ export class ChartjsMultipleXaxisComponent { }, gridLines: { display: true, - color: chartjs.xAxisColor, + color: chartjs.axisLineColor, }, ticks: { - fontColor: chartjs.tickColor, + fontColor: chartjs.textColor, }, }, ], @@ -136,10 +94,10 @@ export class ChartjsMultipleXaxisComponent { }, gridLines: { display: true, - color: chartjs.xAxisColor, + color: chartjs.axisLineColor, }, ticks: { - fontColor: chartjs.tickColor, + fontColor: chartjs.textColor, }, }, ], @@ -148,7 +106,7 @@ export class ChartjsMultipleXaxisComponent { }); } - private randomScalingFactor() { + private random() { return Math.round(Math.random() * 100); } } diff --git a/src/app/pages/charts/chartjs/chartjs-pie.component.ts b/src/app/pages/charts/chartjs/chartjs-pie.component.ts index 26b9b564..9c8ac1b1 100644 --- a/src/app/pages/charts/chartjs/chartjs-pie.component.ts +++ b/src/app/pages/charts/chartjs/chartjs-pie.component.ts @@ -3,33 +3,30 @@ import { NbThemeService } from '@nebular/theme'; @Component({ selector: 'ngx-chartjs-pie', - styles: [ - ` - :host { - display: block; - } - `, - ], template: ` - + `, }) export class ChartjsPieComponent { - chartType: string = 'pie'; - chartLabels: string[] = ['Download Sales', 'In-Store Sales', 'Mail Sales']; - chartData: number[] = [300, 500, 100]; - chartOptions: any; + data: any; + options: any; constructor(private theme: NbThemeService) { this.theme.getJsTheme().subscribe(config => { + const colors: any = config.variables; const chartjs: any = config.variables.chartjs; - this.chartOptions = { + this.data = { + labels: ['Download Sales', 'In-Store Sales', 'Mail Sales'], + datasets: [{ + data: [300, 500, 100], + backgroundColor: [colors.primaryLight, colors.infoLight, colors.successLight], + }], + }; + + this.options = { + maintainAspectRatio: false, responsive: true, scale: { pointLabels: { @@ -40,24 +37,12 @@ export class ChartjsPieComponent { scales: { xAxes: [ { - gridLines: { - display: true, - color: chartjs.xAxisColor, - }, - ticks: { - fontColor: chartjs.tickColor, - }, + display: false, }, ], yAxes: [ { - gridLines: { - display: true, - color: chartjs.yAxisColor, - }, - ticks: { - fontColor: chartjs.tickColor, - }, + display: false, }, ], }, diff --git a/src/app/pages/charts/chartjs/chartjs-radar.component.ts b/src/app/pages/charts/chartjs/chartjs-radar.component.ts index 815827ef..c77dfd68 100644 --- a/src/app/pages/charts/chartjs/chartjs-radar.component.ts +++ b/src/app/pages/charts/chartjs/chartjs-radar.component.ts @@ -1,50 +1,40 @@ import { Component } from '@angular/core'; -import { NbThemeService } from '@nebular/theme'; +import { NbThemeService, NbColorHelper } from '@nebular/theme'; @Component({ selector: 'ngx-chartjs-radar', - styles: [ - ` - :host { - display: block; - } - `, - ], template: ` - + `, }) export class ChartjsRadarComponent { - chartLabels: string[] = ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running']; - chartType: string = 'radar'; - chartOptions: any; - chartData: any[]; + options: any; + data: {}; constructor(private theme: NbThemeService) { this.theme.getJsTheme().subscribe(config => { + const colors: any = config.variables; const chartjs: any = config.variables.chartjs; - this.chartData = [ - { + this.data = { + labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'], + datasets: [{ data: [65, 59, 90, 81, 56, 55, 40], label: 'Series A', - borderColor: chartjs.radar.colors[0], - backgroundColor: chartjs.radar.colors[0], - }, - { + borderColor: colors.danger, + backgroundColor: NbColorHelper.hexToRgbA(colors.dangerLight, 0.5), + }, { data: [28, 48, 40, 19, 96, 27, 100], label: 'Series B', - borderColor: chartjs.radar.colors[1], - backgroundColor: chartjs.radar.colors[1], - }, - ]; + borderColor: colors.warning, + backgroundColor: NbColorHelper.hexToRgbA(colors.warningLight, 0.5), + }], + }; - this.chartOptions = { + this.options = { + responsive: true, + maintainAspectRatio: false, scaleFontColor: 'white', legend: { labels: { @@ -54,13 +44,13 @@ export class ChartjsRadarComponent { scale: { pointLabels: { fontSize: 14, - fontColor: chartjs.radar.pointLabelFontColor, + fontColor: chartjs.textColor, }, gridLines: { - color: chartjs.radar.scaleGridLinesColor, + color: chartjs.axisLineColor, }, angleLines: { - color: chartjs.radar.scaleAngleLinesColor, + color: chartjs.axisLineColor, }, }, }; diff --git a/src/app/pages/charts/chartjs/chartjs.component.scss b/src/app/pages/charts/chartjs/chartjs.component.scss index b3203e62..ae365847 100644 --- a/src/app/pages/charts/chartjs/chartjs.component.scss +++ b/src/app/pages/charts/chartjs/chartjs.component.scss @@ -1,4 +1,20 @@ @import '../../../@theme/styles/themes'; @include nb-install-component() { + ngx-chartjs-pie, + ngx-chartjs-bar, + ngx-chartjs-line, + ngx-chartjs-multiple-xaxis, + ngx-chartjs-bar-horizontal, + ngx-chartjs-radar { + display: block; + height: 100%; + width: 100%; + + /deep/ chart { + display: block; + height: 100%; + width: 100%; + } + } } diff --git a/src/app/pages/charts/charts.module.ts b/src/app/pages/charts/charts.module.ts index baff5c43..8717254a 100644 --- a/src/app/pages/charts/charts.module.ts +++ b/src/app/pages/charts/charts.module.ts @@ -1,7 +1,8 @@ import { NgModule } from '@angular/core'; import { AngularEchartsModule } from 'ngx-echarts'; import { NgxChartsModule } from '@swimlane/ngx-charts'; -import { ChartsModule as Ng2Charts } from 'ng2-charts/ng2-charts'; +import { ChartModule } from 'angular2-chartjs'; + import { ThemeModule } from '../../@theme/theme.module'; import { ChartsRoutingModule, routedComponents } from './charts-routing.module'; @@ -48,7 +49,7 @@ const components = [ ]; @NgModule({ - imports: [ThemeModule, ChartsRoutingModule, AngularEchartsModule, NgxChartsModule, Ng2Charts], + imports: [ThemeModule, ChartsRoutingModule, AngularEchartsModule, NgxChartsModule, ChartModule], declarations: [...routedComponents, ...components], }) export class ChartsModule {} diff --git a/src/app/pages/dashboard/electricity/electricity-chart/electricity-chart.component.ts b/src/app/pages/dashboard/electricity/electricity-chart/electricity-chart.component.ts index 524cbeb4..96ea64e5 100644 --- a/src/app/pages/dashboard/electricity/electricity-chart/electricity-chart.component.ts +++ b/src/app/pages/dashboard/electricity/electricity-chart/electricity-chart.component.ts @@ -87,7 +87,7 @@ export class ElectricityChartComponent implements AfterViewInit { }, axisLine: { lineStyle: { - color: eTheme.xAxisColor, + color: eTheme.axisLineColor, width: '2', }, },