diff --git a/src/app/@theme/theme.module.ts b/src/app/@theme/theme.module.ts
index e277d2ef..eb6979a9 100644
--- a/src/app/@theme/theme.module.ts
+++ b/src/app/@theme/theme.module.ts
@@ -3,31 +3,22 @@ import { CommonModule } from '@angular/common';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 
 import {
-  NgaThemeModule,
+  NgaActionsModule,
   NgaCardModule,
   NgaLayoutModule,
-  NgaTabsetModule,
-  NgaRouteTabsetModule,
-  NgaSidebarModule,
   NgaMenuModule,
-  NgaUserModule,
-  NgaActionsModule,
+  NgaRouteTabsetModule,
   NgaSearchModule,
+  NgaSidebarModule,
+  NgaTabsetModule,
+  NgaThemeModule,
+  NgaUserModule,
 } from '@akveo/nga-theme';
 
-import {
-  HeaderComponent,
-  FooterComponent,
-  SearchInputComponent,
-  TinyMCEComponent,
-} from './components';
+import { FooterComponent, HeaderComponent, SearchInputComponent, TinyMCEComponent } from './components';
 
 
-import {
-  CapitalizePipe,
-  PluralPipe,
-  RoundPipe,
-} from './pipes';
+import { CapitalizePipe, PluralPipe, RoundPipe } from './pipes';
 
 import { OneColumnLayoutComponent } from './layouts';
 
