refactor(charts): change chart.js lib wrapper

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",

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",

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)',
+      axisLineColor: '#a1a1e5',
-      yAxisColor: 'rgba(148,159,177,1)',
+      textColor: '#ffffff',
-      tickColor: 'white',
-      legendTextColor: 'white',
-
-      barHorizontal: {
-        colors: ['red', 'blue'],
-      },
-
-      radar: {
-        colors: ['red', 'blue'],
-        scaleGridLinesColor: 'white',
-        scaleAngleLinesColor: 'white',
-        pointLabelFontColor: 'white',
-      },
     },
 
     d3: {

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)',
+      axisLineColor: '#cccccc',
-      yAxisColor: 'rgba(148,159,177,1)',
+      textColor: '#484848',
-      tickColor: 'white',
-      legendTextColor: 'white',
-
-      barHorizontal: {
-        colors: ['red', 'blue'],
-      },
-
-      radar: {
-        colors: ['red', 'blue'],
-        scaleGridLinesColor: 'white',
-        scaleAngleLinesColor: 'white',
-        pointLabelFontColor: 'white',
-      },
     },
 
     d3: {

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: `
-    <canvas baseChart
+    <chart type="horizontalBar" [data]="data" [options]="options"></chart>
-            [datasets]="chartData"
-            [labels]="chartLabels"
-            [options]="chartOptions"
-            [legend]="chartLegend"
-            [chartType]="chartType"></canvas>
   `,
 })
 export class ChartjsBarHorizontalComponent {
-  chartData: any[];
+  data: any;
-  chartLabels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
+  options: any;
-  chartLegend: boolean = true;
-  chartType: string = 'horizontalBar';
-  chartOptions: any;
 
   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: ['January', 'February', 'March', 'April', 'May', 'June'],
+        datasets: [{
             label: 'Dataset 1',
-          backgroundColor: chartjs.barHorizontal.colors[0],
+            backgroundColor: colors.infoLight,
-          borderColor: chartjs.barHorizontal.colors[0],
             borderWidth: 1,
-          data: [
+            data: [this.random(), this.random(), this.random(), this.random(), this.random(), this.random()],
-            this.randomScalingFactor(),
+          }, {
-            this.randomScalingFactor(),
-            this.randomScalingFactor(),
-            this.randomScalingFactor(),
-            this.randomScalingFactor(),
-            this.randomScalingFactor(),
-            this.randomScalingFactor(),
-          ],
-        },
-        {
             label: 'Dataset 2',
-          backgroundColor: chartjs.barHorizontal.colors[1],
+            backgroundColor: colors.successLight,
-          borderColor: chartjs.barHorizontal.colors[1],
+            data: [this.random(), this.random(), this.random(), this.random(), this.random(), this.random()],
-          data: [
-            this.randomScalingFactor(),
-            this.randomScalingFactor(),
-            this.randomScalingFactor(),
-            this.randomScalingFactor(),
-            this.randomScalingFactor(),
-            this.randomScalingFactor(),
-            this.randomScalingFactor(),
-          ],
           },
-      ];
+        ],
+      };
 
-      this.chartOptions = {
+      this.options = {
-        // Elements options apply to all of the options unless overridden in a dataset
+        responsive: true,
-        // In this case, we are setting the border of each horizontal bar to be 2px wide
+        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,
+                display: false,
-                color: chartjs.yAxisColor,
+                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);
   }
 }

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: `
-    <canvas baseChart
+    <chart type="bar" [data]="data" [options]="options"></chart>
-          [datasets]="chartData"
-          [labels]="chartLabels"
-          [options]="chartOptions"
-          [legend]="chartLegend"
-          [chartType]="chartType"></canvas>
   `,
 })
 export class ChartjsBarComponent {
-  chartLabels: string[] = ['2006', '2007', '2008', '2009', '2010', '2011', '2012'];
+  data: any;
-  chartType: string = 'bar';
+  options: any;
-  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;
 
   constructor(private theme: NbThemeService) {
     this.theme.getJsTheme().subscribe(config => {
 
+      const colors: any = config.variables;
       const chartjs: any = config.variables.chartjs;
 
-      this.chartOptions = {
+      this.data = {
-        scaleShowVerticalLines: false,
+        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,
+                display: false,
-                color: chartjs.xAxisColor,
+                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,
               },
             },
           ],

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: `
-    <canvas baseChart
+    <chart type="line" [data]="data" [options]="options"></chart>
-            [datasets]="chartData"
-            [labels]="chartLabels"
-            [options]="chartOptions"
-            [legend]="chartLegend"
-            [chartType]="chatyType"></canvas>
   `,
 })
 export class ChartjsLineComponent {
-  chartData: any[] = [
+  data: any;
-    { data: [65, 59, 80, 81, 56, 55, 40], label: 'Series A' },
+  options: any;
-    { 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;
 
   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,
               },
             },
           ],

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: `
-    <canvas baseChart
+    <chart type="line" [data]="data" [options]="options"></chart>
-            [datasets]="chartData"
-            [labels]="chartLabels"
-            [options]="chartOptions"
-            [legend]="chartLegend"
-            [chartType]="chartType"></canvas>
   `,
 })
 export class ChartjsMultipleXaxisComponent {
-  chartType: string = 'line';
+  data: {};
-  chartLabels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
+  options: any;
-  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;
 
   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);
   }
 }

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: `
-    <canvas baseChart
+    <chart type="pie" [data]="data" [options]="options"></chart>
-            [data]="chartData"
-            [labels]="chartLabels"
-            [options]="chartOptions"
-            [chartType]="chartType"></canvas>
   `,
 })
 export class ChartjsPieComponent {
-  chartType: string = 'pie';
+  data: any;
-  chartLabels: string[] = ['Download Sales', 'In-Store Sales', 'Mail Sales'];
+  options: any;
-  chartData: number[] = [300, 500, 100];
-  chartOptions: 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: false,
-                display: true,
-                color: chartjs.xAxisColor,
-              },
-              ticks: {
-                fontColor: chartjs.tickColor,
-              },
             },
           ],
           yAxes: [
             {
-              gridLines: {
+              display: false,
-                display: true,
-                color: chartjs.yAxisColor,
-              },
-              ticks: {
-                fontColor: chartjs.tickColor,
-              },
             },
           ],
         },

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: `
-    <canvas baseChart
+    <chart type="radar" [data]="data" [options]="options"></chart>
-            [datasets]="chartData"
-            [labels]="chartLabels"
-            [chartType]="chartType"
-            [options]="chartOptions"></canvas>
   `,
 })
 export class ChartjsRadarComponent {
-  chartLabels: string[] = ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'];
+  options: any;
-  chartType: string = 'radar';
+  data: {};
-  chartOptions: any;
-  chartData: any[];
 
   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],
+          borderColor: colors.danger,
-          backgroundColor: chartjs.radar.colors[0],
+          backgroundColor: NbColorHelper.hexToRgbA(colors.dangerLight, 0.5),
-        },
+        }, {
-        {
           data: [28, 48, 40, 19, 96, 27, 100],
           label: 'Series B',
-          borderColor: chartjs.radar.colors[1],
+          borderColor: colors.warning,
-          backgroundColor: chartjs.radar.colors[1],
+          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,
           },
         },
       };

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%;
+    }
+  }
 }

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 {}

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',
               },
             },