diff --git a/src/app/@theme/styles/theme.cosmic.ts b/src/app/@theme/styles/theme.cosmic.ts
index 69518887..4e30cfaf 100644
--- a/src/app/@theme/styles/theme.cosmic.ts
+++ b/src/app/@theme/styles/theme.cosmic.ts
@@ -119,5 +119,35 @@ export const COSMIC_THEME = {
     chartjsRadarScaleGridLinesColor: 'white',
     chartjsRadarScaleAngleLinesColor: 'white',
     chartjsRadarPointLabelFontColor: 'white',
+
+    d3PieColor1: '#5AA454',
+    d3PieColor2: '#A10A28',
+    d3PieColor3: '#C7B42C',
+    d3PieColor4: '#AAAAAA',
+
+    d3BarColor1: '#5AA454',
+    d3BarColor2: '#A10A28',
+    d3BarColor3: '#C7B42C',
+    d3BarColor4: '#AAAAAA',
+
+    d3LineColor1: '#5AA454',
+    d3LineColor2: '#A10A28',
+    d3LineColor3: '#C7B42C',
+    d3LineColor4: '#AAAAAA',
+
+    d3AdvancedPieColor1: '#5AA454',
+    d3AdvancedPieColor2: '#A10A28',
+    d3AdvancedPieColor3: '#C7B42C',
+    d3AdvancedPieColor4: '#AAAAAA',
+
+    d3AreaStackColor1: '#5AA454',
+    d3AreaStackColor2: '#A10A28',
+    d3AreaStackColor3: '#C7B42C',
+    d3AreaStackColor4: '#AAAAAA',
+
+    d3PolarColor1: '#5AA454',
+    d3PolarColor2: '#A10A28',
+    d3PolarColor3: '#C7B42C',
+    d3PolarColor4: '#AAAAAA',
   },
 };