@@ -64,7 +55,70 @@ const PIPES = [
 ];
 
 const NGA_THEME_PROVIDERS = [
-  ...NgaThemeModule.forRoot({ name: 'cosmic' }).providers,
+  ...NgaThemeModule.forRoot({
+      name: 'cosmic',
+    },
+    [
+      {
+        name: 'default',
+        base: 'default',
+        variables: {
+          tempColorGreen: '#7bff24',
+          tempColorLightBlue: '#7bff24',
+          tempColorBlue: '#7bff24',
+          tempColorYellow: '#7bff24',
+          tempColorOrange: '#7bff24',
+
+          solarColorDarkGreen: '#7bff24',
+          solarColorShadow: 'rgba(0, 217, 119, 0.3)',
+          trafficColorBlack: '#7bff24',
+          trafficTooltipBg: 'rgba(0, 255, 170, 0.35)',
+          trafficLineBg: 'rgba(146, 141, 255, 0.5)',
+          trafficShadowLineBg: '#7bff24',
+          trafficShadowLineDarkBg: '#7bff24',
+          trafficShadowLineShadow: '#7bff24',
+          trafficGradFrom: '#7bff24',
+          trafficGradTo: '#7bff24',
+
+          electricityAxisColor: '#7bff24',
+          electricityLineGradFrom: '#7bff24',
+          electricityLineGradTo: '#7bff24',
+          electricityLineShadow: '#7bff24',
+          electricityAreaGradFrom: '#7bff24',
+          electricityAreaGradTo: '#7bff24',
+        },
+      },
+      {
+        name: 'cosmic',
+        base: 'default',
+        variables: {
+          tempColorGreen: '#7bff24',
+          tempColorLightBlue: '#31ffad',
+          tempColorBlue: '#2ec7fe',
+          tempColorYellow: '#fff024',
+          tempColorOrange: '#f7bd59',
+
+          solarColorDarkGreen: '#19977E',
+          solarColorShadow: 'rgba(0, 217, 119, 0.3)',
+          trafficColorBlack: '#000000',
+          trafficTooltipBg: 'rgba(0, 255, 170, 0.35)',
+          trafficLineBg: 'rgba(146, 141, 255, 0.5)',
+          trafficShadowLineBg: '#bdbaff',
+          trafficShadowLineDarkBg: '#a695ff',
+          trafficShadowLineShadow: 'rgba(33, 7, 77, 0.5)',
+          trafficGradFrom: 'rgba(118, 89, 255, 0.4)',
+          trafficGradTo: 'rgba(164, 84, 255, 0.5)',
+
+          electricityAxisColor: '#a1a1e5',
+          electricityLineGradFrom: '#00ffaa',
+          electricityLineGradTo: '#fff835',
+          electricityLineShadow: 'rgba(14, 16, 48, 0.4)',
+          electricityAreaGradFrom: 'rgba(188, 92, 255, 0.5)',
+          electricityAreaGradTo: 'rgba(188, 92, 255, 0)',
+        },
+      },
+    ],
+  ).providers,
   ...NgaSidebarModule.forRoot().providers,
   ...NgaSidebarModule.forRoot().providers,
   ...NgaMenuModule.forRoot().providers,
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 4ea0f778..e40dea85 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
@@ -1,17 +1,21 @@
 import { Component, OnInit } from '@angular/core';
+import { NgaThemeService } from '@akveo/nga-theme';
+
+declare const echarts: any;
 
 @Component({
   selector: 'ngx-electricity-chart',
   styleUrls: ['./electricity-chart.component.scss'],
   template: `
-    <div echarts [options]='options' class='echart'></div>
+    <div echarts [options]="option" class="echart"></div>
   `,
 })
-export class ElectricityChartComponent implements OnInit {
+export class ElectricityChartComponent {
 
-  options: any;
+  option: any;
+
+  constructor(private theme: NgaThemeService) {
 
-  ngOnInit() {
     const points = [490, 490, 495, 500, 505, 510, 520, 530, 550, 580, 630,
       720, 800, 840, 860, 870, 870, 860, 840, 800, 720, 200, 145, 130, 130,
       145, 200, 570, 635, 660, 670, 670, 660, 630, 580, 460, 380, 350, 340,
@@ -22,137 +26,139 @@ export class ElectricityChartComponent implements OnInit {
       value: p,
     }));
 
-    this.options = {
-      grid: {
-        left: 0,
-        top: 0,
-        right: 0,
-        bottom: 80,
-      },
-      tooltip: {
-        trigger: 'axis',
-        axisPointer: {
-          type: 'line',
-          lineStyle: {
-            color: 'rgba(255, 255, 255, 0.1)',
-          },
+    this.theme.getJsTheme().subscribe(config => {
+      this.option = {
+        grid: {
+          left: 0,
+          top: 0,
+          right: 0,
+          bottom: 80,
         },
-        position: 'top',
-        backgroundColor: 'rgba(0, 255, 170, 0.35)',
-        borderColor: '#00f9a6',
-        borderWidth: 3,
-        formatter: '{c0} kWh',
-        extraCssText: 'box-shadow: 0px 2px 46px 0 rgba(0, 255, 170, 0.35); border-radius: 10px;padding: 5px 20px;',
-      },
-      xAxis: {
-        type: 'category',
-        boundaryGap: false,
-        offset: 25,
-        data: data.map(i => i.label),
-        axisTick: {
-          show: false,
-        },
-        axisLabel: {
-          textStyle: {
-            color: '#a1a1e5',
-            fontSize: 18,
-          },
-        },
-        axisLine: {
-          lineStyle: {
-            color: '#a1a1e5',
-            opacity: 0.3,
-            width: '2',
-          },
-        },
-      },
-      yAxis: {
-        boundaryGap: [0, '5%'],
-        axisLine: {
-          show: false,
-        },
-        axisLabel: {
-          show: false,
-        },
-        axisTick: {
-          show: false,
-        },
-        splitLine: {
-          show: true,
-          lineStyle: {
-            color: '#a1a1e5',
-            opacity: 0.2,
-            width: '1',
-          },
-        },
-      },
-      series: [
-        {
-          type: 'line',
-          smooth: true,
-          symbolSize: 20,
-          itemStyle: {
-            normal: {
-              opacity: 0,
-            },
-            emphasis: {
-              color: 'white',
-              borderWidth: 0,
-              opacity: 1,
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'line',
+            lineStyle: {
+              color: 'rgba(255, 255, 255, 0.1)',
             },
           },
-          lineStyle: {
-            normal: {
-              width: 6,
-              type: 'dotted',
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-                offset: 0,
-                color: '#00ffaa',
-              }, {
-                offset: 1,
-                color: '#fff835 ',
-              }]),
-              shadowColor: 'rgba(14, 16, 48, 0.4)',
-              shadowBlur: 6,
-              shadowOffsetY: 12,
-            },
-          },
-          areaStyle: {
-            normal: {
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-                offset: 0,
-                color: 'rgba(188, 92, 255, 0.5)',
-              }, {
-                offset: 1,
-                color: 'rgba(188, 92, 255, 0)',
-              }]),
-            },
-          },
-          data: data.map(i => i.value),
+          position: 'top',
+          backgroundColor: config.trafficTooltipBg,
+          borderColor: config.colorSuccess,
+          borderWidth: 3,
+          formatter: '{c0} kWh',
+          extraCssText: `box-shadow: 0px 2px 46px 0 ${config.trafficTooltipBg};border-radius: 10px;padding: 5px 20px;`,
         },
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          offset: 25,
+          data: data.map(i => i.label),
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            textStyle: {
+              color: config.electricityAxisColor,
+              fontSize: 18,
+            },
+          },
+          axisLine: {
+            lineStyle: {
+              color: config.electricityAxisColor,
+              opacity: 0.3,
+              width: '2',
+            },
+          },
+        },
+        yAxis: {
+          boundaryGap: [0, '5%'],
+          axisLine: {
+            show: false,
+          },
+          axisLabel: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: config.electricityAxisColor,
+              opacity: 0.2,
+              width: '1',
+            },
+          },
+        },
+        series: [
+          {
+            type: 'line',
+            smooth: true,
+            symbolSize: 20,
+            itemStyle: {
+              normal: {
+                opacity: 0,
+              },
+              emphasis: {
+                color: 'white',
+                borderWidth: 0,
+                opacity: 1,
+              },
+            },
+            lineStyle: {
+              normal: {
+                width: 6,
+                type: 'dotted',
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                  offset: 0,
+                  color: config.electricityLineGradFrom,
+                }, {
+                  offset: 1,
+                  color: config.electricityLineGradTo,
+                }]),
+                shadowColor: config.electricityLineShadow,
+                shadowBlur: 6,
+                shadowOffsetY: 12,
+              },
+            },
+            areaStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                  offset: 0,
+                  color: config.electricityAreaGradFrom,
+                }, {
+                  offset: 1,
+                  color: config.electricityAreaGradTo,
+                }]),
+              },
+            },
+            data: data.map(i => i.value),
+          },
 
