diff --git a/src/app/@theme/styles/theme.corporate.ts b/src/app/@theme/styles/theme.corporate.ts
index 633813b9..7a198819 100644
--- a/src/app/@theme/styles/theme.corporate.ts
+++ b/src/app/@theme/styles/theme.corporate.ts
@@ -135,19 +135,19 @@ export const CORPORATE_THEME = {
     },
 
     trafficBarEchart: {
-      gradientFrom: '#ff8ea0',
-      gradientTo: '#ffa36b',
-      shadow: 'rgba(0, 0, 0, 0)',
+      gradientFrom: theme.warningLight,
+      gradientTo: theme.warning,
+      shadow: theme.warningLight,
       shadowBlur: '0',
 
-      axisTextColor: '#b2bac2',
+      axisTextColor: theme.fgText,
       axisFontSize: '12',
 
-      tooltipBg: '#edf0f4',
-      tooltipBorderColor: '#ebeef2',
+      tooltipBg: theme.bg,
+      tooltipBorderColor: theme.border2,
       tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
-      tooltipTextColor: '#2a2a2a',
-      tooltipFontWeight: 'bolder',
+      tooltipTextColor: theme.fgText,
+      tooltipFontWeight: 'normal',
     },
 
     countryOrders: {
diff --git a/src/app/@theme/styles/theme.cosmic.ts b/src/app/@theme/styles/theme.cosmic.ts
index 532ff285..37360bac 100644
--- a/src/app/@theme/styles/theme.cosmic.ts
+++ b/src/app/@theme/styles/theme.cosmic.ts
@@ -135,18 +135,18 @@ export const COSMIC_THEME = {
     },
 
     trafficBarEchart: {
-      gradientFrom: '#fc0',
-      gradientTo: '#ffa100',
-      shadow: '#ffb600',
+      gradientFrom: theme.warningLight,
+      gradientTo: theme.warning,
+      shadow: theme.warningLight,
       shadowBlur: '5',
 
-      axisTextColor: '#a1a1e5',
+      axisTextColor: theme.fgText,
       axisFontSize: '12',
 
-      tooltipBg: 'rgba(0, 255, 170, 0.35)',
-      tooltipBorderColor: '#00d977',
-      tooltipExtraCss: 'box-shadow: 0px 2px 46px 0 rgba(0, 255, 170, 0.35); border-radius: 10px; padding: 4px 16px;',
-      tooltipTextColor: '#ffffff',
+      tooltipBg: theme.bg,
+      tooltipBorderColor: theme.border2,
+      tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
+      tooltipTextColor: theme.fgText,
       tooltipFontWeight: 'normal',
     },
 
diff --git a/src/app/@theme/styles/theme.default.ts b/src/app/@theme/styles/theme.default.ts
index c32b4657..ec52e2ca 100644
--- a/src/app/@theme/styles/theme.default.ts
+++ b/src/app/@theme/styles/theme.default.ts
@@ -135,19 +135,19 @@ export const DEFAULT_THEME = {
     },
 
     trafficBarEchart: {
-      gradientFrom: '#fc0',
-      gradientTo: '#ffa100',
-      shadow: '#ffb600',
+      gradientFrom: theme.warningLight,
+      gradientTo: theme.warning,
+      shadow: theme.warningLight,
       shadowBlur: '0',
 
-      axisTextColor: '#b2bac2',
+      axisTextColor: theme.fgText,
       axisFontSize: '12',
 
-      tooltipBg: '#ffffff',
-      tooltipBorderColor: '#c0c8d1',
+      tooltipBg: theme.bg,
+      tooltipBorderColor: theme.border2,
       tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
-      tooltipTextColor: '#2a2a2a',
-      tooltipFontWeight: 'bolder',
+      tooltipTextColor: theme.fgText,
+      tooltipFontWeight: 'normal',
     },
 
     countryOrders: {