diff --git a/src/app/pages/charts/chartjs/chartjs-pie.component.ts b/src/app/pages/charts/chartjs/chartjs-pie.component.ts
index 3c10fdcf..7e179a70 100644
--- a/src/app/pages/charts/chartjs/chartjs-pie.component.ts
+++ b/src/app/pages/charts/chartjs/chartjs-pie.component.ts
@@ -28,12 +28,6 @@ export class ChartjsPieComponent {
     this.theme.getJsTheme().subscribe(config => {
       this.chartOptions = {
         responsive: true,
-        scale: {
-          pointLabels: {
-            fontSize: 14,
-            fontColor: config.chartjsRadarPointLabelFontColor,
-          },
-        },
         scales: {
           xAxes: [
             {
diff --git a/src/app/pages/charts/d3/d3-advanced-pie.component.ts b/src/app/pages/charts/d3/d3-advanced-pie.component.ts
index 172f0cf0..129edc7c 100644
--- a/src/app/pages/charts/d3/d3-advanced-pie.component.ts
+++ b/src/app/pages/charts/d3/d3-advanced-pie.component.ts
@@ -1,4 +1,5 @@
 import { Component } from '@angular/core';
+import { NgaThemeService } from '@akveo/nga-theme';
 
 @Component({
   selector: 'ngx-d3-advanced-pie',
@@ -26,7 +27,18 @@ export class D3AdvancedPieComponent {
     },
   ];
   view: any[] = [700, 400];
-  colorScheme = {
-    domain: ['#5AA454', '#A10A28', '#C7B42C', '#AAAAAA'],
-  };
+  colorScheme: any;
+
+  constructor(private theme: NgaThemeService) {
+    this.theme.getJsTheme().subscribe(config => {
+      this.colorScheme = {
+        domain: [
+          config.d3AdvancedPieColor1,
+          config.d3AdvancedPieColor2,
+          config.d3AdvancedPieColor3,
+          config.d3AdvancedPieColor4,
+        ],
+      };
+    });
+  }
 }
diff --git a/src/app/pages/charts/d3/d3-area-stack.component.ts b/src/app/pages/charts/d3/d3-area-stack.component.ts
index 8300574f..6a2a3692 100644
--- a/src/app/pages/charts/d3/d3-area-stack.component.ts
+++ b/src/app/pages/charts/d3/d3-area-stack.component.ts
@@ -1,4 +1,5 @@
 import { Component } from '@angular/core';
+import { NgaThemeService } from '@akveo/nga-theme';
 
 @Component({
   selector: 'ngx-d3-area-stack',
@@ -64,9 +65,6 @@ export class D3AreaStackComponent {
   ];
   view: any[] = [700, 400];
   showLegend = true;
-  colorScheme = {
-    domain: ['#5AA454', '#A10A28', '#C7B42C', '#AAAAAA'],
-  };
   autoScale = true;
   showXAxis = true;
   showYAxis = true;
@@ -74,4 +72,18 @@ export class D3AreaStackComponent {
   showYAxisLabel = true;
   xAxisLabel = 'Country';
   yAxisLabel = 'Population';
+  colorScheme: any;
+
+  constructor(private theme: NgaThemeService) {
+    this.theme.getJsTheme().subscribe(config => {
+      this.colorScheme = {
+        domain: [
+          config.d3AreaStackColor1,
+          config.d3AreaStackColor2,
+          config.d3AreaStackColor3,
+          config.d3AreaStackColor4,
+        ],
+      };
+    });
+  }
 }
diff --git a/src/app/pages/charts/d3/d3-bar.component.ts b/src/app/pages/charts/d3/d3-bar.component.ts
index d26fc0ec..332e98d5 100644
--- a/src/app/pages/charts/d3/d3-bar.component.ts
+++ b/src/app/pages/charts/d3/d3-bar.component.ts
@@ -1,4 +1,5 @@
 import { Component } from '@angular/core';
+import { NgaThemeService } from '@akveo/nga-theme';
 
 @Component({
   selector: 'ngx-d3-bar',
@@ -34,9 +35,6 @@ export class D3BarComponent {
   ];
   view: any[] = [700, 400];
   showLegend = true;
-  colorScheme = {
-    domain: ['#5AA454', '#A10A28', '#C7B42C', '#AAAAAA'],
-  };
   showXAxis = true;
   showYAxis = true;
   showLabels = true;
@@ -44,4 +42,13 @@ export class D3BarComponent {
   xAxisLabel = 'Country';
   showYAxisLabel = true;
   yAxisLabel = 'Population';
+  colorScheme: any;
+
+  constructor(private theme: NgaThemeService) {
+    this.theme.getJsTheme().subscribe(config => {
+      this.colorScheme = {
+        domain: [config.d3BarColor1, config.d3BarColor2, config.d3BarColor3, config.d3BarColor4],
+      };
+    });
+  }
 }
diff --git a/src/app/pages/charts/d3/d3-line.component.ts b/src/app/pages/charts/d3/d3-line.component.ts
index d40d92e5..4c31ef08 100644
--- a/src/app/pages/charts/d3/d3-line.component.ts
+++ b/src/app/pages/charts/d3/d3-line.component.ts
@@ -1,4 +1,5 @@
 import { Component } from '@angular/core';
+import { NgaThemeService } from '@akveo/nga-theme';
 
 @Component({
   selector: 'ngx-d3-line',
@@ -61,9 +62,6 @@ export class D3LineComponent {
   ];
   view: any[] = [700, 400];
   showLegend = true;
-  colorScheme = {
-    domain: ['#5AA454', '#A10A28', '#C7B42C', '#AAAAAA'],
-  };
   showXAxis = true;
   showYAxis = true;
   showLabels = true;
@@ -71,4 +69,13 @@ export class D3LineComponent {
   xAxisLabel = 'Country';
   showYAxisLabel = true;
   yAxisLabel = 'Population';
+  colorScheme: any;
+
+  constructor(private theme: NgaThemeService) {
+    this.theme.getJsTheme().subscribe(config => {
+      this.colorScheme = {
+        domain: [config.d3LineColor1, config.d3LineColor2, config.d3LineColor3, config.d3LineColor4],
+      };
+    });
+  }
 }
diff --git a/src/app/pages/charts/d3/d3-pie.component.ts b/src/app/pages/charts/d3/d3-pie.component.ts
index e00fd9a5..55a82930 100644
--- a/src/app/pages/charts/d3/d3-pie.component.ts
+++ b/src/app/pages/charts/d3/d3-pie.component.ts
@@ -1,4 +1,5 @@
 import { Component } from '@angular/core';
+import { NgaThemeService } from '@akveo/nga-theme';
 
 @Component({
   selector: 'ngx-d3-pie',
@@ -29,9 +30,6 @@ export class D3PieComponent {
   ];
   view: any[] = [700, 400];
   showLegend = true;
-  colorScheme = {
-    domain: ['#5AA454', '#A10A28', '#C7B42C', '#AAAAAA'],
-  };
   showXAxis = true;
   showYAxis = true;
   showLabels = true;
@@ -39,4 +37,13 @@ export class D3PieComponent {
   xAxisLabel = 'Country';
   showYAxisLabel = true;
   yAxisLabel = 'Population';
+  colorScheme: any;
+
+  constructor(private theme: NgaThemeService) {
+    this.theme.getJsTheme().subscribe(config => {
+      this.colorScheme = {
+        domain: [config.d3PieColor1, config.d3PieColor2, config.d3PieColor3, config.d3PieColor4],
+      };
+    });
+  }
 }
diff --git a/src/app/pages/charts/d3/d3-polar.component.ts b/src/app/pages/charts/d3/d3-polar.component.ts
index 9d2affe0..0eac641a 100644
--- a/src/app/pages/charts/d3/d3-polar.component.ts
+++ b/src/app/pages/charts/d3/d3-polar.component.ts
@@ -1,4 +1,5 @@
 import { Component } from '@angular/core';
+import { NgaThemeService } from '@akveo/nga-theme';
 
 @Component({
   selector: 'ngx-d3-polar',
@@ -74,9 +75,6 @@ export class D3PolarComponent {
   ];
   view: any[] = [700, 400];
   showLegend = true;
-  colorScheme = {
-    domain: ['#5AA454', '#A10A28', '#C7B42C', '#AAAAAA'],
-  };
   autoScale = true;
   showXAxis = true;
   showYAxis = true;
@@ -84,4 +82,13 @@ export class D3PolarComponent {
   showYAxisLabel = true;
   xAxisLabel = 'Country';
   yAxisLabel = 'Population';
+  colorScheme: any;
+
+  constructor(private theme: NgaThemeService) {
+    this.theme.getJsTheme().subscribe(config => {
+      this.colorScheme = {
+        domain: [config.d3PolarColor1, config.d3PolarColor2, config.d3PolarColor3, config.d3PolarColor4],
+      };
+    });
+  }
 }