-        {
-          type: 'line',
-          smooth: true,
-          symbol: 'none',
-          lineStyle: {
-            normal: {
-              width: 6,
-              type: 'dotted',
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-                offset: 0,
-                color: '#00ffaa',
-              }, {
-                offset: 1,
-                color: '#fff835 ',
-              }]),
-              shadowColor: 'rgb(166, 149, 255)',
-              shadowBlur: 14,
+          {
+            type: 'line',
+            smooth: true,
+            symbol: 'none',
+            lineStyle: {
+              normal: {
+                width: 6,
+                type: 'dotted',
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                  offset: 0,
+                  color: config.electricityLineGradFrom,
+                }, {
+                  offset: 1,
+                  color: config.electricityLineGradTo,
+                }]),
+                shadowColor: config.trafficShadowLineDarkBg,
+                shadowBlur: 14,
+              },
             },
+            data: data.map(i => i.value),
           },
-          data: data.map(i => i.value),
-        },
-      ],
-    };
+        ],
+      };
+    });
   }
 }
diff --git a/src/app/pages/dashboard/solar/solar.component.ts b/src/app/pages/dashboard/solar/solar.component.ts
index 6baff777..a9f8c2f9 100644
--- a/src/app/pages/dashboard/solar/solar.component.ts
+++ b/src/app/pages/dashboard/solar/solar.component.ts
@@ -18,146 +18,147 @@ declare const echarts: any;
 })
 export class SolarComponent {
 
+  option: any = {};
+
   @Input('chartValue')
-  set chartValue (value: number) {
+  set chartValue(value: number) {
     this.option.series[0].data[0].value = value;
     this.option.series[0].data[1].value = 100 - value;
     this.option.series[1].data[0].value = value;
   }
 
-  option: any = {
-    tooltip: {
-      trigger: 'item',
-      formatter: '{a} <br/>{b} : {c} ({d}%)',
-    },
-    series: [
-      {
-        name: ' ',
-        clockWise: true,
-        hoverAnimation: false,
-        type: 'pie',
-        center: ['35%', '50%'],
-        radius: ['70%', '90%'],
-        data: [
-          {
-            value: 72,
-            name: ' ',
-            label: {
-              normal: {
-                position: 'center',
-                formatter: '{d}%',
-                textStyle: {
-                  fontSize: '22',
-                  fontFamily: 'Exo',
-                },
-              },
-            },
-            tooltip: {
-              show: false,
-            },
-            itemStyle: {
-              normal: {
-                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-                  offset: 0,
-                  color: '#7bff24',
-                }, {
-                  offset: 1,
-                  color: '#2ec7fe',
-                }]),
-                shadowColor: '#19977E',
-                shadowBlur: 0,
-                shadowOffsetX: 0,
-                shadowOffsetY: 3,
-              },
-            },
-            hoverAnimation: false,
-          },
-          {
-            value: 28,
-            name: ' ',
-            tooltip: {
-              show: false,
-            },
-            label: {
-              normal: {
-                position: 'inner',
-              },
-            },
-            itemStyle: {
-              normal: {
-                color: 'none',
-              },
-            },
-          },
-        ],
-      },
-      {
-        name: ' ',
-        clockWise: true,
-        hoverAnimation: false,
-        type: 'pie',
-        center: ['35%', '50%'],
-        radius: ['70%', '90%'],
-        data: [
-          {
-            value: 72,
-            name: ' ',
-            label: {
-              normal: {
-                position: 'inner',
-                show: false,
-              },
-            },
-            tooltip: {
-              show: false,
-            },
-            itemStyle: {
-              normal: {
-                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-                  offset: 0,
-                  color: '#7bff24',
-                }, {
-                  offset: 1,
-                  color: '#2ec7fe',
-                }]),
-                shadowColor: 'rgba(0, 217, 119, 0.3)',
-                shadowBlur: 7,
-              },
-            },
-            hoverAnimation: false,
-          },
-          {
-            value: 28,
-            name: ' ',
-            tooltip: {
-              show: false,
-            },
-            label: {
-              normal: {
-                position: 'inner',
-              },
-            },
-            itemStyle: {
-              normal: {
-                color: 'none',
-              },
-            },
-          },
-        ],
-      },
-    ],
-  };
-
   constructor(private theme: NgaThemeService) {
     this.theme.getJsTheme().subscribe(config => {
 
-      const option = Object.assign({}, this.option);
-
-      option.series[0].data[1].itemStyle.normal.color = config.layoutBg;
-      option.series[0].data[0].label.normal.textStyle.color = config.colorFgHeading;
-      option.series[0].data[0].label.normal.textStyle.fontFamily = config.fontSecondary;
-
-      this.option = option;
+      this.option = Object.assign({}, {
+        tooltip: {
+          trigger: 'item',
+          formatter: '{a} <br/>{b} : {c} ({d}%)',
+        },
+        series: [
+          {
+            name: ' ',
+            clockWise: true,
+            hoverAnimation: false,
+            type: 'pie',
+            center: ['35%', '50%'],
+            radius: ['70%', '90%'],
+            data: [
+              {
+                value: 72,
+                name: ' ',
+                label: {
+                  normal: {
+                    position: 'center',
+                    formatter: '{d}%',
+                    textStyle: {
+                      fontSize: '22',
+                      fontFamily: config.fontSecondary,
+                      color: config.colorFgHeading,
+                    },
+                  },
+                },
+                tooltip: {
+                  show: false,
+                },
+                itemStyle: {
+                  normal: {
+                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                      {
+                        offset: 0,
+                        color: config.tempColorGreen,
+                      },
+                      {
+                        offset: 1,
+                        color: config.tempColorBlue,
+                      },
+                    ]),
+                    shadowColor: config.solarColorDarkGreen,
+                    shadowBlur: 0,
+                    shadowOffsetX: 0,
+                    shadowOffsetY: 3,
+                  },
+                },
+                hoverAnimation: false,
+              },
+              {
+                value: 28,
+                name: ' ',
+                tooltip: {
+                  show: false,
+                },
+                label: {
+                  normal: {
+                    position: 'inner',
+                  },
+                },
+                itemStyle: {
+                  normal: {
+                    color: config.layoutBg,
+                  },
+                },
+              },
+            ],
+          },
+          {
+            name: ' ',
+            clockWise: true,
+            hoverAnimation: false,
+            type: 'pie',
+            center: ['35%', '50%'],
+            radius: ['70%', '90%'],
+            data: [
+              {
+                value: 72,
+                name: ' ',
+                label: {
+                  normal: {
+                    position: 'inner',
+                    show: false,
+                  },
+                },
+                tooltip: {
+                  show: false,
+                },
+                itemStyle: {
+                  normal: {
+                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                      {
+                        offset: 0,
+                        color: config.tempColorGreen,
+                      },
+                      {
+                        offset: 1,
+                        color: config.tempColorBlue,
+                      },
+                    ]),
+                    shadowColor: 'rgba(0, 217, 119, 0.3)',
+                    shadowBlur: 7,
+                  },
+                },
+                hoverAnimation: false,
+              },
+              {
+                value: 28,
+                name: ' ',
+                tooltip: {
+                  show: false,
+                },
+                label: {
+                  normal: {
+                    position: 'inner',
+                  },
+                },
+                itemStyle: {
+                  normal: {
+                    color: 'none',
+                  },
+                },
+              },
+            ],
+          },
+        ],
+      });
     });
   }
 }
diff --git a/src/app/pages/dashboard/temperature/temperature.component.html b/src/app/pages/dashboard/temperature/temperature.component.html
index 24c3512e..bd290b31 100644
--- a/src/app/pages/dashboard/temperature/temperature.component.html
+++ b/src/app/pages/dashboard/temperature/temperature.component.html
@@ -6,7 +6,12 @@
       <div class="slider-container">
         <ngx-temperature-dragger [(value)]="temperature" (power)="temperatureOff = !$event"
                                  [min]="12" [max]="30" [disableArcColor]="themeConfig.layoutBg"
-                                 [fillColors]="['#2ec7fe', '#31ffad', '#7bff24', '#fff024', '#f7bd59']">
+                                 [fillColors]="[
+                                  themeConfig.tempColorBlue,
+                                  themeConfig.tempColorLightBlue,
+                                  themeConfig.tempColorGreen,
+                                  themeConfig.tempColorYellow,
+                                  themeConfig.tempColorOrange]">
 
           <div class="slider-value-container"  [ngClass]="{ 'off': temperatureOff }">
             <div class="value temperature">
@@ -41,7 +46,12 @@
       <div class="slider-container">
         <ngx-temperature-dragger [(value)]="humidity" (power)="humidityOff = !$event"
                                  [min]="0" [max]="100" [disableArcColor]="themeConfig.layoutBg"
-                                 [fillColors]="['#fff024', '#7bff24', '#31ffad', '#2ec7fe']">
+                                 [fillColors]="[
+                                  themeConfig.tempColorBlue,
+                                  themeConfig.tempColorLightBlue,
+                                  themeConfig.tempColorGreen,
+                                  themeConfig.tempColorYellow,
+                                  themeConfig.tempColorOrange]">
 
           <div class="slider-value-container"  [ngClass]="{ 'off': humidityOff }">
             <div class="value humidity">
diff --git a/src/app/pages/dashboard/traffic/traffic.component.ts b/src/app/pages/dashboard/traffic/traffic.component.ts
index 1b26afe8..fb9246a1 100644
--- a/src/app/pages/dashboard/traffic/traffic.component.ts
+++ b/src/app/pages/dashboard/traffic/traffic.component.ts
@@ -20,129 +20,123 @@ const data = points.map((p, index) => ({
 })
 export class TrafficComponent {
 
-  option = {
-    grid: {
-      left: 0,
-      top: 0,
-      right: 0,
-      bottom: 0,
-    },
-    xAxis: {
-      type: 'category',
-      boundaryGap: false,
-      data: data.map(i => i.label),
-    },
-    yAxis: {
-      boundaryGap: [0, '5%'],
-      axisLine: {
-        show: false,
-      },
-      axisLabel: {
-        show: false,
-      },
-      axisTick: {
-        show: false,
-      },
-      splitLine: {
-        show: true,
-        lineStyle: {
-          color: '#000000',
-          opacity: 0.06,
-          width: '1',
-        },
-      },
-    },
-    tooltip: {
-      axisPointer: {
-        type: 'shadow',
-      },
-      position: 'top',
-      backgroundColor: 'rgba(0, 255, 170, 0.35)',
-      borderColor: '#00f9a6',
-      borderWidth: 3,
-      formatter: '{c0} MB',
-      extraCssText: 'box-shadow: 0px 2px 46px 0 rgba(0, 255, 170, 0.35); border-radius: 10px;padding: 5px 20px;',
-    },
-    series: [
-      {
-        type: 'line',
-        symbol: 'circle',
-        symbolSize: 8,
-        sampling: 'average',
-        silent: true,
-        itemStyle: {
-          normal: {
-            color: 'rgba(146, 141, 255, 0.5)',
-          },
-          emphasis: {
-            color: 'rgba(0,0,0,0)',
-            borderColor: 'rgba(0,0,0,0)',
-            borderWidth: 0,
-          },
-        },
-        lineStyle: {
-          normal: {
-            width: 2,
-            color: 'rgba(146, 141, 255, 0.5)',
-          },
-        },
-        data: data.map(i => i.value - 15),
-      },
-      {
-        type: 'line',
-        symbol: 'circle',
-        symbolSize: 6,
-        sampling: 'average',
-        itemStyle: {
-          normal: {
-            color: '#bdbaff',
-            borderColor: 'white',
-            borderWidth: 2,
-            shadowColor: 'rgba(33, 7, 77, 0.5)',
-            shadowOffsetX: 0,
-            shadowOffsetY: -3,
-            shadowBlur: 10,
-          },
-          emphasis: {
-            color: 'white',
-            borderColor: 'rgba(0,0,0,0)',
-            borderWidth: 5,
-          },
-        },
-        lineStyle: {
-          normal: {
-            width: 2,
-            color: '#bdbaff',
-            shadowColor: 'rgb(166, 149, 255)',
-            shadowBlur: 14,
-          },
-        },
-        areaStyle: {
-          normal: {
-            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-              offset: 0,
-              color: 'rgba(118, 89, 255, 0.4)',
-            }, {
-              offset: 1,
-              color: 'rgba(164, 84, 255, 0.5)',
-            }]),
-          },
-        },
-        data: data.map(i => i.value),
-      },
-    ],
-  };
+  option: any = {};
 
   constructor(private theme: NgaThemeService) {
     this.theme.getJsTheme().subscribe(config => {
 
-      // const option = Object.assign({}, this.option);
-      //
-      // option.series[0].data[1].itemStyle.normal.color = config.layoutBg;
-      // option.series[0].data[0].label.normal.textStyle.color = config.colorFgHeading;
-      // option.series[0].data[0].label.normal.textStyle.fontFamily = config.fontSecondary;
-      //
-      // this.option = option;
+      this.option = Object.assign({}, {
+        grid: {
+          left: 0,
+          top: 0,
+          right: 0,
+          bottom: 0,
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          data: data.map(i => i.label),
+        },
+        yAxis: {
+          boundaryGap: [0, '5%'],
+          axisLine: {
+            show: false,
+          },
+          axisLabel: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: config.trafficColorBlack,
+              opacity: 0.06,
+              width: '1',
+            },
+          },
+        },
+        tooltip: {
+          axisPointer: {
+            type: 'shadow',
+          },
+          position: 'top',
+          backgroundColor: config.trafficTooltipBg,
+          borderColor: config.colorSuccess,
+          borderWidth: 3,
+          formatter: '{c0} MB',
+          extraCssText: `box-shadow: 0px 2px 46px 0 ${config.trafficTooltipBg};border-radius: 10px;padding: 5px 20px;`,
+        },
+        series: [
+          {
+            type: 'line',
+            symbol: 'circle',
+            symbolSize: 8,
+            sampling: 'average',
+            silent: true,
+            itemStyle: {
+              normal: {
+                color: config.trafficLineBg,
+              },
+              emphasis: {
+                color: 'rgba(0,0,0,0)',
+                borderColor: 'rgba(0,0,0,0)',
+                borderWidth: 0,
+              },
+            },
+            lineStyle: {
+              normal: {
+                width: 2,
+                color: config.trafficLineBg,
+              },
+            },
+            data: data.map(i => i.value - 15),
+          },
+          {
+            type: 'line',
+            symbol: 'circle',
+            symbolSize: 6,
+            sampling: 'average',
+            itemStyle: {
+              normal: {
+                color: config.trafficShadowLineBg,
+                borderColor: 'white',
+                borderWidth: 2,
+                shadowColor: config.trafficShadowLineShadow,
+                shadowOffsetX: 0,
+                shadowOffsetY: -3,
+                shadowBlur: 10,
+              },
+              emphasis: {
+                color: 'white',
+                borderColor: 'rgba(0,0,0,0)',
+                borderWidth: 5,
+              },
+            },
+            lineStyle: {
+              normal: {
+                width: 2,
+                color: config.trafficLineBg,
+                shadowColor: config.trafficShadowLineDarkBg,
+                shadowBlur: 14,
+              },
+            },
+            areaStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                  offset: 0,
+                  color: config.trafficGradFrom,
+                }, {
+                  offset: 1,
+                  color: config.trafficGradTo,
+                }]),
+              },
+            },
+            data: data.map(i => i.value),
+          },
+        ],
+      });
     });
   }
 }