diff --git a/src/app/components/types/bar/bar.component.html b/src/app/components/types/bar/bar.component.html
index e8de4b0..5d0dd02 100644
--- a/src/app/components/types/bar/bar.component.html
+++ b/src/app/components/types/bar/bar.component.html
@@ -1,13 +1,13 @@
 <div>
   <mat-card flex>
     <mat-card-title>Bar</mat-card-title>
-    <mat-card-subtitle>Individual component configurations, series, tooltip, toolbox, dataset, x & y axis</mat-card-subtitle>
+    <mat-card-subtitle>Individual component configurations, series, tooltip, toolbox, dataset, x & y axis and theme</mat-card-subtitle>
     <mat-divider></mat-divider>
     <mat-card-content>
       <mat-tab-group mat-stretch-tabs dynamicHeight>
         <mat-tab>
           <ng-template matTabLabel>Demo</ng-template>
-          <td-chart [style.height.px]="300">
+          <td-chart [style.height.px]="300" [themeName]="themeSelector.selected$ | async">
             <td-chart-dataset [source]="[['Electronics', 150, 80], ['Toys', 130, 122], ['Grocery', 150, 80],
               ['Appliances', 120, 120], ['Automotive', 150, 80],
               ['Sports', 120, 120]]">
@@ -46,9 +46,7 @@
                 </table>
               </ng-template>
             </td-chart-toolbox>
-            <td-chart-tooltip [trigger]="'item'"
-                              [textStyle]="{ color: '#818181' }"
-                              [backgroundColor]="'#ffffff'">
+            <td-chart-tooltip [trigger]="'item'">
               <ng-template let-params let-ticket="ticket" tdTooltipFormatter>
                 <ng-container *ngIf="params">
                   <div layout="row" layout-align="start center">
@@ -74,13 +72,11 @@
                               [splitLine]="{ lineStyle: { type: 'dotted' } }">
             </td-chart-y-axis>
             <td-chart-series td-bar
-                            [name]="'Today'"
-                            [color]="'#F2724B'">
+                            [name]="'Today'">
             </td-chart-series>
             <td-chart-series td-bar
                             [name]="'Yesterday'"
-                            [markLine]="{ data: [{ name: 'Average', value: 30, xAxis: 1, yAxis: 30 }] }"
-                            [color]="'#3A4950'">
+                            [markLine]="{ data: [{ name: 'Average', value: 30, xAxis: 1, yAxis: 30 }] }">
             </td-chart-series>
           </td-chart>
         </mat-tab>
@@ -89,7 +85,7 @@
           <p>HTML: </p>
           <td-highlight lang="html">
             <![CDATA[
-            <td-chart [style.height.px]="300">
+            <td-chart [style.height.px]="300" [themeName]="'aqua-splash'">
                 <td-chart-dataset [source]="[['Electronics', 150, 80], ['Toys', 130, 122], ['Grocery', 150, 80],
                   ['Appliances', 120, 120], ['Automotive', 150, 80],
                   ['Sports', 120, 120]]">
@@ -128,9 +124,7 @@
                     </table>
                   </ng-template>
                 </td-chart-toolbox>
-                <td-chart-tooltip [trigger]="'item'"
-                                  [textStyle]="{ color: '#818181' }"
-                                  [backgroundColor]="'#ffffff'">
+                <td-chart-tooltip [trigger]="'item'">
                   <ng-template let-params let-ticket="ticket" tdTooltipFormatter>
                     <ng-container *ngIf="params">
                       <div layout="row" layout-align="start center">
@@ -156,13 +150,11 @@
                                   [splitLine]="{ lineStyle: { type: 'dotted' } }">
                 </td-chart-y-axis>
                 <td-chart-series td-bar
-                                [name]="'Today'"
-                                [color]="'#F2724B'">
+                                [name]="'Today'">
                 </td-chart-series>
                 <td-chart-series td-bar
                                 [name]="'Yesterday'"
-                                [markLine]="{ data: [{ name: 'Average', value: 30, xAxis: 1, yAxis: 30 }] }"
-                                [color]="'#3A4950'">
+                                [markLine]="{ data: [{ name: 'Average', value: 30, xAxis: 1, yAxis: 30 }] }">
                 </td-chart-series>
               </td-chart>
             ]]>
diff --git a/src/app/components/types/bar/bar.component.ts b/src/app/components/types/bar/bar.component.ts
index 9c212ce..6f4831c 100644
--- a/src/app/components/types/bar/bar.component.ts
+++ b/src/app/components/types/bar/bar.component.ts
@@ -1,4 +1,5 @@
 import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { ChartThemeSelectorService } from '../../../utilities/theme';
 
 @Component({
   selector: 'types-bar',
@@ -90,4 +91,8 @@ export class TypesBarComponent {
       showContent: true,
     },
   };
+
+  constructor(
+    public themeSelector: ChartThemeSelectorService,
+  ) {}
 }
diff --git a/src/app/components/types/combination/combination.component.html b/src/app/components/types/combination/combination.component.html
index e462835..944fada 100644
--- a/src/app/components/types/combination/combination.component.html
+++ b/src/app/components/types/combination/combination.component.html
@@ -1,12 +1,13 @@
 <mat-card flex>
   <mat-card-title>Combination Line + Bar</mat-card-title>
-  <mat-card-subtitle>Individual component configurations, series, tooltip, x & y axis, series tooltip</mat-card-subtitle>
+  <mat-card-subtitle>Individual component configurations, series, tooltip, x & y axis, series tooltip and theme</mat-card-subtitle>
   <mat-divider></mat-divider>
   <mat-card-content>
     <mat-tab-group mat-stretch-tabs dynamicHeight>
       <mat-tab>
         <ng-template matTabLabel>Demo</ng-template>
         <td-chart [style.height.px]="300"
+                  [themeName]="themeSelector.selected$ | async"
                   [config]="{tooltip: {show: true}}">
           <td-chart-x-axis [show]="true"
                             [data]="[
@@ -25,13 +26,11 @@
           </td-chart-y-axis>
           <td-chart-series td-bar
                             [data]="[150, 130, 150, 120, 150, 120]"
-                            [name]="'Yesterday'"
-                            [color]="'#F2724B'">
+                            [name]="'Yesterday'">
           </td-chart-series>
           <td-chart-series td-line
                             [data]="[80, 122, 80, 120, 80, 120]"
-                            [name]="'Today'"
-                            [color]="'#3A4950'">
+                            [name]="'Today'">
           </td-chart-series>
         </td-chart>
       </mat-tab>
@@ -41,6 +40,7 @@
         <td-highlight lang="html">
           <![CDATA[
             <td-chart [style.height.px]="300"
+                      [themeName]="'aqua-splash'"
                       [config]="{tooltip: {show: true}}">
               <td-chart-x-axis [show]="true"
                                 [data]="[
@@ -71,13 +71,11 @@
               </td-chart-y-axis>
               <td-chart-series td-bar
                                 [data]="[150, 130, 150, 120, 150, 120]"
-                                [name]="'Yesterday'"
-                                [color]="'#F2724B'">
+                                [name]="'Yesterday'">
               </td-chart-series>
               <td-chart-series td-line
                                 [data]="[80, 122, 80, 120, 80, 120]"
-                                [name]="'Today'"
-                                [color]="'#3A4950'">
+                                [name]="'Today'">
               </td-chart-series>
             </td-chart>
           ]]>
diff --git a/src/app/components/types/combination/combination.component.ts b/src/app/components/types/combination/combination.component.ts
index f2e39a1..be4172c 100644
--- a/src/app/components/types/combination/combination.component.ts
+++ b/src/app/components/types/combination/combination.component.ts
@@ -1,4 +1,5 @@
 import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { ChartThemeSelectorService } from '../../../utilities/theme';
 
 @Component({
   selector: 'types-combination',
@@ -62,4 +63,7 @@ export class TypesCombinationComponent {
     },
   };
 
+  constructor(
+    public themeSelector: ChartThemeSelectorService,
+  ) {}
 }
diff --git a/src/app/components/types/graph/graph.component.html b/src/app/components/types/graph/graph.component.html
index c20fc2f..c5cf49a 100644
--- a/src/app/components/types/graph/graph.component.html
+++ b/src/app/components/types/graph/graph.component.html
@@ -1,12 +1,12 @@
 <mat-card flex>
   <mat-card-title>Graph</mat-card-title>
-  <mat-card-subtitle>Individual component configurations, series, tooltip, x & y axis, series tooltip</mat-card-subtitle>
+  <mat-card-subtitle>Individual component configurations, series, tooltip, x & y axis, series tooltip and theme</mat-card-subtitle>
   <mat-divider></mat-divider>
   <mat-card-content>
     <mat-tab-group mat-stretch-tabs dynamicHeight>
       <mat-tab>
         <ng-template matTabLabel>Demo</ng-template>
-        <td-chart [style.height.px]="500">
+        <td-chart [style.height.px]="500" [themeName]="themeSelector.selected$ | async">
           <td-chart-tooltip [trigger]="'item'">
             <ng-template let-params let-i="index" let-ticket="ticket" tdTooltipFormatter>
               <ng-container *ngIf="params">
@@ -32,23 +32,23 @@
           </td-chart-tooltip>
           <td-chart-series td-graph
                           [data]="[{ x: -739.36383, y: -404.26147, id: 'jquery', name: 'jquery',
-                            symbolSize: 40.7252817, itemStyle: { normal: { color: '#4f19c7' } } },
+                            symbolSize: 40.7252817 },
                           { x: -134.2215, y: -862.7517, id: 'backbone', name: 'backbone',
-                            symbolSize: 60.1554675, itemStyle: { normal: { color: '#c71969' } } },
+                            symbolSize: 60.1554675 },
                           { x: -818.97516, y: 624.50604, id: 'angular', name: 'angular',
-                            symbolSize: 60.7816025, itemStyle: { normal: { color: '#c71969' } } },
+                            symbolSize: 60.7816025 },
                           { x: -710.59204, y: 120.37976, id: 'socket.io', name: 'socket.io',
-                            symbolSize: 19.818306, itemStyle: { normal: { color: '#c71919' } } },
+                            symbolSize: 19.818306 },
                           { x: -127.03764, y: 477.03778, id: 'underscore', name: 'underscore',
-                            symbolSize: 40.0429485, itemStyle: { normal: { color: '#c76919' } } },
+                            symbolSize: 40.0429485 },
                           { x: -338.03128, y: -404.62427, id: 'vue.js', name: 'vue.js',
-                            symbolSize: 80.163814, itemStyle: { normal: { color: '#8419c7' } } },
+                            symbolSize: 80.163814 },
                           { x: 118.30771, y: -380.16626, id: 'lodash', name: 'lodash',
-                            symbolSize: 18.935852, itemStyle: { normal: { color: '#c76919' } } },
+                            symbolSize: 18.935852 },
                           { x: 381.10724, y: -531.28235, id: 'dateformat', name: 'dateformat',
-                            symbolSize: 30.3863845, itemStyle: { normal: { color: '#c71969' } } },
+                            symbolSize: 30.3863845 },
                           { x: -644.2716, y: -230.14833, id: 'express', name: 'express',
-                            symbolSize: 49.608772, itemStyle: { normal: { color: '#c71919' } } }]"
+                            symbolSize: 49.608772 }]"
                           [edges]="[{ source: 'jquery', target: 'backbone' },
                                     { source: 'jquery', target: 'vue.js' },
                                     { source: 'jquery', target: 'lodash' },
@@ -72,7 +72,7 @@
         <p>HTML: </p>
         <td-highlight lang="html">
           <![CDATA[
-          <td-chart [style.height.px]="500">
+          <td-chart [style.height.px]="500" [themeName]="'aqua-splash'">
             <td-chart-tooltip [trigger]="'item'">
               <ng-template let-params let-i="index" let-ticket="ticket" tdTooltipFormatter>
                 <ng-container *ngIf="params">
@@ -98,23 +98,23 @@
             </td-chart-tooltip>
             <td-chart-series td-graph
                             [data]="[{ x: -739.36383, y: -404.26147, id: 'jquery', name: 'jquery',
-                              symbolSize: 40.7252817, itemStyle: { normal: { color: '#4f19c7' } } },
+                              symbolSize: 40.7252817 },
                             { x: -134.2215, y: -862.7517, id: 'backbone', name: 'backbone',
-                              symbolSize: 60.1554675, itemStyle: { normal: { color: '#c71969' } } },
+                              symbolSize: 60.1554675 },
                             { x: -818.97516, y: 624.50604, id: 'angular', name: 'angular',
-                              symbolSize: 60.7816025, itemStyle: { normal: { color: '#c71969' } } },
+                              symbolSize: 60.7816025 },
                             { x: -710.59204, y: 120.37976, id: 'socket.io', name: 'socket.io',
-                              symbolSize: 19.818306, itemStyle: { normal: { color: '#c71919' } } },
+                              symbolSize: 19.818306 },
                             { x: -127.03764, y: 477.03778, id: 'underscore', name: 'underscore',
-                              symbolSize: 40.0429485, itemStyle: { normal: { color: '#c76919' } } },
+                              symbolSize: 40.0429485 },
                             { x: -338.03128, y: -404.62427, id: 'vue.js', name: 'vue.js',
-                              symbolSize: 80.163814, itemStyle: { normal: { color: '#8419c7' } } },
+                              symbolSize: 80.163814 },
                             { x: 118.30771, y: -380.16626, id: 'lodash', name: 'lodash',
-                              symbolSize: 18.935852, itemStyle: { normal: { color: '#c76919' } } },
+                              symbolSize: 18.935852 },
                             { x: 381.10724, y: -531.28235, id: 'dateformat', name: 'dateformat',
-                              symbolSize: 30.3863845, itemStyle: { normal: { color: '#c71969' } } },
+                              symbolSize: 30.3863845 },
                             { x: -644.2716, y: -230.14833, id: 'express', name: 'express',
-                              symbolSize: 49.608772, itemStyle: { normal: { color: '#c71919' } } }]"
+                              symbolSize: 49.608772 }]"
                             [edges]="[{ source: 'jquery', target: 'backbone' },
                                       { source: 'jquery', target: 'vue.js' },
                                       { source: 'jquery', target: 'lodash' },
diff --git a/src/app/components/types/graph/graph.component.ts b/src/app/components/types/graph/graph.component.ts
index d1e863e..9e20828 100644
--- a/src/app/components/types/graph/graph.component.ts
+++ b/src/app/components/types/graph/graph.component.ts
@@ -1,4 +1,5 @@
 import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { ChartThemeSelectorService } from '../../../utilities/theme';
 
 @Component({
   selector: 'types-graph',
@@ -68,4 +69,8 @@ export class TypesGraphComponent {
       },
     ],
   };
+
+  constructor(
+    public themeSelector: ChartThemeSelectorService,
+  ) {}
 }
diff --git a/src/app/components/types/line/line.component.html b/src/app/components/types/line/line.component.html
index 9828f57..a2eb41f 100644
--- a/src/app/components/types/line/line.component.html
+++ b/src/app/components/types/line/line.component.html
@@ -1,12 +1,12 @@
 <mat-card flex>
   <mat-card-title>Line</mat-card-title>
-  <mat-card-subtitle>Individual component configurations, series, tooltip, x & y axis, series tooltip</mat-card-subtitle>
+  <mat-card-subtitle>Individual component configurations, series, tooltip, x & y axis, series tooltip and theme</mat-card-subtitle>
   <mat-divider></mat-divider>
   <mat-card-content>
     <mat-tab-group mat-stretch-tabs dynamicHeight>
       <mat-tab>
         <ng-template matTabLabel>Demo</ng-template>
-        <td-chart [style.height.px]="300">
+        <td-chart [style.height.px]="300" [themeName]="themeSelector.selected$ | async">
           <td-chart-tooltip [trigger]="'item'">
           </td-chart-tooltip>
           <td-chart-x-axis [show]="true"
@@ -40,8 +40,7 @@
                               ]
                             }]"
                             [name]="'Revenue'"
-                            [symbol]="'roundRect'"
-                            [color]="'#F2724B'">
+                            [symbol]="'roundRect'">
             <td-chart-series-tooltip>
               <ng-template let-params let-ticket="ticket" tdTooltipFormatter>
                 <ng-container *ngIf="params">
@@ -82,8 +81,7 @@
                               ]
                             }]"
                             [name]="'Sales'"
-                            [symbol]="'roundRect'"
-                            [color]="'#3A4950'">
+                            [symbol]="'roundRect'">
             <td-chart-series-tooltip>
               <ng-template let-params let-ticket="ticket" tdTooltipFormatter>
                 <ng-container *ngIf="params">
@@ -109,7 +107,7 @@
         <p>HTML: </p>
         <td-highlight lang="html">
           <![CDATA[
-            <td-chart [style.height.px]="300">
+            <td-chart [style.height.px]="300" [themeName]="'aqua-splash'">
               <td-chart-tooltip [trigger]="'item'">
               </td-chart-tooltip>
               <td-chart-x-axis [show]="true"
@@ -143,8 +141,7 @@
                                   ]
                                 }]"
                                 [name]="'Revenue'"
-                                [symbol]="'roundRect'"
-                                [color]="'#F2724B'">
+                                [symbol]="'roundRect'">
                 <td-chart-series-tooltip>
                   <ng-template let-params let-ticket="ticket" tdTooltipFormatter>
                     <ng-container *ngIf="params">
@@ -185,8 +182,7 @@
                                   ]
                                 }]"
                                 [name]="'Sales'"
-                                [symbol]="'roundRect'"
-                                [color]="'#3A4950'">
+                                [symbol]="'roundRect'">
                 <td-chart-series-tooltip>
                   <ng-template let-params let-ticket="ticket" tdTooltipFormatter>
                     <ng-container *ngIf="params">
diff --git a/src/app/components/types/line/line.component.ts b/src/app/components/types/line/line.component.ts
index 0f81ef4..95e7172 100644
--- a/src/app/components/types/line/line.component.ts
+++ b/src/app/components/types/line/line.component.ts
@@ -1,4 +1,5 @@
 import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { ChartThemeSelectorService } from '../../../utilities/theme';
 
 @Component({
   selector: 'types-line',
@@ -78,4 +79,8 @@ export class TypesLineComponent {
       showContent: true,
     },
   };
+
+  constructor(
+    public themeSelector: ChartThemeSelectorService,
+  ) {}
 }
diff --git a/src/app/components/types/sankey/sankey.component.html b/src/app/components/types/sankey/sankey.component.html
index 4065dd8..18a0ee8 100644
--- a/src/app/components/types/sankey/sankey.component.html
+++ b/src/app/components/types/sankey/sankey.component.html
@@ -1,12 +1,12 @@
 <mat-card flex>
   <mat-card-title>Sankey</mat-card-title>
-  <mat-card-subtitle>Individual component configurations, series, tooltip, x & y axis, series tooltip</mat-card-subtitle>
+  <mat-card-subtitle>Individual component configurations, series, tooltip, x & y axis, series tooltip and theme</mat-card-subtitle>
   <mat-divider></mat-divider>
   <mat-card-content>
     <mat-tab-group mat-stretch-tabs dynamicHeight>
       <mat-tab>
         <ng-template matTabLabel>Demo</ng-template>
-        <td-chart [style.height.px]="300">
+        <td-chart [style.height.px]="300" [themeName]="themeSelector.selected$ | async">
           <td-chart-series td-sankey
                             [focusNodeAdjacency]="'allEdges'"
                             [right]="40"
@@ -73,7 +73,7 @@
         <p>HTML: </p>
         <td-highlight lang="html">
           <![CDATA[
-            <td-chart [style.height.px]="300">
+            <td-chart [style.height.px]="300" [themeName]="'aqua-splash'">
               <td-chart-series td-sankey
                                 [focusNodeAdjacency]="'allEdges'"
                                 [right]="40"
diff --git a/src/app/components/types/sankey/sankey.component.ts b/src/app/components/types/sankey/sankey.component.ts
index 618aa1d..f2a0f50 100644
--- a/src/app/components/types/sankey/sankey.component.ts
+++ b/src/app/components/types/sankey/sankey.component.ts
@@ -1,4 +1,5 @@
 import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { ChartThemeSelectorService } from '../../../utilities/theme';
 
 @Component({
   selector: 'types-sankey',
@@ -53,4 +54,8 @@ export class TypesSankeyComponent {
       },
     ],
   };
+
+  constructor(
+    public themeSelector: ChartThemeSelectorService,
+  ) {}
 }
diff --git a/src/app/components/types/scatter/scatter.component.html b/src/app/components/types/scatter/scatter.component.html
index ce0747f..f124d2e 100644
--- a/src/app/components/types/scatter/scatter.component.html
+++ b/src/app/components/types/scatter/scatter.component.html
@@ -1,14 +1,14 @@
 <mat-card>
   <mat-card-title-group>
     <mat-card-title>Scatter (atomic)</mat-card-title>
-    <mat-card-subtitle>Individual component configurations, series, tooltip, x & y axis, series tooltip</mat-card-subtitle>
+    <mat-card-subtitle>Individual component configurations, series, tooltip, x & y axis, series tooltip and theme</mat-card-subtitle>
   </mat-card-title-group>
   <mat-divider></mat-divider>
   <mat-card-content>
     <mat-tab-group mat-stretch-tabs dynamicHeight>
       <mat-tab>
         <ng-template matTabLabel>Demo</ng-template>
-        <td-chart [style.height.px]="300">
+        <td-chart [style.height.px]="300" [themeName]="themeSelector.selected$ | async">
           <td-chart-tooltip [trigger]="'item'">
             <ng-template let-params let-i="index" let-ticket="ticket" tdTooltipFormatter>
               <ng-container *ngIf="params">
@@ -52,8 +52,7 @@
                               [37062, 75.4, 252847810, 'United States', 1990]
                             ]"
                             [name]="'1990'"
-                            [symbolSize]="symbolSize"
-                            [color]="'#F2724B'">
+                            [symbolSize]="symbolSize">
           </td-chart-series>
           <td-chart-series td-scatter
                             [data]="[
@@ -78,8 +77,7 @@
                               [53354, 79.1, 321773631, 'United States', 2015]
                             ]"
                             [name]="'2015'"
-                            [symbolSize]="symbolSize"
-                            [color]="'#3A4950'">
+                            [symbolSize]="symbolSize">
           </td-chart-series>
         </td-chart>
       </mat-tab>
@@ -88,7 +86,7 @@
         <p>HTML: </p>
         <td-highlight lang="html">
           <![CDATA[
-            <td-chart [style.height.px]="300">
+            <td-chart [style.height.px]="300" [themeName]="'aqua-splash'">
               <td-chart-tooltip [trigger]="'item'">
                 <ng-template let-params let-i="index" let-ticket="ticket" tdTooltipFormatter>
                   <ng-container *ngIf="params">
@@ -132,8 +130,7 @@
                                   [37062, 75.4, 252847810, 'United States', 1990]
                                 ]"
                                 [name]="'1990'"
-                                [symbolSize]="symbolSize"
-                                [color]="'#F2724B'">
+                                [symbolSize]="symbolSize">
               </td-chart-series>
               <td-chart-series td-scatter
                                 [data]="[
@@ -158,8 +155,7 @@
                                   [53354, 79.1, 321773631, 'United States', 2015]
                                 ]"
                                 [name]="'2015'"
-                                [symbolSize]="symbolSize"
-                                [color]="'#3A4950'">
+                                [symbolSize]="symbolSize">
               </td-chart-series>
             </td-chart>
           ]]>
diff --git a/src/app/components/types/scatter/scatter.component.ts b/src/app/components/types/scatter/scatter.component.ts
index 23a60f4..f70faca 100644
--- a/src/app/components/types/scatter/scatter.component.ts
+++ b/src/app/components/types/scatter/scatter.component.ts
@@ -1,4 +1,5 @@
 import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { ChartThemeSelectorService } from '../../../utilities/theme';
 
 @Component({
   selector: 'types-scatter',
@@ -101,6 +102,10 @@ export class TypesScatterComponent {
     ],
   };
 
+  constructor(
+    public themeSelector: ChartThemeSelectorService,
+  ) {}
+
   symbolSize(data: number[]): number {
     return Math.sqrt(data[2]) / 5e2;
   }
diff --git a/src/app/components/types/tree/tree.component.html b/src/app/components/types/tree/tree.component.html
index 2d5a4d6..b8f740b 100644
--- a/src/app/components/types/tree/tree.component.html
+++ b/src/app/components/types/tree/tree.component.html
@@ -1,12 +1,12 @@
 <mat-card flex>
   <mat-card-title>Tree</mat-card-title>
-  <mat-card-subtitle>Individual component configurations, series, tooltip</mat-card-subtitle>
+  <mat-card-subtitle>Individual component configurations, series, tooltip and theme</mat-card-subtitle>
   <mat-divider></mat-divider>
   <mat-card-content>
     <mat-tab-group mat-stretch-tabs dynamicHeight>
       <mat-tab>
         <ng-template matTabLabel>Demo</ng-template>
-        <td-chart [style.height.px]="800">
+        <td-chart [style.height.px]="800" [themeName]="themeSelector.selected$ | async">
           <td-chart-tooltip [trigger]="'item'">
             <ng-template let-params let-ticket="ticket" tdTooltipFormatter>
               <ng-container *ngIf="params">
@@ -307,9 +307,8 @@
                           { name: 'Visualization', value: 16540 } ] } ] }]"
                           [initialTreeDepth]="2"
                           [symbolSize]="10"
-                          [itemStyle]="{ borderColor: '#3A4950', color: '#3A4950' }"
-                          [leaves]="{ label: { padding: [2.5, 5], fontSize: 9, distance: 5, position: 'right', backgroundColor: 'transparent', color: '#616d73' } }"
-                          [label]="{ backgroundColor: '#3A4950', color: 'white', padding: [2.5, 5], borderRadius: 10, fontSize: 9, distance: 5, position: 'left' }">
+                          [leaves]="{ label: { padding: [2.5, 5], fontSize: 9, distance: 5, position: 'right' } }"
+                          [label]="{ padding: [2.5, 5], borderRadius: 10, fontSize: 9, distance: 5, position: 'left' }">
             </td-chart-series>
           </td-chart>
       </mat-tab>
@@ -318,7 +317,7 @@
         <p>HTML: </p>
         <td-highlight lang="html">
           <![CDATA[
-          <td-chart [style.height.px]="800">
+          <td-chart [style.height.px]="800" [themeName]="'aqua-splash'">
             <td-chart-tooltip [trigger]="'item'">
               <ng-template let-params let-ticket="ticket" tdTooltipFormatter>
                 <ng-container *ngIf="params">
@@ -619,9 +618,8 @@
                             { name: 'Visualization', value: 16540 } ] } ] }]"
                             [initialTreeDepth]="2"
                             [symbolSize]="10"
-                            [itemStyle]="{ borderColor: '#3A4950', color: '#3A4950' }"
-                            [leaves]="{ label: { padding: [2.5, 5], fontSize: 9, distance: 5, position: 'right', backgroundColor: 'transparent', color: '#616d73' } }"
-                            [label]="{ backgroundColor: '#3A4950', color: 'white', padding: [2.5, 5], borderRadius: 10, fontSize: 9, distance: 5, position: 'left' }">
+                            [leaves]="{ label: { padding: [2.5, 5], fontSize: 9, distance: 5, position: 'right'} }"
+                            [label]="{ padding: [2.5, 5], borderRadius: 10, fontSize: 9, distance: 5, position: 'left' }">
               </td-chart-series>
             </td-chart>
           ]]>
diff --git a/src/app/components/types/tree/tree.component.ts b/src/app/components/types/tree/tree.component.ts
index e8ec285..95ee40f 100644
--- a/src/app/components/types/tree/tree.component.ts
+++ b/src/app/components/types/tree/tree.component.ts
@@ -1,6 +1,6 @@
 import { Component, ChangeDetectionStrategy } from '@angular/core';
 import * as echarts from 'echarts/lib/echarts';
-import zrUtil from 'echarts/lib/echarts';
+import { ChartThemeSelectorService } from '../../../utilities/theme';
 
 @Component({
   selector: 'types-tree',
@@ -430,7 +430,9 @@ export class TypesTreeComponent {
     ],
   };
 
-  constructor() {
+  constructor(
+    public themeSelector: ChartThemeSelectorService,
+  ) {
     echarts.util.each(this.data[0].children, (datum: any, index: number) => {
       return index % 2 === 0 && (datum.collapsed = true);
     });
diff --git a/src/app/components/types/treemap/treemap.component.html b/src/app/components/types/treemap/treemap.component.html
index c464360..592e164 100644
--- a/src/app/components/types/treemap/treemap.component.html
+++ b/src/app/components/types/treemap/treemap.component.html
@@ -1,12 +1,12 @@
 <mat-card flex>
   <mat-card-title>Treemap</mat-card-title>
-  <mat-card-subtitle>Individual component configurations, series, tooltip</mat-card-subtitle>
+  <mat-card-subtitle>Individual component configurations, series, tooltip and theme</mat-card-subtitle>
   <mat-divider></mat-divider>
   <mat-card-content>
     <mat-tab-group mat-stretch-tabs dynamicHeight>
       <mat-tab>
         <ng-template matTabLabel>Demo</ng-template>
-        <td-chart [style.height.px]="600">
+        <td-chart [style.height.px]="600" [themeName]="themeSelector.selected$ | async">
           <td-chart-tooltip [trigger]="'item'">
             <ng-template let-params let-ticket="ticket" tdTooltipFormatter>
               <ng-container *ngIf="params">
@@ -144,11 +144,6 @@
                             show: true,
                             formatter: '{b}'
                           }"
-                          [itemStyle]="{
-                            normal: {
-                              borderColor: '#fff'
-                            }
-                          }"
                           [leafDepth]="2"
                           [levels]="[{itemStyle: {normal: {borderWidth: 0, gapWidth: 5 }}},{itemStyle: {normal: {gapWidth: 1}}},{colorSaturation: [0.35, 0.5], itemStyle: {normal: {gapWidth: 1, borderColorSaturation: 0.6}}}]">
           </td-chart-series>
@@ -159,7 +154,7 @@
         <p>HTML: </p>
         <td-highlight lang="html">
           <![CDATA[
-          <td-chart [style.height.px]="600">
+          <td-chart [style.height.px]="600" [themeName]="'aqua-splash'">
             <td-chart-tooltip [trigger]="'item'">
               <ng-template let-params let-ticket="ticket" tdTooltipFormatter>
                 <ng-container *ngIf="params">
@@ -297,11 +292,6 @@
                               show: true,
                               formatter: '{b}'
                             }"
-                            [itemStyle]="{
-                              normal: {
-                                borderColor: '#fff'
-                              }
-                            }"
                             [leafDepth]="2"
                             [levels]="[{itemStyle: {normal: {borderWidth: 0, gapWidth: 5 }}},{itemStyle: {normal: {gapWidth: 1}}},{colorSaturation: [0.35, 0.5], itemStyle: {normal: {gapWidth: 1, borderColorSaturation: 0.6}}}]">
             </td-chart-series>
diff --git a/src/app/components/types/treemap/treemap.component.ts b/src/app/components/types/treemap/treemap.component.ts
index 1d61765..6b0629f 100644
--- a/src/app/components/types/treemap/treemap.component.ts
+++ b/src/app/components/types/treemap/treemap.component.ts
@@ -1,4 +1,5 @@
 import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { ChartThemeSelectorService } from '../../../utilities/theme';
 
 @Component({
   selector: 'types-treemap',
@@ -192,4 +193,8 @@ export class TypesTreemapComponent {
       },
     ],
   };
+
+  constructor(
+    public themeSelector: ChartThemeSelectorService,
+  ) {}
 }
diff --git a/src/app/toolbar/toolbar.component.html b/src/app/toolbar/toolbar.component.html
index c87a150..926e918 100644
--- a/src/app/toolbar/toolbar.component.html
+++ b/src/app/toolbar/toolbar.component.html
@@ -3,27 +3,37 @@
   TERADATA CORPORATION CONFIDENTIAL AND TRADE SECRET
 -->
 <div td-toolbar-content layout="row" layout-align="end center" flex>
+  <div hide-xs class="mat-subheading-2 pad-left pad-right push-bottom-none">
+    Chart Theme:
+  </div>
+  <mat-form-field floatLabel="never">
+    <mat-select [(value)]="selectedTheme" (valueChange)="selectChartTheme($event)">
+      <mat-option *ngFor="let theme of themes;" [value]="theme">
+        {{theme}}
+      </mat-option>
+    </mat-select>
+  </mat-form-field>
   <a hide-xs hide-sm href="https://teradata.github.io/covalent" target="_blank" class="text-upper" mat-button>
     <mat-icon svgIcon="assets:covalent_mark" class="push-right-sm"></mat-icon> Covalent
   </a>
   <a hide-gt-sm hide-xs href="https://teradata.github.io/covalent" target="_blank" class="text-upper" mat-icon-button>
     <mat-icon svgIcon="assets:covalent_mark" class="push-right-sm"></mat-icon>
-</a>
+  </a>
   <button hide-xs mat-icon-button [matMenuTriggerFor]="settingsMenu">
-      <mat-icon>more_vert</mat-icon>
+    <mat-icon>more_vert</mat-icon>
+  </button>
+  <mat-menu #settingsMenu="matMenu">
+    <button mat-menu-item (click)="dir = (dir === 'rtl' ? 'ltr' : 'rtl'); changeDir(dir)" title="Toggle between RTL and LTR">
+      <mat-icon>swap_horiz</mat-icon>
+      <span>{{dir.toUpperCase()}}</span>
+    </button>
+    <button mat-menu-item *ngIf="activeTheme === 'theme-dark'" (click)="theme('default-theme')">
+      <mat-icon>brightness_high</mat-icon>
+      <span>Light Mode</span>
+    </button>
+    <button mat-menu-item *ngIf="activeTheme !== 'theme-dark'" (click)="theme('theme-dark')">
+      <mat-icon>brightness_low</mat-icon>
+      <span>Dark Mode</span>
     </button>
-    <mat-menu #settingsMenu="matMenu">
-      <button mat-menu-item (click)="dir = (dir === 'rtl' ? 'ltr' : 'rtl'); changeDir(dir)" title="Toggle between RTL and LTR">
-        <mat-icon>swap_horiz</mat-icon>
-        <span>{{dir.toUpperCase()}}</span>
-      </button>
-      <button mat-menu-item *ngIf="activeTheme === 'theme-dark'" (click)="theme('default-theme')">
-        <mat-icon>brightness_high</mat-icon>
-        <span>Light Mode</span>
-      </button>
-      <button mat-menu-item *ngIf="activeTheme !== 'theme-dark'" (click)="theme('theme-dark')">
-        <mat-icon>brightness_low</mat-icon>
-        <span>Dark Mode</span>
-      </button>
-    </mat-menu>
+  </mat-menu>
 </div>
diff --git a/src/app/toolbar/toolbar.component.ts b/src/app/toolbar/toolbar.component.ts
index fc1b35c..de7e308 100644
--- a/src/app/toolbar/toolbar.component.ts
+++ b/src/app/toolbar/toolbar.component.ts
@@ -4,6 +4,9 @@ import { DOCUMENT } from '@angular/platform-browser';
 import { Dir } from '@angular/cdk/bidi';
 
 import { getDirection, setDirection } from '../utilities/direction';
+import { ChartThemeSelectorService } from '../utilities/theme';
+
+import { getThemes } from '@covalent/echarts/base';
 
 @Component({
   selector: 'td-toolbar',
@@ -16,11 +19,16 @@ export class ToolbarComponent {
   updates: Object[] = [];
 
   dir: 'ltr' | 'rtl' = getDirection();
+
+  themes: string[] = getThemes();
+  selectedTheme: string = this.themes[0];
   
   constructor(private _renderer: Renderer2,
               private _dir: Dir,
+              private _chartThemeSelectorService: ChartThemeSelectorService,
               @Inject(DOCUMENT) private _document: any) {
     this._dir.dir = this.dir;
+    this._chartThemeSelectorService.select(this.selectedTheme);
   }
 
   changeDir(dir: 'ltr' | 'rtl'): void {
@@ -36,4 +44,9 @@ export class ToolbarComponent {
   theme(theme: string): void {
     localStorage.setItem('theme', theme);
   }
+
+  selectChartTheme(theme: string): void {
+    this._chartThemeSelectorService.select(theme);
+  }
+
 }
diff --git a/src/app/toolbar/toolbar.module.ts b/src/app/toolbar/toolbar.module.ts
index 3abc7f8..a402268 100644
--- a/src/app/toolbar/toolbar.module.ts
+++ b/src/app/toolbar/toolbar.module.ts
@@ -8,6 +8,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatListModule } from '@angular/material/list';
 import { MatIconModule } from '@angular/material/icon';
 import { MatMenuModule } from '@angular/material/menu';
+import { MatSelectModule } from '@angular/material/select';
 
 import { CovalentMenuModule, CovalentNotificationsModule } from '@covalent/core';
 
@@ -20,6 +21,7 @@ import { CovalentMenuModule, CovalentNotificationsModule } from '@covalent/core'
     MatMenuModule,
     CovalentMenuModule,
     CovalentNotificationsModule,
+    MatSelectModule,
     RouterModule,
   ],
   declarations: [
diff --git a/src/app/utilities/theme.ts b/src/app/utilities/theme.ts
new file mode 100644
index 0000000..bdbcf83
--- /dev/null
+++ b/src/app/utilities/theme.ts
@@ -0,0 +1,15 @@
+import { Injectable } from '@angular/core';
+import { Observable, BehaviorSubject } from 'rxjs';
+
+@Injectable({providedIn: 'root'})
+export class ChartThemeSelectorService {
+
+  selectedSubject: BehaviorSubject<string> = new BehaviorSubject<string>(undefined);
+
+  selected$: Observable<string> = this.selectedSubject.asObservable();
+
+  select(theme: string): void {
+    this.selectedSubject.next(theme);
+  }
+
+}
diff --git a/src/platform/echarts/base/axis/axis.component.ts b/src/platform/echarts/base/axis/axis.component.ts
index de6a26c..8015855 100644
--- a/src/platform/echarts/base/axis/axis.component.ts
+++ b/src/platform/echarts/base/axis/axis.component.ts
@@ -22,16 +22,6 @@ import {
 export abstract class TdChartAxisComponent implements OnChanges, OnInit, OnDestroy {
 
   private _state: any = {
-    axisLine: {
-      lineStyle: {
-        color: '#ABABAB',
-      },
-    },
-    splitLine: {
-      lineStyle: {
-        color: '#ABABAB',
-      },
-    },
   };
 
   @Input('config') config: any = {};
diff --git a/src/platform/echarts/base/base.module.ts b/src/platform/echarts/base/base.module.ts
index 9af5662..c6e4707 100644
--- a/src/platform/echarts/base/base.module.ts
+++ b/src/platform/echarts/base/base.module.ts
@@ -6,6 +6,8 @@ import { TdChartXAxisComponent } from './axis/x-axis.component';
 import { TdChartYAxisComponent } from './axis/y-axis.component';
 import { TdDatasetComponent } from './dataset/dataset.component';
 
+import { registerDefaultThemes } from './utils';
+
 export const BASE_MODULE_COMPONENTS: Type<any>[] = [
   TdChartComponent,
   TdChartXAxisComponent,
@@ -15,6 +17,8 @@ export const BASE_MODULE_COMPONENTS: Type<any>[] = [
 
 import 'zrender/lib/svg/svg';
 
+registerDefaultThemes();
+
 @NgModule({
   imports: [
     CommonModule,
diff --git a/src/platform/echarts/base/chart.component.ts b/src/platform/echarts/base/chart.component.ts
index c2a4925..9f3ba21 100644
--- a/src/platform/echarts/base/chart.component.ts
+++ b/src/platform/echarts/base/chart.component.ts
@@ -121,7 +121,6 @@ export class TdChartComponent implements AfterViewInit, OnChanges, OnDestroy {
           top: (this.config.toolbox && typeof this.config.toolbox.top === 'number') ||
                 (this._options.toolbox && typeof this._options.toolbox.top  === 'number') ? '40' : '10',
           containLabel: true,
-          borderColor: '#FCFCFC',
         },
       }, this._options, this.config ? this.config : {}), true);
       this._changeDetectorRef.markForCheck();
diff --git a/src/platform/echarts/base/themes/aqua-splash.ts b/src/platform/echarts/base/themes/aqua-splash.ts
new file mode 100644
index 0000000..e42764f
--- /dev/null
+++ b/src/platform/echarts/base/themes/aqua-splash.ts
@@ -0,0 +1,506 @@
+/* tslint:disable */
+export default {
+    "color": [
+        "#305b9e",
+        "#0076a9",
+        "#1d8daa",
+        "#51a2a8",
+        "#7fb5aa",
+        "#aac6b4",
+        "#CFD8C8",
+        "#ECEBE4"
+    ],
+    "backgroundColor": "transparent",
+    "textStyle": {},
+    "title": {
+        "textStyle": {
+            "color": "#aaaaaa"
+        },
+        "subtextStyle": {
+            "color": "#aaaaaa"
+        }
+    },
+    "tree": {
+      "itemStyle": {
+        "color": '#ECEBE4',
+        "borderColor": '#305b9e'
+      }
+    },
+    "line": {
+        "itemStyle": {
+            "normal": {
+                "borderWidth": "2"
+            }
+        },
+        "lineStyle": {
+            "normal": {
+                "width": "2"
+            }
+        },
+        "symbolSize": "6",
+        "symbol": "emptyCircle",
+        "smooth": true
+    },
+    "radar": {
+        "itemStyle": {
+            "normal": {
+                "borderWidth": "2"
+            }
+        },
+        "lineStyle": {
+            "normal": {
+                "width": "2"
+            }
+        },
+        "symbolSize": "6",
+        "symbol": "emptyCircle",
+        "smooth": true
+    },
+    "bar": {
+        "itemStyle": {
+            "normal": {
+                "barBorderWidth": 0,
+                "barBorderColor": "#ccc"
+            },
+            "emphasis": {
+                "barBorderWidth": 0,
+                "barBorderColor": "#ccc"
+            }
+        }
+    },
+    "pie": {
+        "itemStyle": {
+            "normal": {
+                "borderWidth": 0,
+                "borderColor": "#ccc"
+            },
+            "emphasis": {
+                "borderWidth": 0,
+                "borderColor": "#ccc"
+            }
+        }
+    },
+    "scatter": {
+        "itemStyle": {
+            "normal": {
+                "borderWidth": 0,
+                "borderColor": "#ccc"
+            },
+            "emphasis": {
+                "borderWidth": 0,
+                "borderColor": "#ccc"
+            }
+        }
+    },
+    "boxplot": {
+        "itemStyle": {
+            "normal": {
+                "borderWidth": 0,
+                "borderColor": "#ccc"
+            },
+            "emphasis": {
+                "borderWidth": 0,
+                "borderColor": "#ccc"
+            }
+        }
+    },
+    "parallel": {
+        "itemStyle": {
+            "normal": {
+                "borderWidth": 0,
+                "borderColor": "#ccc"
+            },
+            "emphasis": {
+                "borderWidth": 0,
+                "borderColor": "#ccc"
+            }
+        }
+    },
+    "sankey": {
+        "itemStyle": {
+            "normal": {
+                "borderWidth": 0,
+                "borderColor": "#ccc"
+            },
+            "emphasis": {
+                "borderWidth": 0,
+                "borderColor": "#ccc"
+            }
+        }
+    },
+    "funnel": {
+        "itemStyle": {
+            "normal": {
+                "borderWidth": 0,
+                "borderColor": "#ccc"
+            },
+            "emphasis": {
+                "borderWidth": 0,
+                "borderColor": "#ccc"
+            }
+        }
+    },
+    "gauge": {
+        "itemStyle": {
+            "normal": {
+                "borderWidth": 0,
+                "borderColor": "#ccc"
+            },
+            "emphasis": {
+                "borderWidth": 0,
+                "borderColor": "#ccc"
+            }
+        }
+    },
+    "candlestick": {
+        "itemStyle": {
+            "normal": {
+                "color": "#305b9e",
+                "color0": "transparent",
+                "borderColor": "#305b9e",
+                "borderColor0": "#1d8daa",
+                "borderWidth": "2"
+            }
+        }
+    },
+    "graph": {
+        "itemStyle": {
+            "normal": {
+                "borderWidth": 0,
+                "borderColor": "#ccc"
+            }
+        },
+        "lineStyle": {
+            "normal": {
+                "width": 1,
+                "color": "#aaaaaa"
+            }
+        },
+        "symbolSize": "6",
+        "symbol": "emptyCircle",
+        "smooth": true,
+        "color": [
+            "#305b9e",
+            "#0076a9",
+            "#1d8daa",
+            "#51a2a8",
+            "#7fb5aa",
+            "#aac6b4",
+            "#CFD8C8",
+            "#ECEBE4"
+        ],
+        "label": {
+            "normal": {
+                "textStyle": {
+                    "color": "#ffffff"
+                }
+            }
+        }
+    },
+    "map": {
+        "itemStyle": {
+            "normal": {
+                "areaColor": "#f3f3f3",
+                "borderColor": "#999999",
+                "borderWidth": 0.5
+            },
+            "emphasis": {
+                "areaColor": "rgba(254,198,77,1)",
+                "borderColor": "#ecaf2b",
+                "borderWidth": 1
+            }
+        },
+        "label": {
+            "normal": {
+                "textStyle": {
+                    "color": "#00475e"
+                }
+            },
+            "emphasis": {
+                "textStyle": {
+                    "color": "rgb(0,71,94)"
+                }
+            }
+        }
+    },
+    "geo": {
+        "itemStyle": {
+            "normal": {
+                "areaColor": "#f3f3f3",
+                "borderColor": "#999999",
+                "borderWidth": 0.5
+            },
+            "emphasis": {
+                "areaColor": "rgba(254,198,77,1)",
+                "borderColor": "#ecaf2b",
+                "borderWidth": 1
+            }
+        },
+        "label": {
+            "normal": {
+                "textStyle": {
+                    "color": "#00475e"
+                }
+            },
+            "emphasis": {
+                "textStyle": {
+                    "color": "rgb(0,71,94)"
+                }
+            }
+        }
+    },
+    "categoryAxis": {
+        "axisLine": {
+            "show": true,
+            "lineStyle": {
+                "color": "#aaaaaa"
+            }
+        },
+        "axisTick": {
+            "show": false,
+            "lineStyle": {
+                "color": "#333"
+            }
+        },
+        "axisLabel": {
+            "show": true,
+            "textStyle": {
+                "color": "#999999"
+            }
+        },
+        "splitLine": {
+            "show": true,
+            "lineStyle": {
+                "color": [
+                    "#e6e6e6"
+                ]
+            }
+        },
+        "splitArea": {
+            "show": false,
+            "areaStyle": {
+                "color": [
+                    "rgba(250,250,250,0.05)",
+                    "rgba(200,200,200,0.02)"
+                ]
+            }
+        }
+    },
+    "valueAxis": {
+        "axisLine": {
+            "show": true,
+            "lineStyle": {
+                "color": "#aaaaaa"
+            }
+        },
+        "axisTick": {
+            "show": false,
+            "lineStyle": {
+                "color": "#333"
+            }
+        },
+        "axisLabel": {
+            "show": true,
+            "textStyle": {
+                "color": "#999999"
+            }
+        },
+        "splitLine": {
+            "show": true,
+            "lineStyle": {
+                "color": [
+                    "#e6e6e6"
+                ]
+            }
+        },
+        "splitArea": {
+            "show": false,
+            "areaStyle": {
+                "color": [
+                    "rgba(250,250,250,0.05)",
+                    "rgba(200,200,200,0.02)"
+                ]
+            }
+        }
+    },
+    "logAxis": {
+        "axisLine": {
+            "show": true,
+            "lineStyle": {
+                "color": "#aaaaaa"
+            }
+        },
+        "axisTick": {
+            "show": false,
+            "lineStyle": {
+                "color": "#333"
+            }
+        },
+        "axisLabel": {
+            "show": true,
+            "textStyle": {
+                "color": "#999999"
+            }
+        },
+        "splitLine": {
+            "show": true,
+            "lineStyle": {
+                "color": [
+                    "#e6e6e6"
+                ]
+            }
+        },
+        "splitArea": {
+            "show": false,
+            "areaStyle": {
+                "color": [
+                    "rgba(250,250,250,0.05)",
+                    "rgba(200,200,200,0.02)"
+                ]
+            }
+        }
+    },
+    "timeAxis": {
+        "axisLine": {
+            "show": true,
+            "lineStyle": {
+                "color": "#aaaaaa"
+            }
+        },
+        "axisTick": {
+            "show": false,
+            "lineStyle": {
+                "color": "#333"
+            }
+        },
+        "axisLabel": {
+            "show": true,
+            "textStyle": {
+                "color": "#999999"
+            }
+        },
+        "splitLine": {
+            "show": true,
+            "lineStyle": {
+                "color": [
+                    "#e6e6e6"
+                ]
+            }
+        },
+        "splitArea": {
+            "show": false,
+            "areaStyle": {
+                "color": [
+                    "rgba(250,250,250,0.05)",
+                    "rgba(200,200,200,0.02)"
+                ]
+            }
+        }
+    },
+    "toolbox": {
+        "iconStyle": {
+            "normal": {
+                "borderColor": "#999999"
+            },
+            "emphasis": {
+                "borderColor": "#666666"
+            }
+        }
+    },
+    "legend": {
+        "textStyle": {
+            "color": "#000000"
+        }
+    },
+    "tooltip": {
+        "axisPointer": {
+            "lineStyle": {
+                "color": "#cccccc",
+                "width": 1
+            },
+            "crossStyle": {
+                "color": "#cccccc",
+                "width": 1
+            }
+        }
+    },
+    "timeline": {
+        "lineStyle": {
+            "color": "#666666",
+            "width": 1
+        },
+        "itemStyle": {
+            "normal": {
+                "color": "#666666",
+                "borderWidth": 1
+            },
+            "emphasis": {
+                "color": "#f7ac4f"
+            }
+        },
+        "controlStyle": {
+            "normal": {
+                "color": "#666666",
+                "borderColor": "#666666",
+                "borderWidth": 0.5
+            },
+            "emphasis": {
+                "color": "#666666",
+                "borderColor": "#666666",
+                "borderWidth": 0.5
+            }
+        },
+        "checkpointStyle": {
+            "color": "#f7ac4f",
+            "borderColor": "rgba(254,198,77,0.6)"
+        },
+        "label": {
+            "normal": {
+                "textStyle": {
+                    "color": "#666666"
+                }
+            },
+            "emphasis": {
+                "textStyle": {
+                    "color": "#666666"
+                }
+            }
+        }
+    },
+    "visualMap": {
+        "color": [
+            "#305b9e",
+            "#0076a9",
+            "#1d8daa",
+            "#51a2a8",
+            "#7fb5aa",
+            "#aac6b4",
+            "#CFD8C8",
+            "#ECEBE4"
+        ]
+    },
+    "dataZoom": {
+        "backgroundColor": "rgba(255,255,255,0)",
+        "dataBackgroundColor": "rgba(255,178,72,0.5)",
+        "fillerColor": "rgba(255,178,72,0.15)",
+        "handleColor": "#ffb248",
+        "handleSize": "100%",
+        "textStyle": {
+            "color": "#aaaaaa"
+        }
+    },
+    "markPoint": {
+        "label": {
+            "normal": {
+                "textStyle": {
+                    "color": "#ffffff"
+                }
+            },
+            "emphasis": {
+                "textStyle": {
+                    "color": "#ffffff"
+                }
+            }
+        }
+    }
+}
diff --git a/src/platform/echarts/base/themes/california-coast.ts b/src/platform/echarts/base/themes/california-coast.ts
new file mode 100644
index 0000000..c59c37b
--- /dev/null
+++ b/src/platform/echarts/base/themes/california-coast.ts
@@ -0,0 +1,500 @@
+/* tslint:disable */
+export default {
+    "color": [
+        "#0098c9",
+        "#6ab1d7",
+        "#a0cae4",
+        "#ffbb9c",
+        "#fd986d",
+        "#f3753f"
+    ],
+    "backgroundColor": "transparent",
+    "textStyle": {},
+    "title": {
+        "textStyle": {
+            "color": "#aaaaaa"
+        },
+        "subtextStyle": {
+            "color": "#aaaaaa"
+        }
+    },
+    "tree": {
+      "itemStyle": {
+        "color": '#ffbb9c',
+        "borderColor": '#0098c9'
+      }
+    },
+    "line": {
+        "itemStyle": {
+            "normal": {
+                "borderWidth": "2"
+            }
+        },
+        "lineStyle": {
+            "normal": {
+                "width": "2"
+            }
+        },
+        "symbolSize": "6",
+        "symbol": "emptyCircle",
+        "smooth": true
+    },
+    "radar": {
+        "itemStyle": {
+            "normal": {
+                "borderWidth": "2"
+            }
+        },
+        "lineStyle": {
+            "normal": {
+                "width": "2"
+            }
+        },
+        "symbolSize": "6",
+        "symbol": "emptyCircle",
+        "smooth": true
+    },
+    "bar": {
+        "itemStyle": {
+            "normal": {
+                "barBorderWidth": 0,
+                "barBorderColor": "#ccc"
+            },
+            "emphasis": {
+                "barBorderWidth": 0,
+                "barBorderColor": "#ccc"
+            }
+        }
+    },
+    "pie": {
+        "itemStyle": {
+            "normal": {
+                "borderWidth": 0,
+                "borderColor": "#ccc"
+            },
+            "emphasis": {
+                "borderWidth": 0,
+                "borderColor": "#ccc"
+            }
+        }
+    },
+    "scatter": {
+        "itemStyle": {
+            "normal": {
+                "borderWidth": 0,
+                "borderColor": "#ccc"
+            },
+            "emphasis": {
+                "borderWidth": 0,
+                "borderColor": "#ccc"
+            }
+        }
+    },
+    "boxplot": {
+        "itemStyle": {
+            "normal": {
+                "borderWidth": 0,
+                "borderColor": "#ccc"
+            },
+            "emphasis": {
+                "borderWidth": 0,
+                "borderColor": "#ccc"
+            }
+        }
+    },
+    "parallel": {
+        "itemStyle": {
+            "normal": {
+                "borderWidth": 0,
+                "borderColor": "#ccc"
+            },
+            "emphasis": {
+                "borderWidth": 0,
+                "borderColor": "#ccc"
+            }
+        }
+    },
+    "sankey": {
+        "itemStyle": {
+            "normal": {
+                "borderWidth": 0,
+                "borderColor": "#ccc"
+            },
+            "emphasis": {
+                "borderWidth": 0,
+                "borderColor": "#ccc"
+            }
+        }
+    },
+    "funnel": {
+        "itemStyle": {
+            "normal": {
+                "borderWidth": 0,
+                "borderColor": "#ccc"
+            },
+            "emphasis": {
+                "borderWidth": 0,
+                "borderColor": "#ccc"
+            }
+        }
+    },
+    "gauge": {
+        "itemStyle": {
+            "normal": {
+                "borderWidth": 0,
+                "borderColor": "#ccc"
+            },
+            "emphasis": {
+                "borderWidth": 0,
+                "borderColor": "#ccc"
+            }
+        }
+    },
+    "candlestick": {
+        "itemStyle": {
+            "normal": {
+                "color": "#f3753f",
+                "color0": "transparent",
+                "borderColor": "#f3753f",
+                "borderColor0": "#0098c9",
+                "borderWidth": "2"
+            }
+        }
+    },
+    "graph": {
+        "itemStyle": {
+            "normal": {
+                "borderWidth": 0,
+                "borderColor": "#ccc"
+            }
+        },
+        "lineStyle": {
+            "normal": {
+                "width": 1,
+                "color": "#aaaaaa"
+            }
+        },
+        "symbolSize": "6",
+        "symbol": "emptyCircle",
+        "smooth": true,
+        "color": [
+            "#0098c9",
+            "#6ab1d7",
+            "#a0cae4",
+            "#ffbb9c",
+            "#fd986d",
+            "#f3753f"
+        ],
+        "label": {
+            "normal": {
+                "textStyle": {
+                    "color": "#ffffff"
+                }
+            }
+        }
+    },
+    "map": {
+        "itemStyle": {
+            "normal": {
+                "areaColor": "#f3f3f3",
+                "borderColor": "#999999",
+                "borderWidth": 0.5
+            },
+            "emphasis": {
+                "areaColor": "rgba(254,198,77,1)",
+                "borderColor": "#ecaf2b",
+                "borderWidth": 1
+            }
+        },
+        "label": {
+            "normal": {
+                "textStyle": {
+                    "color": "#394851"
+                }
+            },
+            "emphasis": {
+                "textStyle": {
+                    "color": "rgb(57,72,81)"
+                }
+            }
+        }
+    },
+    "geo": {
+        "itemStyle": {
+            "normal": {
+                "areaColor": "#f3f3f3",
+                "borderColor": "#999999",
+                "borderWidth": 0.5
+            },
+            "emphasis": {
+                "areaColor": "rgba(254,198,77,1)",
+                "borderColor": "#ecaf2b",
+                "borderWidth": 1
+            }
+        },
+        "label": {
+            "normal": {
+                "textStyle": {
+                    "color": "#394851"
+                }
+            },
+            "emphasis": {
+                "textStyle": {
+                    "color": "rgb(57,72,81)"
+                }
+            }
+        }
+    },
+    "categoryAxis": {
+        "axisLine": {
+            "show": true,
+            "lineStyle": {
+                "color": "#aaaaaa"
+            }
+        },
+        "axisTick": {
+            "show": false,
+            "lineStyle": {
+                "color": "#333"
+            }
+        },
+        "axisLabel": {
+            "show": true,
+            "textStyle": {
+                "color": "#999999"
+            }
+        },
+        "splitLine": {
+            "show": true,
+            "lineStyle": {
+                "color": [
+                    "#e6e6e6"
+                ]
+            }
+        },
+        "splitArea": {
+            "show": false,
+            "areaStyle": {
+                "color": [
+                    "rgba(250,250,250,0.05)",
+                    "rgba(200,200,200,0.02)"
+                ]
+            }
+        }
+    },
+    "valueAxis": {
+        "axisLine": {
+            "show": true,
+            "lineStyle": {
+                "color": "#aaaaaa"
+            }
+        },
+        "axisTick": {
+            "show": false,
+            "lineStyle": {
+                "color": "#333"
+            }
+        },
+        "axisLabel": {
+            "show": true,
+            "textStyle": {
+                "color": "#999999"
+            }
+        },
+        "splitLine": {
+            "show": true,
+            "lineStyle": {
+                "color": [
+                    "#e6e6e6"
+                ]
+            }
+        },
+        "splitArea": {
+            "show": false,
+            "areaStyle": {
+                "color": [
+                    "rgba(250,250,250,0.05)",
+                    "rgba(200,200,200,0.02)"
+                ]
+            }
+        }
+    },
+    "logAxis": {
+        "axisLine": {
+            "show": true,
+            "lineStyle": {
+                "color": "#aaaaaa"
+            }
+        },
+        "axisTick": {
+            "show": false,
+            "lineStyle": {
+                "color": "#333"
+            }
+        },
+        "axisLabel": {
+            "show": true,
+            "textStyle": {
+                "color": "#999999"
+            }
+        },
+        "splitLine": {
+            "show": true,
+            "lineStyle": {
+                "color": [
+                    "#e6e6e6"
+                ]
+            }
+        },
+        "splitArea": {
+            "show": false,
+            "areaStyle": {
+                "color": [
+                    "rgba(250,250,250,0.05)",
+                    "rgba(200,200,200,0.02)"
+                ]
+            }
+        }
+    },
+    "timeAxis": {
+        "axisLine": {
+            "show": true,
+            "lineStyle": {
+                "color": "#aaaaaa"
+            }
+        },
+        "axisTick": {
+            "show": false,
+            "lineStyle": {
+                "color": "#333"
+            }
+        },
+        "axisLabel": {
+            "show": true,
+            "textStyle": {
+                "color": "#999999"
+            }
+        },
+        "splitLine": {
+            "show": true,
+            "lineStyle": {
+                "color": [
+                    "#e6e6e6"
+                ]
+            }
+        },
+        "splitArea": {
+            "show": false,
+            "areaStyle": {
+                "color": [
+                    "rgba(250,250,250,0.05)",
+                    "rgba(200,200,200,0.02)"
+                ]
+            }
+        }
+    },
+    "toolbox": {
+        "iconStyle": {
+            "normal": {
+                "borderColor": "#999999"
+            },
+            "emphasis": {
+                "borderColor": "#666666"
+            }
+        }
+    },
+    "legend": {
+        "textStyle": {
+            "color": "#aaaaaa"
+        }
+    },
+    "tooltip": {
+        "axisPointer": {
+            "lineStyle": {
+                "color": "#cccccc",
+                "width": 1
+            },
+            "crossStyle": {
+                "color": "#cccccc",
+                "width": 1
+            }
+        }
+    },
+    "timeline": {
+        "lineStyle": {
+            "color": "#666666",
+            "width": 1
+        },
+        "itemStyle": {
+            "normal": {
+                "color": "#666666",
+                "borderWidth": 1
+            },
+            "emphasis": {
+                "color": "#fec64d"
+            }
+        },
+        "controlStyle": {
+            "normal": {
+                "color": "#666666",
+                "borderColor": "#666666",
+                "borderWidth": 0.5
+            },
+            "emphasis": {
+                "color": "#666666",
+                "borderColor": "#666666",
+                "borderWidth": 0.5
+            }
+        },
+        "checkpointStyle": {
+            "color": "#f3753f",
+            "borderColor": "rgba(255,178,72,0.41)"
+        },
+        "label": {
+            "normal": {
+                "textStyle": {
+                    "color": "#666666"
+                }
+            },
+            "emphasis": {
+                "textStyle": {
+                    "color": "#666666"
+                }
+            }
+        }
+    },
+    "visualMap": {
+        "color": [
+            "#0098c9",
+            "#6ab1d7",
+            "#a0cae4",
+            "#FFBB9C",
+            "#FD986D",
+            "#F3753F"
+        ]
+    },
+    "dataZoom": {
+        "backgroundColor": "rgba(255,255,255,0)",
+        "dataBackgroundColor": "rgba(255,178,72,0.5)",
+        "fillerColor": "rgba(255,178,72,0.15)",
+        "handleColor": "#fec64d",
+        "handleSize": "100%",
+        "textStyle": {
+            "color": "#aaaaaa"
+        }
+    },
+    "markPoint": {
+        "label": {
+            "normal": {
+                "textStyle": {
+                    "color": "#ffffff"
+                }
+            },
+            "emphasis": {
+                "textStyle": {
+                    "color": "#ffffff"
+                }
+            }
+        }
+    }
+}
diff --git a/src/platform/echarts/base/themes/hawaiian-sunrise.ts b/src/platform/echarts/base/themes/hawaiian-sunrise.ts
new file mode 100644
index 0000000..3f4ed41
--- /dev/null
+++ b/src/platform/echarts/base/themes/hawaiian-sunrise.ts
@@ -0,0 +1,500 @@
+/* tslint:disable */
+export default {
+    "color": [
+        "#00b2b1",
+        "#69c6c4",
+        "#a0d9d7",
+        "#ffbb9c",
+        "#fd986d",
+        "#f3753f"
+    ],
+    "backgroundColor": "transparent",
+    "textStyle": {},
+    "title": {
+        "textStyle": {
+            "color": "#aaaaaa"
+        },
+        "subtextStyle": {
+            "color": "#aaaaaa"
+        }
+    },
+    "tree": {
+      "itemStyle": {
+        "color": '#a0d9d7',
+        "borderColor": '#00b2b1'
+      }
+    },
+    "line": {
+        "itemStyle": {
+            "normal": {
+                "borderWidth": "2"
+            }
+        },
+        "lineStyle": {
+            "normal": {
+                "width": "2"
+            }
+        },
+        "symbolSize": "6",
+        "symbol": "emptyCircle",
+        "smooth": true
+    },
+    "radar": {
+        "itemStyle": {
+            "normal": {
+                "borderWidth": "2"
+            }
+        },
+        "lineStyle": {
+            "normal": {
+                "width": "2"
+            }
+        },
+        "symbolSize": "6",
+        "symbol": "emptyCircle",
+        "smooth": true
+    },
+    "bar": {
+        "itemStyle": {
+            "normal": {
+                "barBorderWidth": 0,
+                "barBorderColor": "#ccc"
+            },
+            "emphasis": {
+                "barBorderWidth": 0,
+                "barBorderColor": "#ccc"
+            }
+        }
+    },
+    "pie": {
+        "itemStyle": {
+            "normal": {
+                "borderWidth": 0,
+                "borderColor": "#ccc"
+            },
+            "emphasis": {
+                "borderWidth": 0,
+                "borderColor": "#ccc"
+            }
+        }
+    },
+    "scatter": {
+        "itemStyle": {
+            "normal": {
+                "borderWidth": 0,
+                "borderColor": "#ccc"
+            },
+            "emphasis": {
+                "borderWidth": 0,
+                "borderColor": "#ccc"
+            }
+        }
+    },
+    "boxplot": {
+        "itemStyle": {
+            "normal": {
+                "borderWidth": 0,
+                "borderColor": "#ccc"
+            },
+            "emphasis": {
+                "borderWidth": 0,
+                "borderColor": "#ccc"
+            }
+        }
+    },
+    "parallel": {
+        "itemStyle": {
+            "normal": {
+                "borderWidth": 0,
+                "borderColor": "#ccc"
+            },
+            "emphasis": {
+                "borderWidth": 0,
+                "borderColor": "#ccc"
+            }
+        }
+    },
+    "sankey": {
+        "itemStyle": {
+            "normal": {
+                "borderWidth": 0,
+                "borderColor": "#ccc"
+            },
+            "emphasis": {
+                "borderWidth": 0,
+                "borderColor": "#ccc"
+            }
+        }
+    },
+    "funnel": {
+        "itemStyle": {
+            "normal": {
+                "borderWidth": 0,
+                "borderColor": "#ccc"
+            },
+            "emphasis": {
+                "borderWidth": 0,
+                "borderColor": "#ccc"
+            }
+        }
+    },
+    "gauge": {
+        "itemStyle": {
+            "normal": {
+                "borderWidth": 0,
+                "borderColor": "#ccc"
+            },
+            "emphasis": {
+                "borderWidth": 0,
+                "borderColor": "#ccc"
+            }
+        }
+    },
+    "candlestick": {
+        "itemStyle": {
+            "normal": {
+                "color": "#f3753f",
+                "color0": "transparent",
+                "borderColor": "#f3753f",
+                "borderColor0": "#00b2b1",
+                "borderWidth": "2"
+            }
+        }
+    },
+    "graph": {
+        "itemStyle": {
+            "normal": {
+                "borderWidth": 0,
+                "borderColor": "#ccc"
+            }
+        },
+        "lineStyle": {
+            "normal": {
+                "width": 1,
+                "color": "#aaaaaa"
+            }
+        },
+        "symbolSize": "6",
+        "symbol": "emptyCircle",
+        "smooth": true,
+        "color": [
+            "#00b2b1",
+            "#69c6c4",
+            "#a0d9d7",
+            "#ffbb9c",
+            "#fd986d",
+            "#f3753f"
+        ],
+        "label": {
+            "normal": {
+                "textStyle": {
+                    "color": "#ffffff"
+                }
+            }
+        }
+    },
+    "map": {
+        "itemStyle": {
+            "normal": {
+                "areaColor": "#f3f3f3",
+                "borderColor": "#999999",
+                "borderWidth": 0.5
+            },
+            "emphasis": {
+                "areaColor": "rgba(254,198,77,1)",
+                "borderColor": "#ecaf2b",
+                "borderWidth": 1
+            }
+        },
+        "label": {
+            "normal": {
+                "textStyle": {
+                    "color": "#007373"
+                }
+            },
+            "emphasis": {
+                "textStyle": {
+                    "color": "rgb(0,115,115)"
+                }
+            }
+        }
+    },
+    "geo": {
+        "itemStyle": {
+            "normal": {
+                "areaColor": "#f3f3f3",
+                "borderColor": "#999999",
+                "borderWidth": 0.5
+            },
+            "emphasis": {
+                "areaColor": "rgba(254,198,77,1)",
+                "borderColor": "#ecaf2b",
+                "borderWidth": 1
+            }
+        },
+        "label": {
+            "normal": {
+                "textStyle": {
+                    "color": "#007373"
+                }
+            },
+            "emphasis": {
+                "textStyle": {
+                    "color": "rgb(0,115,115)"
+                }
+            }
+        }
+    },
+    "categoryAxis": {
+        "axisLine": {
+            "show": true,
+            "lineStyle": {
+                "color": "#aaaaaa"
+            }
+        },
+        "axisTick": {
+            "show": false,
+            "lineStyle": {
+                "color": "#333"
+            }
+        },
+        "axisLabel": {
+            "show": true,
+            "textStyle": {
+                "color": "#999999"
+            }
+        },
+        "splitLine": {
+            "show": true,
+            "lineStyle": {
+                "color": [
+                    "#e6e6e6"
+                ]
+            }
+        },
+        "splitArea": {
+            "show": false,
+            "areaStyle": {
+                "color": [
+                    "rgba(250,250,250,0.05)",
+                    "rgba(200,200,200,0.02)"
+                ]
+            }
+        }
+    },
+    "valueAxis": {
+        "axisLine": {
+            "show": true,
+            "lineStyle": {
+                "color": "#aaaaaa"
+            }
+        },
+        "axisTick": {
+            "show": false,
+            "lineStyle": {
+                "color": "#333"
+            }
+        },
+        "axisLabel": {
+            "show": true,
+            "textStyle": {
+                "color": "#999999"
+            }
+        },
+        "splitLine": {
+            "show": true,
+            "lineStyle": {
+                "color": [
+                    "#e6e6e6"
+                ]
+            }
+        },
+        "splitArea": {
+            "show": false,
+            "areaStyle": {
+                "color": [
+                    "rgba(250,250,250,0.05)",
+                    "rgba(200,200,200,0.02)"
+                ]
+            }
+        }
+    },
+    "logAxis": {
+        "axisLine": {
+            "show": true,
+            "lineStyle": {
+                "color": "#aaaaaa"
+            }
+        },
+        "axisTick": {
+            "show": false,
+            "lineStyle": {
+                "color": "#333"
+            }
+        },
+        "axisLabel": {
+            "show": true,
+            "textStyle": {
+                "color": "#999999"
+            }
+        },
+        "splitLine": {
+            "show": true,
+            "lineStyle": {
+                "color": [
+                    "#e6e6e6"
+                ]
+            }
+        },
+        "splitArea": {
+            "show": false,
+            "areaStyle": {
+                "color": [
+                    "rgba(250,250,250,0.05)",
+                    "rgba(200,200,200,0.02)"
+                ]
+            }
+        }
+    },
+    "timeAxis": {
+        "axisLine": {
+            "show": true,
+            "lineStyle": {
+                "color": "#aaaaaa"
+            }
+        },
+        "axisTick": {
+            "show": false,
+            "lineStyle": {
+                "color": "#333"
+            }
+        },
+        "axisLabel": {
+            "show": true,
+            "textStyle": {
+                "color": "#999999"
+            }
+        },
+        "splitLine": {
+            "show": true,
+            "lineStyle": {
+                "color": [
+                    "#e6e6e6"
+                ]
+            }
+        },
+        "splitArea": {
+            "show": false,
+            "areaStyle": {
+                "color": [
+                    "rgba(250,250,250,0.05)",
+                    "rgba(200,200,200,0.02)"
+                ]
+            }
+        }
+    },
+    "toolbox": {
+        "iconStyle": {
+            "normal": {
+                "borderColor": "#999999"
+            },
+            "emphasis": {
+                "borderColor": "#666666"
+            }
+        }
+    },
+    "legend": {
+        "textStyle": {
+            "color": "#000000"
+        }
+    },
+    "tooltip": {
+        "axisPointer": {
+            "lineStyle": {
+                "color": "#cccccc",
+                "width": 1
+            },
+            "crossStyle": {
+                "color": "#cccccc",
+                "width": 1
+            }
+        }
+    },
+    "timeline": {
+        "lineStyle": {
+            "color": "#666666",
+            "width": 1
+        },
+        "itemStyle": {
+            "normal": {
+                "color": "#666666",
+                "borderWidth": 1
+            },
+            "emphasis": {
+                "color": "#fec64d"
+            }
+        },
+        "controlStyle": {
+            "normal": {
+                "color": "#666666",
+                "borderColor": "#666666",
+                "borderWidth": 0.5
+            },
+            "emphasis": {
+                "color": "#666666",
+                "borderColor": "#666666",
+                "borderWidth": 0.5
+            }
+        },
+        "checkpointStyle": {
+            "color": "#f3753f",
+            "borderColor": "rgba(255,178,72,0.41)"
+        },
+        "label": {
+            "normal": {
+                "textStyle": {
+                    "color": "#666666"
+                }
+            },
+            "emphasis": {
+                "textStyle": {
+                    "color": "#666666"
+                }
+            }
+        }
+    },
+    "visualMap": {
+        "color": [
+            "#00b2b1",
+            "#69c6c4",
+            "#a0d9d7",
+            "#ffbb9c",
+            "#fd986d",
+            "#f3753f"
+        ]
+    },
+    "dataZoom": {
+        "backgroundColor": "rgba(255,255,255,0)",
+        "dataBackgroundColor": "rgba(255,178,72,0.5)",
+        "fillerColor": "rgba(255,178,72,0.15)",
+        "handleColor": "#fec64d",
+        "handleSize": "100%",
+        "textStyle": {
+            "color": "#aaaaaa"
+        }
+    },
+    "markPoint": {
+        "label": {
+            "normal": {
+                "textStyle": {
+                    "color": "#ffffff"
+                }
+            },
+            "emphasis": {
+                "textStyle": {
+                    "color": "#ffffff"
+                }
+            }
+        }
+    }
+}
diff --git a/src/platform/echarts/base/themes/passion-flower.ts b/src/platform/echarts/base/themes/passion-flower.ts
new file mode 100644
index 0000000..f083613
--- /dev/null
+++ b/src/platform/echarts/base/themes/passion-flower.ts
@@ -0,0 +1,500 @@
+/* tslint:disable */
+export default {
+    "color": [
+        "#007e7d",
+        "#977ed2",
+        "#d58a9c",
+        "#97b6eb",
+        "#ceccbb",
+        "#f2dfd8"
+    ],
+    "backgroundColor": "transparent",
+    "textStyle": {},
+    "title": {
+        "textStyle": {
+            "color": "#aaaaaa"
+        },
+        "subtextStyle": {
+            "color": "#aaaaaa"
+        }
+    },
+    "tree": {
+      "itemStyle": {
+        "color": '#f2dfd8',
+        "borderColor": '#007e7d'
+      }
+    },
+    "line": {
+        "itemStyle": {
+            "normal": {
+                "borderWidth": "2"
+            }
+        },
+        "lineStyle": {
+            "normal": {
+                "width": "2"
+            }
+        },
+        "symbolSize": "6",
+        "symbol": "emptyCircle",
+        "smooth": true
+    },
+    "radar": {
+        "itemStyle": {
+            "normal": {
+                "borderWidth": "2"
+            }
+        },
+        "lineStyle": {
+            "normal": {
+                "width": "2"
+            }
+        },
+        "symbolSize": "6",
+        "symbol": "emptyCircle",
+        "smooth": true
+    },
+    "bar": {
+        "itemStyle": {
+            "normal": {
+                "barBorderWidth": 0,
+                "barBorderColor": "#ccc"
+            },
+            "emphasis": {
+                "barBorderWidth": 0,
+                "barBorderColor": "#ccc"
+            }
+        }
+    },
+    "pie": {
+        "itemStyle": {
+            "normal": {
+                "borderWidth": 0,
+                "borderColor": "#ccc"
+            },
+            "emphasis": {
+                "borderWidth": 0,
+                "borderColor": "#ccc"
+            }
+        }
+    },
+    "scatter": {
+        "itemStyle": {
+            "normal": {
+                "borderWidth": 0,
+                "borderColor": "#ccc"
+            },
+            "emphasis": {
+                "borderWidth": 0,
+                "borderColor": "#ccc"
+            }
+        }
+    },
+    "boxplot": {
+        "itemStyle": {
+            "normal": {
+                "borderWidth": 0,
+                "borderColor": "#ccc"
+            },
+            "emphasis": {
+                "borderWidth": 0,
+                "borderColor": "#ccc"
+            }
+        }
+    },
+    "parallel": {
+        "itemStyle": {
+            "normal": {
+                "borderWidth": 0,
+                "borderColor": "#ccc"
+            },
+            "emphasis": {
+                "borderWidth": 0,
+                "borderColor": "#ccc"
+            }
+        }
+    },
+    "sankey": {
+        "itemStyle": {
+            "normal": {
+                "borderWidth": 0,
+                "borderColor": "#ccc"
+            },
+            "emphasis": {
+                "borderWidth": 0,
+                "borderColor": "#ccc"
+            }
+        }
+    },
+    "funnel": {
+        "itemStyle": {
+            "normal": {
+                "borderWidth": 0,
+                "borderColor": "#ccc"
+            },
+            "emphasis": {
+                "borderWidth": 0,
+                "borderColor": "#ccc"
+            }
+        }
+    },
+    "gauge": {
+        "itemStyle": {
+            "normal": {
+                "borderWidth": 0,
+                "borderColor": "#ccc"
+            },
+            "emphasis": {
+                "borderWidth": 0,
+                "borderColor": "#ccc"
+            }
+        }
+    },
+    "candlestick": {
+        "itemStyle": {
+            "normal": {
+                "color": "#977ed2",
+                "color0": "transparent",
+                "borderColor": "#977ed2",
+                "borderColor0": "#007e7d",
+                "borderWidth": "2"
+            }
+        }
+    },
+    "graph": {
+        "itemStyle": {
+            "normal": {
+                "borderWidth": 0,
+                "borderColor": "#ccc"
+            }
+        },
+        "lineStyle": {
+            "normal": {
+                "width": 1,
+                "color": "#aaaaaa"
+            }
+        },
+        "symbolSize": "6",
+        "symbol": "emptyCircle",
+        "smooth": true,
+        "color": [
+            "#007e7d",
+            "#977ed2",
+            "#d58a9c",
+            "#97b6eb",
+            "#ceccbb",
+            "#f2dfd8"
+        ],
+        "label": {
+            "normal": {
+                "textStyle": {
+                    "color": "#ffffff"
+                }
+            }
+        }
+    },
+    "map": {
+        "itemStyle": {
+            "normal": {
+                "areaColor": "#f3f3f3",
+                "borderColor": "#999999",
+                "borderWidth": 0.5
+            },
+            "emphasis": {
+                "areaColor": "rgba(254,198,77,1)",
+                "borderColor": "#ecaf2b",
+                "borderWidth": 1
+            }
+        },
+        "label": {
+            "normal": {
+                "textStyle": {
+                    "color": "#00475e"
+                }
+            },
+            "emphasis": {
+                "textStyle": {
+                    "color": "rgb(0,71,94)"
+                }
+            }
+        }
+    },
+    "geo": {
+        "itemStyle": {
+            "normal": {
+                "areaColor": "#f3f3f3",
+                "borderColor": "#999999",
+                "borderWidth": 0.5
+            },
+            "emphasis": {
+                "areaColor": "rgba(254,198,77,1)",
+                "borderColor": "#ecaf2b",
+                "borderWidth": 1
+            }
+        },
+        "label": {
+            "normal": {
+                "textStyle": {
+                    "color": "#00475e"
+                }
+            },
+            "emphasis": {
+                "textStyle": {
+                    "color": "rgb(0,71,94)"
+                }
+            }
+        }
+    },
+    "categoryAxis": {
+        "axisLine": {
+            "show": true,
+            "lineStyle": {
+                "color": "#aaaaaa"
+            }
+        },
+        "axisTick": {
+            "show": false,
+            "lineStyle": {
+                "color": "#333"
+            }
+        },
+        "axisLabel": {
+            "show": true,
+            "textStyle": {
+                "color": "#999999"
+            }
+        },
+        "splitLine": {
+            "show": true,
+            "lineStyle": {
+                "color": [
+                    "#e6e6e6"
+                ]
+            }
+        },
+        "splitArea": {
+            "show": false,
+            "areaStyle": {
+                "color": [
+                    "rgba(250,250,250,0.05)",
+                    "rgba(200,200,200,0.02)"
+                ]
+            }
+        }
+    },
+    "valueAxis": {
+        "axisLine": {
+            "show": true,
+            "lineStyle": {
+                "color": "#aaaaaa"
+            }
+        },
+        "axisTick": {
+            "show": false,
+            "lineStyle": {
+                "color": "#333"
+            }
+        },
+        "axisLabel": {
+            "show": true,
+            "textStyle": {
+                "color": "#999999"
+            }
+        },
+        "splitLine": {
+            "show": true,
+            "lineStyle": {
+                "color": [
+                    "#e6e6e6"
+                ]
+            }
+        },
+        "splitArea": {
+            "show": false,
+            "areaStyle": {
+                "color": [
+                    "rgba(250,250,250,0.05)",
+                    "rgba(200,200,200,0.02)"
+                ]
+            }
+        }
+    },
+    "logAxis": {
+        "axisLine": {
+            "show": true,
+            "lineStyle": {
+                "color": "#aaaaaa"
+            }
+        },
+        "axisTick": {
+            "show": false,
+            "lineStyle": {
+                "color": "#333"
+            }
+        },
+        "axisLabel": {
+            "show": true,
+            "textStyle": {
+                "color": "#999999"
+            }
+        },
+        "splitLine": {
+            "show": true,
+            "lineStyle": {
+                "color": [
+                    "#e6e6e6"
+                ]
+            }
+        },
+        "splitArea": {
+            "show": false,
+            "areaStyle": {
+                "color": [
+                    "rgba(250,250,250,0.05)",
+                    "rgba(200,200,200,0.02)"
+                ]
+            }
+        }
+    },
+    "timeAxis": {
+        "axisLine": {
+            "show": true,
+            "lineStyle": {
+                "color": "#aaaaaa"
+            }
+        },
+        "axisTick": {
+            "show": false,
+            "lineStyle": {
+                "color": "#333"
+            }
+        },
+        "axisLabel": {
+            "show": true,
+            "textStyle": {
+                "color": "#999999"
+            }
+        },
+        "splitLine": {
+            "show": true,
+            "lineStyle": {
+                "color": [
+                    "#e6e6e6"
+                ]
+            }
+        },
+        "splitArea": {
+            "show": false,
+            "areaStyle": {
+                "color": [
+                    "rgba(250,250,250,0.05)",
+                    "rgba(200,200,200,0.02)"
+                ]
+            }
+        }
+    },
+    "toolbox": {
+        "iconStyle": {
+            "normal": {
+                "borderColor": "#999999"
+            },
+            "emphasis": {
+                "borderColor": "#666666"
+            }
+        }
+    },
+    "legend": {
+        "textStyle": {
+            "color": "#999999"
+        }
+    },
+    "tooltip": {
+        "axisPointer": {
+            "lineStyle": {
+                "color": "#cccccc",
+                "width": 1
+            },
+            "crossStyle": {
+                "color": "#cccccc",
+                "width": 1
+            }
+        }
+    },
+    "timeline": {
+        "lineStyle": {
+            "color": "#666666",
+            "width": 1
+        },
+        "itemStyle": {
+            "normal": {
+                "color": "#666666",
+                "borderWidth": 1
+            },
+            "emphasis": {
+                "color": "#f7ac4f"
+            }
+        },
+        "controlStyle": {
+            "normal": {
+                "color": "#666666",
+                "borderColor": "#666666",
+                "borderWidth": 0.5
+            },
+            "emphasis": {
+                "color": "#666666",
+                "borderColor": "#666666",
+                "borderWidth": 0.5
+            }
+        },
+        "checkpointStyle": {
+            "color": "#f7ac4f",
+            "borderColor": "rgba(254,198,77,0.6)"
+        },
+        "label": {
+            "normal": {
+                "textStyle": {
+                    "color": "#666666"
+                }
+            },
+            "emphasis": {
+                "textStyle": {
+                    "color": "#666666"
+                }
+            }
+        }
+    },
+    "visualMap": {
+        "color": [
+            "#007e7d",
+            "#977ed2",
+            "#d58a9c",
+            "#97b6eb",
+            "#ceccbb",
+            "#f2dfd8"
+        ]
+    },
+    "dataZoom": {
+        "backgroundColor": "rgba(255,255,255,0)",
+        "dataBackgroundColor": "rgba(255,178,72,0.5)",
+        "fillerColor": "rgba(255,178,72,0.15)",
+        "handleColor": "#ffb248",
+        "handleSize": "100%",
+        "textStyle": {
+            "color": "#aaaaaa"
+        }
+    },
+    "markPoint": {
+        "label": {
+            "normal": {
+                "textStyle": {
+                    "color": "#ffffff"
+                }
+            },
+            "emphasis": {
+                "textStyle": {
+                    "color": "#ffffff"
+                }
+            }
+        }
+    }
+}
diff --git a/src/platform/echarts/base/themes/razzleberry-pie.ts b/src/platform/echarts/base/themes/razzleberry-pie.ts
new file mode 100644
index 0000000..0c49cf3
--- /dev/null
+++ b/src/platform/echarts/base/themes/razzleberry-pie.ts
@@ -0,0 +1,506 @@
+/* tslint:disable */
+export default {
+    "color": [
+        "#523e85",
+        "#8b4f8f",
+        "#b96595",
+        "#e0829a",
+        "#ffa3a2",
+        "#f9b8a3",
+        "#f1ccb1",
+        "#ebddc8"
+    ],
+    "backgroundColor": "transparent",
+    "textStyle": {},
+    "title": {
+        "textStyle": {
+            "color": "#aaaaaa"
+        },
+        "subtextStyle": {
+            "color": "#aaaaaa"
+        }
+    },
+    "tree": {
+      "itemStyle": {
+        "color": '#ffa3a2',
+        "borderColor": '#523e85'
+      }
+    },
+    "line": {
+        "itemStyle": {
+            "normal": {
+                "borderWidth": "2"
+            }
+        },
+        "lineStyle": {
+            "normal": {
+                "width": "2"
+            }
+        },
+        "symbolSize": "6",
+        "symbol": "emptyCircle",
+        "smooth": true
+    },
+    "radar": {
+        "itemStyle": {
+            "normal": {
+                "borderWidth": "2"
+            }
+        },
+        "lineStyle": {
+            "normal": {
+                "width": "2"
+            }
+        },
+        "symbolSize": "6",
+        "symbol": "emptyCircle",
+        "smooth": true
+    },
+    "bar": {
+        "itemStyle": {
+            "normal": {
+                "barBorderWidth": 0,
+                "barBorderColor": "#ccc"
+            },
+            "emphasis": {
+                "barBorderWidth": 0,
+                "barBorderColor": "#ccc"
+            }
+        }
+    },
+    "pie": {
+        "itemStyle": {
+            "normal": {
+                "borderWidth": 0,
+                "borderColor": "#ccc"
+            },
+            "emphasis": {
+                "borderWidth": 0,
+                "borderColor": "#ccc"
+            }
+        }
+    },
+    "scatter": {
+        "itemStyle": {
+            "normal": {
+                "borderWidth": 0,
+                "borderColor": "#ccc"
+            },
+            "emphasis": {
+                "borderWidth": 0,
+                "borderColor": "#ccc"
+            }
+        }
+    },
+    "boxplot": {
+        "itemStyle": {
+            "normal": {
+                "borderWidth": 0,
+                "borderColor": "#ccc"
+            },
+            "emphasis": {
+                "borderWidth": 0,
+                "borderColor": "#ccc"
+            }
+        }
+    },
+    "parallel": {
+        "itemStyle": {
+            "normal": {
+                "borderWidth": 0,
+                "borderColor": "#ccc"
+            },
+            "emphasis": {
+                "borderWidth": 0,
+                "borderColor": "#ccc"
+            }
+        }
+    },
+    "sankey": {
+        "itemStyle": {
+            "normal": {
+                "borderWidth": 0,
+                "borderColor": "#ccc"
+            },
+            "emphasis": {
+                "borderWidth": 0,
+                "borderColor": "#ccc"
+            }
+        }
+    },
+    "funnel": {
+        "itemStyle": {
+            "normal": {
+                "borderWidth": 0,
+                "borderColor": "#ccc"
+            },
+            "emphasis": {
+                "borderWidth": 0,
+                "borderColor": "#ccc"
+            }
+        }
+    },
+    "gauge": {
+        "itemStyle": {
+            "normal": {
+                "borderWidth": 0,
+                "borderColor": "#ccc"
+            },
+            "emphasis": {
+                "borderWidth": 0,
+                "borderColor": "#ccc"
+            }
+        }
+    },
+    "candlestick": {
+        "itemStyle": {
+            "normal": {
+                "color": "#8b4f8f",
+                "color0": "#ffa3a2",
+                "borderColor": "#8b4f8f",
+                "borderColor0": "#ffa3a2",
+                "borderWidth": "2"
+            }
+        }
+    },
+    "graph": {
+        "itemStyle": {
+            "normal": {
+                "borderWidth": 0,
+                "borderColor": "#ccc"
+            }
+        },
+        "lineStyle": {
+            "normal": {
+                "width": 1,
+                "color": "#aaaaaa"
+            }
+        },
+        "symbolSize": "6",
+        "symbol": "emptyCircle",
+        "smooth": true,
+        "color": [
+            "#523e85",
+            "#8b4f8f",
+            "#b96595",
+            "#e0829a",
+            "#ffa3a2",
+            "#f9b8a3",
+            "#f1ccb1",
+            "#ebddc8"
+        ],
+        "label": {
+            "normal": {
+                "textStyle": {
+                    "color": "#ffffff"
+                }
+            }
+        }
+    },
+    "map": {
+        "itemStyle": {
+            "normal": {
+                "areaColor": "#f3f3f3",
+                "borderColor": "#999999",
+                "borderWidth": 0.5
+            },
+            "emphasis": {
+                "areaColor": "rgba(255,178,72,1)",
+                "borderColor": "#eb8146",
+                "borderWidth": 1
+            }
+        },
+        "label": {
+            "normal": {
+                "textStyle": {
+                    "color": "#523e85"
+                }
+            },
+            "emphasis": {
+                "textStyle": {
+                    "color": "rgb(82,62,133)"
+                }
+            }
+        }
+    },
+    "geo": {
+        "itemStyle": {
+            "normal": {
+                "areaColor": "#f3f3f3",
+                "borderColor": "#999999",
+                "borderWidth": 0.5
+            },
+            "emphasis": {
+                "areaColor": "rgba(255,178,72,1)",
+                "borderColor": "#eb8146",
+                "borderWidth": 1
+            }
+        },
+        "label": {
+            "normal": {
+                "textStyle": {
+                    "color": "#523e85"
+                }
+            },
+            "emphasis": {
+                "textStyle": {
+                    "color": "rgb(82,62,133)"
+                }
+            }
+        }
+    },
+    "categoryAxis": {
+        "axisLine": {
+            "show": true,
+            "lineStyle": {
+                "color": "#aaaaaa"
+            }
+        },
+        "axisTick": {
+            "show": false,
+            "lineStyle": {
+                "color": "#333"
+            }
+        },
+        "axisLabel": {
+            "show": true,
+            "textStyle": {
+                "color": "#999999"
+            }
+        },
+        "splitLine": {
+            "show": true,
+            "lineStyle": {
+                "color": [
+                    "#e6e6e6"
+                ]
+            }
+        },
+        "splitArea": {
+            "show": false,
+            "areaStyle": {
+                "color": [
+                    "rgba(250,250,250,0.05)",
+                    "rgba(200,200,200,0.02)"
+                ]
+            }
+        }
+    },
+    "valueAxis": {
+        "axisLine": {
+            "show": true,
+            "lineStyle": {
+                "color": "#aaaaaa"
+            }
+        },
+        "axisTick": {
+            "show": false,
+            "lineStyle": {
+                "color": "#333"
+            }
+        },
+        "axisLabel": {
+            "show": true,
+            "textStyle": {
+                "color": "#999999"
+            }
+        },
+        "splitLine": {
+            "show": true,
+            "lineStyle": {
+                "color": [
+                    "#e6e6e6"
+                ]
+            }
+        },
+        "splitArea": {
+            "show": false,
+            "areaStyle": {
+                "color": [
+                    "rgba(250,250,250,0.05)",
+                    "rgba(200,200,200,0.02)"
+                ]
+            }
+        }
+    },
+    "logAxis": {
+        "axisLine": {
+            "show": true,
+            "lineStyle": {
+                "color": "#aaaaaa"
+            }
+        },
+        "axisTick": {
+            "show": false,
+            "lineStyle": {
+                "color": "#333"
+            }
+        },
+        "axisLabel": {
+            "show": true,
+            "textStyle": {
+                "color": "#999999"
+            }
+        },
+        "splitLine": {
+            "show": true,
+            "lineStyle": {
+                "color": [
+                    "#e6e6e6"
+                ]
+            }
+        },
+        "splitArea": {
+            "show": false,
+            "areaStyle": {
+                "color": [
+                    "rgba(250,250,250,0.05)",
+                    "rgba(200,200,200,0.02)"
+                ]
+            }
+        }
+    },
+    "timeAxis": {
+        "axisLine": {
+            "show": true,
+            "lineStyle": {
+                "color": "#aaaaaa"
+            }
+        },
+        "axisTick": {
+            "show": false,
+            "lineStyle": {
+                "color": "#333"
+            }
+        },
+        "axisLabel": {
+            "show": true,
+            "textStyle": {
+                "color": "#999999"
+            }
+        },
+        "splitLine": {
+            "show": true,
+            "lineStyle": {
+                "color": [
+                    "#e6e6e6"
+                ]
+            }
+        },
+        "splitArea": {
+            "show": false,
+            "areaStyle": {
+                "color": [
+                    "rgba(250,250,250,0.05)",
+                    "rgba(200,200,200,0.02)"
+                ]
+            }
+        }
+    },
+    "toolbox": {
+        "iconStyle": {
+            "normal": {
+                "borderColor": "#999999"
+            },
+            "emphasis": {
+                "borderColor": "#666666"
+            }
+        }
+    },
+    "legend": {
+        "textStyle": {
+            "color": "#000000"
+        }
+    },
+    "tooltip": {
+        "axisPointer": {
+            "lineStyle": {
+                "color": "#cccccc",
+                "width": 1
+            },
+            "crossStyle": {
+                "color": "#cccccc",
+                "width": 1
+            }
+        }
+    },
+    "timeline": {
+        "lineStyle": {
+            "color": "#523e85",
+            "width": 1
+        },
+        "itemStyle": {
+            "normal": {
+                "color": "#523e85",
+                "borderWidth": 1
+            },
+            "emphasis": {
+                "color": "#ffb248"
+            }
+        },
+        "controlStyle": {
+            "normal": {
+                "color": "#523e85",
+                "borderColor": "#523e85",
+                "borderWidth": 0.5
+            },
+            "emphasis": {
+                "color": "#523e85",
+                "borderColor": "#523e85",
+                "borderWidth": 0.5
+            }
+        },
+        "checkpointStyle": {
+            "color": "#eb8146",
+            "borderColor": "rgba(255,178,72,0.41)"
+        },
+        "label": {
+            "normal": {
+                "textStyle": {
+                    "color": "#523e85"
+                }
+            },
+            "emphasis": {
+                "textStyle": {
+                    "color": "#523e85"
+                }
+            }
+        }
+    },
+    "visualMap": {
+        "color": [
+            "#523e85",
+            "#8b4f8f",
+            "#b96595",
+            "#e0829a",
+            "#ffa3a2",
+            "#f9b8a3",
+            "#f1ccb1",
+            "#ebddc8"
+        ]
+    },
+    "dataZoom": {
+        "backgroundColor": "rgba(255,255,255,0)",
+        "dataBackgroundColor": "rgba(255,178,72,0.5)",
+        "fillerColor": "rgba(255,178,72,0.15)",
+        "handleColor": "#ffb248",
+        "handleSize": "100%",
+        "textStyle": {
+            "color": "#aaaaaa"
+        }
+    },
+    "markPoint": {
+        "label": {
+            "normal": {
+                "textStyle": {
+                    "color": "#ffffff"
+                }
+            },
+            "emphasis": {
+                "textStyle": {
+                    "color": "#ffffff"
+                }
+            }
+        }
+    }
+}
diff --git a/src/platform/echarts/base/themes/teradata-classic.ts b/src/platform/echarts/base/themes/teradata-classic.ts
new file mode 100644
index 0000000..723980e
--- /dev/null
+++ b/src/platform/echarts/base/themes/teradata-classic.ts
@@ -0,0 +1,506 @@
+/* tslint:disable */
+export default {
+    "color": [
+        "#005e7d",
+        "#c54b17",
+        "#009392",
+        "#f5bb3c",
+        "#0098c9",
+        "#f58b5e",
+        "#59cecd",
+        "#fee2a6"
+    ],
+    "backgroundColor": "transparent",
+    "textStyle": {},
+    "title": {
+        "textStyle": {
+            "color": "#aaaaaa"
+        },
+        "subtextStyle": {
+            "color": "#aaaaaa"
+        }
+    },
+    "tree": {
+      "itemStyle": {
+        "color": '#fee2a6',
+        "borderColor": '#005e7d'
+      }
+    },
+    "line": {
+        "itemStyle": {
+            "normal": {
+                "borderWidth": "2"
+            }
+        },
+        "lineStyle": {
+            "normal": {
+                "width": "2"
+            }
+        },
+        "symbolSize": "6",
+        "symbol": "emptyCircle",
+        "smooth": true
+    },
+    "radar": {
+        "itemStyle": {
+            "normal": {
+                "borderWidth": "2"
+            }
+        },
+        "lineStyle": {
+            "normal": {
+                "width": "2"
+            }
+        },
+        "symbolSize": "6",
+        "symbol": "emptyCircle",
+        "smooth": true
+    },
+    "bar": {
+        "itemStyle": {
+            "normal": {
+                "barBorderWidth": 0,
+                "barBorderColor": "#ccc"
+            },
+            "emphasis": {
+                "barBorderWidth": 0,
+                "barBorderColor": "#ccc"
+            }
+        }
+    },
+    "pie": {
+        "itemStyle": {
+            "normal": {
+                "borderWidth": 0,
+                "borderColor": "#ccc"
+            },
+            "emphasis": {
+                "borderWidth": 0,
+                "borderColor": "#ccc"
+            }
+        }
+    },
+    "scatter": {
+        "itemStyle": {
+            "normal": {
+                "borderWidth": 0,
+                "borderColor": "#ccc"
+            },
+            "emphasis": {
+                "borderWidth": 0,
+                "borderColor": "#ccc"
+            }
+        }
+    },
+    "boxplot": {
+        "itemStyle": {
+            "normal": {
+                "borderWidth": 0,
+                "borderColor": "#ccc"
+            },
+            "emphasis": {
+                "borderWidth": 0,
+                "borderColor": "#ccc"
+            }
+        }
+    },
+    "parallel": {
+        "itemStyle": {
+            "normal": {
+                "borderWidth": 0,
+                "borderColor": "#ccc"
+            },
+            "emphasis": {
+                "borderWidth": 0,
+                "borderColor": "#ccc"
+            }
+        }
+    },
+    "sankey": {
+        "itemStyle": {
+            "normal": {
+                "borderWidth": 0,
+                "borderColor": "#ccc"
+            },
+            "emphasis": {
+                "borderWidth": 0,
+                "borderColor": "#ccc"
+            }
+        }
+    },
+    "funnel": {
+        "itemStyle": {
+            "normal": {
+                "borderWidth": 0,
+                "borderColor": "#ccc"
+            },
+            "emphasis": {
+                "borderWidth": 0,
+                "borderColor": "#ccc"
+            }
+        }
+    },
+    "gauge": {
+        "itemStyle": {
+            "normal": {
+                "borderWidth": 0,
+                "borderColor": "#ccc"
+            },
+            "emphasis": {
+                "borderWidth": 0,
+                "borderColor": "#ccc"
+            }
+        }
+    },
+    "candlestick": {
+        "itemStyle": {
+            "normal": {
+                "color": "#0098c9",
+                "color0": "transparent",
+                "borderColor": "#0098c9",
+                "borderColor0": "#c54b17",
+                "borderWidth": "2"
+            }
+        }
+    },
+    "graph": {
+        "itemStyle": {
+            "normal": {
+                "borderWidth": 0,
+                "borderColor": "#ccc"
+            }
+        },
+        "lineStyle": {
+            "normal": {
+                "width": 1,
+                "color": "#aaaaaa"
+            }
+        },
+        "symbolSize": "6",
+        "symbol": "emptyCircle",
+        "smooth": true,
+        "color": [
+            "#005e7d",
+            "#c54b17",
+            "#009392",
+            "#f5bb3c",
+            "#0098c9",
+            "#f58b5e",
+            "#59cecd",
+            "#fee2a6"
+        ],
+        "label": {
+            "normal": {
+                "textStyle": {
+                    "color": "#ffffff"
+                }
+            }
+        }
+    },
+    "map": {
+        "itemStyle": {
+            "normal": {
+                "areaColor": "#f3f3f3",
+                "borderColor": "#999999",
+                "borderWidth": 0.5
+            },
+            "emphasis": {
+                "areaColor": "rgba(254,198,77,1)",
+                "borderColor": "#ecaf2b",
+                "borderWidth": 1
+            }
+        },
+        "label": {
+            "normal": {
+                "textStyle": {
+                    "color": "#00475e"
+                }
+            },
+            "emphasis": {
+                "textStyle": {
+                    "color": "rgb(0,71,94)"
+                }
+            }
+        }
+    },
+    "geo": {
+        "itemStyle": {
+            "normal": {
+                "areaColor": "#f3f3f3",
+                "borderColor": "#999999",
+                "borderWidth": 0.5
+            },
+            "emphasis": {
+                "areaColor": "rgba(254,198,77,1)",
+                "borderColor": "#ecaf2b",
+                "borderWidth": 1
+            }
+        },
+        "label": {
+            "normal": {
+                "textStyle": {
+                    "color": "#00475e"
+                }
+            },
+            "emphasis": {
+                "textStyle": {
+                    "color": "rgb(0,71,94)"
+                }
+            }
+        }
+    },
+    "categoryAxis": {
+        "axisLine": {
+            "show": true,
+            "lineStyle": {
+                "color": "#aaaaaa"
+            }
+        },
+        "axisTick": {
+            "show": false,
+            "lineStyle": {
+                "color": "#333"
+            }
+        },
+        "axisLabel": {
+            "show": true,
+            "textStyle": {
+                "color": "#999999"
+            }
+        },
+        "splitLine": {
+            "show": true,
+            "lineStyle": {
+                "color": [
+                    "#e6e6e6"
+                ]
+            }
+        },
+        "splitArea": {
+            "show": false,
+            "areaStyle": {
+                "color": [
+                    "rgba(250,250,250,0.05)",
+                    "rgba(200,200,200,0.02)"
+                ]
+            }
+        }
+    },
+    "valueAxis": {
+        "axisLine": {
+            "show": true,
+            "lineStyle": {
+                "color": "#aaaaaa"
+            }
+        },
+        "axisTick": {
+            "show": false,
+            "lineStyle": {
+                "color": "#333"
+            }
+        },
+        "axisLabel": {
+            "show": true,
+            "textStyle": {
+                "color": "#999999"
+            }
+        },
+        "splitLine": {
+            "show": true,
+            "lineStyle": {
+                "color": [
+                    "#e6e6e6"
+                ]
+            }
+        },
+        "splitArea": {
+            "show": false,
+            "areaStyle": {
+                "color": [
+                    "rgba(250,250,250,0.05)",
+                    "rgba(200,200,200,0.02)"
+                ]
+            }
+        }
+    },
+    "logAxis": {
+        "axisLine": {
+            "show": true,
+            "lineStyle": {
+                "color": "#aaaaaa"
+            }
+        },
+        "axisTick": {
+            "show": false,
+            "lineStyle": {
+                "color": "#333"
+            }
+        },
+        "axisLabel": {
+            "show": true,
+            "textStyle": {
+                "color": "#999999"
+            }
+        },
+        "splitLine": {
+            "show": true,
+            "lineStyle": {
+                "color": [
+                    "#e6e6e6"
+                ]
+            }
+        },
+        "splitArea": {
+            "show": false,
+            "areaStyle": {
+                "color": [
+                    "rgba(250,250,250,0.05)",
+                    "rgba(200,200,200,0.02)"
+                ]
+            }
+        }
+    },
+    "timeAxis": {
+        "axisLine": {
+            "show": true,
+            "lineStyle": {
+                "color": "#aaaaaa"
+            }
+        },
+        "axisTick": {
+            "show": false,
+            "lineStyle": {
+                "color": "#333"
+            }
+        },
+        "axisLabel": {
+            "show": true,
+            "textStyle": {
+                "color": "#999999"
+            }
+        },
+        "splitLine": {
+            "show": true,
+            "lineStyle": {
+                "color": [
+                    "#e6e6e6"
+                ]
+            }
+        },
+        "splitArea": {
+            "show": false,
+            "areaStyle": {
+                "color": [
+                    "rgba(250,250,250,0.05)",
+                    "rgba(200,200,200,0.02)"
+                ]
+            }
+        }
+    },
+    "toolbox": {
+        "iconStyle": {
+            "normal": {
+                "borderColor": "#999999"
+            },
+            "emphasis": {
+                "borderColor": "#666666"
+            }
+        }
+    },
+    "legend": {
+        "textStyle": {
+            "color": "#999999"
+        }
+    },
+    "tooltip": {
+        "axisPointer": {
+            "lineStyle": {
+                "color": "#cccccc",
+                "width": 1
+            },
+            "crossStyle": {
+                "color": "#cccccc",
+                "width": 1
+            }
+        }
+    },
+    "timeline": {
+        "lineStyle": {
+            "color": "#666666",
+            "width": 1
+        },
+        "itemStyle": {
+            "normal": {
+                "color": "#666666",
+                "borderWidth": 1
+            },
+            "emphasis": {
+                "color": "#f7ac4f"
+            }
+        },
+        "controlStyle": {
+            "normal": {
+                "color": "#666666",
+                "borderColor": "#666666",
+                "borderWidth": 0.5
+            },
+            "emphasis": {
+                "color": "#666666",
+                "borderColor": "#666666",
+                "borderWidth": 0.5
+            }
+        },
+        "checkpointStyle": {
+            "color": "#f7ac4f",
+            "borderColor": "rgba(254,198,77,0.6)"
+        },
+        "label": {
+            "normal": {
+                "textStyle": {
+                    "color": "#666666"
+                }
+            },
+            "emphasis": {
+                "textStyle": {
+                    "color": "#666666"
+                }
+            }
+        }
+    },
+    "visualMap": {
+        "color": [
+            "#005e7d",
+            "#c54b17",
+            "#009392",
+            "#f5bb3c",
+            "#0098c9",
+            "#f58b5e",
+            "#59cecd",
+            "#fee2a6"
+        ]
+    },
+    "dataZoom": {
+        "backgroundColor": "rgba(255,255,255,0)",
+        "dataBackgroundColor": "rgba(255,178,72,0.5)",
+        "fillerColor": "rgba(255,178,72,0.15)",
+        "handleColor": "#ffb248",
+        "handleSize": "100%",
+        "textStyle": {
+            "color": "#aaaaaa"
+        }
+    },
+    "markPoint": {
+        "label": {
+            "normal": {
+                "textStyle": {
+                    "color": "#ffffff"
+                }
+            },
+            "emphasis": {
+                "textStyle": {
+                    "color": "#ffffff"
+                }
+            }
+        }
+    }
+}
diff --git a/src/platform/echarts/base/themes/teradata-default.ts b/src/platform/echarts/base/themes/teradata-default.ts
new file mode 100644
index 0000000..6423292
--- /dev/null
+++ b/src/platform/echarts/base/themes/teradata-default.ts
@@ -0,0 +1,497 @@
+/* tslint:disable */
+export default {
+    "color": [
+        "#4d5b62",
+        "#008ab6",
+        "#f3753f",
+        "#2cc0bf",
+        "#fed887"
+    ],
+    "backgroundColor": "transparent",
+    "textStyle": {},
+    "title": {
+        "textStyle": {
+            "color": "#aaaaaa"
+        },
+        "subtextStyle": {
+            "color": "#aaaaaa"
+        }
+    },
+    "tree": {
+      "itemStyle": {
+        "color": '#fed887',
+        "borderColor": '#4d5b62'
+      }
+    },
+    "line": {
+        "itemStyle": {
+            "normal": {
+                "borderWidth": "2"
+            }
+        },
+        "lineStyle": {
+            "normal": {
+                "width": "2"
+            }
+        },
+        "symbolSize": "6",
+        "symbol": "emptyCircle",
+        "smooth": true
+    },
+    "radar": {
+        "itemStyle": {
+            "normal": {
+                "borderWidth": "2"
+            }
+        },
+        "lineStyle": {
+            "normal": {
+                "width": "2"
+            }
+        },
+        "symbolSize": "6",
+        "symbol": "emptyCircle",
+        "smooth": true
+    },
+    "bar": {
+        "itemStyle": {
+            "normal": {
+                "barBorderWidth": 0,
+                "barBorderColor": "#ccc"
+            },
+            "emphasis": {
+                "barBorderWidth": 0,
+                "barBorderColor": "#ccc"
+            }
+        }
+    },
+    "pie": {
+        "itemStyle": {
+            "normal": {
+                "borderWidth": 0,
+                "borderColor": "#ccc"
+            },
+            "emphasis": {
+                "borderWidth": 0,
+                "borderColor": "#ccc"
+            }
+        }
+    },
+    "scatter": {
+        "itemStyle": {
+            "normal": {
+                "borderWidth": 0,
+                "borderColor": "#ccc"
+            },
+            "emphasis": {
+                "borderWidth": 0,
+                "borderColor": "#ccc"
+            }
+        }
+    },
+    "boxplot": {
+        "itemStyle": {
+            "normal": {
+                "borderWidth": 0,
+                "borderColor": "#ccc"
+            },
+            "emphasis": {
+                "borderWidth": 0,
+                "borderColor": "#ccc"
+            }
+        }
+    },
+    "parallel": {
+        "itemStyle": {
+            "normal": {
+                "borderWidth": 0,
+                "borderColor": "#ccc"
+            },
+            "emphasis": {
+                "borderWidth": 0,
+                "borderColor": "#ccc"
+            }
+        }
+    },
+    "sankey": {
+        "itemStyle": {
+            "normal": {
+                "borderWidth": 0,
+                "borderColor": "#ccc"
+            },
+            "emphasis": {
+                "borderWidth": 0,
+                "borderColor": "#ccc"
+            }
+        }
+    },
+    "funnel": {
+        "itemStyle": {
+            "normal": {
+                "borderWidth": 0,
+                "borderColor": "#ccc"
+            },
+            "emphasis": {
+                "borderWidth": 0,
+                "borderColor": "#ccc"
+            }
+        }
+    },
+    "gauge": {
+        "itemStyle": {
+            "normal": {
+                "borderWidth": 0,
+                "borderColor": "#ccc"
+            },
+            "emphasis": {
+                "borderWidth": 0,
+                "borderColor": "#ccc"
+            }
+        }
+    },
+    "candlestick": {
+        "itemStyle": {
+            "normal": {
+                "color": "#977ed2",
+                "color0": "transparent",
+                "borderColor": "#977ed2",
+                "borderColor0": "#009d9c",
+                "borderWidth": "2"
+            }
+        }
+    },
+    "graph": {
+        "itemStyle": {
+            "normal": {
+                "borderWidth": 0,
+                "borderColor": "#ccc"
+            }
+        },
+        "lineStyle": {
+            "normal": {
+                "width": 1,
+                "color": "#aaaaaa"
+            }
+        },
+        "symbolSize": "6",
+        "symbol": "emptyCircle",
+        "smooth": true,
+        "color": [
+            "#4d5b62",
+            "#008ab6",
+            "#f3753f",
+            "#2cc0bf",
+            "#fed887"
+        ],
+        "label": {
+            "normal": {
+                "textStyle": {
+                    "color": "#ffffff"
+                }
+            }
+        }
+    },
+    "map": {
+        "itemStyle": {
+            "normal": {
+                "areaColor": "#f3f3f3",
+                "borderColor": "#999999",
+                "borderWidth": 0.5
+            },
+            "emphasis": {
+                "areaColor": "rgba(254,198,77,1)",
+                "borderColor": "#ecaf2b",
+                "borderWidth": 1
+            }
+        },
+        "label": {
+            "normal": {
+                "textStyle": {
+                    "color": "#00475e"
+                }
+            },
+            "emphasis": {
+                "textStyle": {
+                    "color": "rgb(0,71,94)"
+                }
+            }
+        }
+    },
+    "geo": {
+        "itemStyle": {
+            "normal": {
+                "areaColor": "#f3f3f3",
+                "borderColor": "#999999",
+                "borderWidth": 0.5
+            },
+            "emphasis": {
+                "areaColor": "rgba(254,198,77,1)",
+                "borderColor": "#ecaf2b",
+                "borderWidth": 1
+            }
+        },
+        "label": {
+            "normal": {
+                "textStyle": {
+                    "color": "#00475e"
+                }
+            },
+            "emphasis": {
+                "textStyle": {
+                    "color": "rgb(0,71,94)"
+                }
+            }
+        }
+    },
+    "categoryAxis": {
+        "axisLine": {
+            "show": true,
+            "lineStyle": {
+                "color": "#aaaaaa"
+            }
+        },
+        "axisTick": {
+            "show": false,
+            "lineStyle": {
+                "color": "#333"
+            }
+        },
+        "axisLabel": {
+            "show": true,
+            "textStyle": {
+                "color": "#999999"
+            }
+        },
+        "splitLine": {
+            "show": true,
+            "lineStyle": {
+                "color": [
+                    "#e6e6e6"
+                ]
+            }
+        },
+        "splitArea": {
+            "show": false,
+            "areaStyle": {
+                "color": [
+                    "rgba(250,250,250,0.05)",
+                    "rgba(200,200,200,0.02)"
+                ]
+            }
+        }
+    },
+    "valueAxis": {
+        "axisLine": {
+            "show": true,
+            "lineStyle": {
+                "color": "#aaaaaa"
+            }
+        },
+        "axisTick": {
+            "show": false,
+            "lineStyle": {
+                "color": "#333"
+            }
+        },
+        "axisLabel": {
+            "show": true,
+            "textStyle": {
+                "color": "#999999"
+            }
+        },
+        "splitLine": {
+            "show": true,
+            "lineStyle": {
+                "color": [
+                    "#e6e6e6"
+                ]
+            }
+        },
+        "splitArea": {
+            "show": false,
+            "areaStyle": {
+                "color": [
+                    "rgba(250,250,250,0.05)",
+                    "rgba(200,200,200,0.02)"
+                ]
+            }
+        }
+    },
+    "logAxis": {
+        "axisLine": {
+            "show": true,
+            "lineStyle": {
+                "color": "#aaaaaa"
+            }
+        },
+        "axisTick": {
+            "show": false,
+            "lineStyle": {
+                "color": "#333"
+            }
+        },
+        "axisLabel": {
+            "show": true,
+            "textStyle": {
+                "color": "#999999"
+            }
+        },
+        "splitLine": {
+            "show": true,
+            "lineStyle": {
+                "color": [
+                    "#e6e6e6"
+                ]
+            }
+        },
+        "splitArea": {
+            "show": false,
+            "areaStyle": {
+                "color": [
+                    "rgba(250,250,250,0.05)",
+                    "rgba(200,200,200,0.02)"
+                ]
+            }
+        }
+    },
+    "timeAxis": {
+        "axisLine": {
+            "show": true,
+            "lineStyle": {
+                "color": "#aaaaaa"
+            }
+        },
+        "axisTick": {
+            "show": false,
+            "lineStyle": {
+                "color": "#333"
+            }
+        },
+        "axisLabel": {
+            "show": true,
+            "textStyle": {
+                "color": "#999999"
+            }
+        },
+        "splitLine": {
+            "show": true,
+            "lineStyle": {
+                "color": [
+                    "#e6e6e6"
+                ]
+            }
+        },
+        "splitArea": {
+            "show": false,
+            "areaStyle": {
+                "color": [
+                    "rgba(250,250,250,0.05)",
+                    "rgba(200,200,200,0.02)"
+                ]
+            }
+        }
+    },
+    "toolbox": {
+        "iconStyle": {
+            "normal": {
+                "borderColor": "#999999"
+            },
+            "emphasis": {
+                "borderColor": "#666666"
+            }
+        }
+    },
+    "legend": {
+        "textStyle": {
+            "color": "#999999"
+        }
+    },
+    "tooltip": {
+        "axisPointer": {
+            "lineStyle": {
+                "color": "#cccccc",
+                "width": 1
+            },
+            "crossStyle": {
+                "color": "#cccccc",
+                "width": 1
+            }
+        }
+    },
+    "timeline": {
+        "lineStyle": {
+            "color": "#666666",
+            "width": 1
+        },
+        "itemStyle": {
+            "normal": {
+                "color": "#666666",
+                "borderWidth": 1
+            },
+            "emphasis": {
+                "color": "#f7ac4f"
+            }
+        },
+        "controlStyle": {
+            "normal": {
+                "color": "#666666",
+                "borderColor": "#666666",
+                "borderWidth": 0.5
+            },
+            "emphasis": {
+                "color": "#666666",
+                "borderColor": "#666666",
+                "borderWidth": 0.5
+            }
+        },
+        "checkpointStyle": {
+            "color": "#f7ac4f",
+            "borderColor": "rgba(254,198,77,0.6)"
+        },
+        "label": {
+            "normal": {
+                "textStyle": {
+                    "color": "#666666"
+                }
+            },
+            "emphasis": {
+                "textStyle": {
+                    "color": "#666666"
+                }
+            }
+        }
+    },
+    "visualMap": {
+        "color": [
+            "#4d5b62",
+            "#008ab6",
+            "#f3753f",
+            "#2cc0bf",
+            "#fed887"
+        ]
+    },
+    "dataZoom": {
+        "backgroundColor": "rgba(255,255,255,0)",
+        "dataBackgroundColor": "rgba(255,178,72,0.5)",
+        "fillerColor": "rgba(255,178,72,0.15)",
+        "handleColor": "#ffb248",
+        "handleSize": "100%",
+        "textStyle": {
+            "color": "#aaaaaa"
+        }
+    },
+    "markPoint": {
+        "label": {
+            "normal": {
+                "textStyle": {
+                    "color": "#ffffff"
+                }
+            },
+            "emphasis": {
+                "textStyle": {
+                    "color": "#ffffff"
+                }
+            }
+        }
+    }
+}
diff --git a/src/platform/echarts/base/themes/urban-sunrise.ts b/src/platform/echarts/base/themes/urban-sunrise.ts
new file mode 100644
index 0000000..45dbc4d
--- /dev/null
+++ b/src/platform/echarts/base/themes/urban-sunrise.ts
@@ -0,0 +1,500 @@
+/* tslint:disable */
+export default {
+    "color": [
+        "#667279",
+        "#979ea4",
+        "#caced0",
+        "#ffbb9c",
+        "#fd986d",
+        "#F3753F"
+    ],
+    "backgroundColor": "transparent",
+    "textStyle": {},
+    "title": {
+        "textStyle": {
+            "color": "#aaaaaa"
+        },
+        "subtextStyle": {
+            "color": "#aaaaaa"
+        }
+    },
+    "tree": {
+      "itemStyle": {
+        "color": '#ffbb9c',
+        "borderColor": '#667279'
+      }
+    },
+    "line": {
+        "itemStyle": {
+            "normal": {
+                "borderWidth": "2"
+            }
+        },
+        "lineStyle": {
+            "normal": {
+                "width": "2"
+            }
+        },
+        "symbolSize": "6",
+        "symbol": "emptyCircle",
+        "smooth": true
+    },
+    "radar": {
+        "itemStyle": {
+            "normal": {
+                "borderWidth": "2"
+            }
+        },
+        "lineStyle": {
+            "normal": {
+                "width": "2"
+            }
+        },
+        "symbolSize": "6",
+        "symbol": "emptyCircle",
+        "smooth": true
+    },
+    "bar": {
+        "itemStyle": {
+            "normal": {
+                "barBorderWidth": 0,
+                "barBorderColor": "#ccc"
+            },
+            "emphasis": {
+                "barBorderWidth": 0,
+                "barBorderColor": "#ccc"
+            }
+        }
+    },
+    "pie": {
+        "itemStyle": {
+            "normal": {
+                "borderWidth": 0,
+                "borderColor": "#ccc"
+            },
+            "emphasis": {
+                "borderWidth": 0,
+                "borderColor": "#ccc"
+            }
+        }
+    },
+    "scatter": {
+        "itemStyle": {
+            "normal": {
+                "borderWidth": 0,
+                "borderColor": "#ccc"
+            },
+            "emphasis": {
+                "borderWidth": 0,
+                "borderColor": "#ccc"
+            }
+        }
+    },
+    "boxplot": {
+        "itemStyle": {
+            "normal": {
+                "borderWidth": 0,
+                "borderColor": "#ccc"
+            },
+            "emphasis": {
+                "borderWidth": 0,
+                "borderColor": "#ccc"
+            }
+        }
+    },
+    "parallel": {
+        "itemStyle": {
+            "normal": {
+                "borderWidth": 0,
+                "borderColor": "#ccc"
+            },
+            "emphasis": {
+                "borderWidth": 0,
+                "borderColor": "#ccc"
+            }
+        }
+    },
+    "sankey": {
+        "itemStyle": {
+            "normal": {
+                "borderWidth": 0,
+                "borderColor": "#ccc"
+            },
+            "emphasis": {
+                "borderWidth": 0,
+                "borderColor": "#ccc"
+            }
+        }
+    },
+    "funnel": {
+        "itemStyle": {
+            "normal": {
+                "borderWidth": 0,
+                "borderColor": "#ccc"
+            },
+            "emphasis": {
+                "borderWidth": 0,
+                "borderColor": "#ccc"
+            }
+        }
+    },
+    "gauge": {
+        "itemStyle": {
+            "normal": {
+                "borderWidth": 0,
+                "borderColor": "#ccc"
+            },
+            "emphasis": {
+                "borderWidth": 0,
+                "borderColor": "#ccc"
+            }
+        }
+    },
+    "candlestick": {
+        "itemStyle": {
+            "normal": {
+                "color": "#f3753f",
+                "color0": "transparent",
+                "borderColor": "#f3753f",
+                "borderColor0": "#667279",
+                "borderWidth": "2"
+            }
+        }
+    },
+    "graph": {
+        "itemStyle": {
+            "normal": {
+                "borderWidth": 0,
+                "borderColor": "#ccc"
+            }
+        },
+        "lineStyle": {
+            "normal": {
+                "width": 1,
+                "color": "#aaaaaa"
+            }
+        },
+        "symbolSize": "6",
+        "symbol": "emptyCircle",
+        "smooth": true,
+        "color": [
+            "#667279",
+            "#979ea4",
+            "#caced0",
+            "#ffbb9c",
+            "#fd986d",
+            "#F3753F"
+        ],
+        "label": {
+            "normal": {
+                "textStyle": {
+                    "color": "#ffffff"
+                }
+            }
+        }
+    },
+    "map": {
+        "itemStyle": {
+            "normal": {
+                "areaColor": "#f3f3f3",
+                "borderColor": "#999999",
+                "borderWidth": 0.5
+            },
+            "emphasis": {
+                "areaColor": "rgba(254,198,77,1)",
+                "borderColor": "#ecaf2b",
+                "borderWidth": 1
+            }
+        },
+        "label": {
+            "normal": {
+                "textStyle": {
+                    "color": "#667279"
+                }
+            },
+            "emphasis": {
+                "textStyle": {
+                    "color": "rgb(102,114,121)"
+                }
+            }
+        }
+    },
+    "geo": {
+        "itemStyle": {
+            "normal": {
+                "areaColor": "#f3f3f3",
+                "borderColor": "#999999",
+                "borderWidth": 0.5
+            },
+            "emphasis": {
+                "areaColor": "rgba(254,198,77,1)",
+                "borderColor": "#ecaf2b",
+                "borderWidth": 1
+            }
+        },
+        "label": {
+            "normal": {
+                "textStyle": {
+                    "color": "#667279"
+                }
+            },
+            "emphasis": {
+                "textStyle": {
+                    "color": "rgb(102,114,121)"
+                }
+            }
+        }
+    },
+    "categoryAxis": {
+        "axisLine": {
+            "show": true,
+            "lineStyle": {
+                "color": "#aaaaaa"
+            }
+        },
+        "axisTick": {
+            "show": false,
+            "lineStyle": {
+                "color": "#333"
+            }
+        },
+        "axisLabel": {
+            "show": true,
+            "textStyle": {
+                "color": "#999999"
+            }
+        },
+        "splitLine": {
+            "show": true,
+            "lineStyle": {
+                "color": [
+                    "#e6e6e6"
+                ]
+            }
+        },
+        "splitArea": {
+            "show": false,
+            "areaStyle": {
+                "color": [
+                    "rgba(250,250,250,0.05)",
+                    "rgba(200,200,200,0.02)"
+                ]
+            }
+        }
+    },
+    "valueAxis": {
+        "axisLine": {
+            "show": true,
+            "lineStyle": {
+                "color": "#aaaaaa"
+            }
+        },
+        "axisTick": {
+            "show": false,
+            "lineStyle": {
+                "color": "#333"
+            }
+        },
+        "axisLabel": {
+            "show": true,
+            "textStyle": {
+                "color": "#999999"
+            }
+        },
+        "splitLine": {
+            "show": true,
+            "lineStyle": {
+                "color": [
+                    "#e6e6e6"
+                ]
+            }
+        },
+        "splitArea": {
+            "show": false,
+            "areaStyle": {
+                "color": [
+                    "rgba(250,250,250,0.05)",
+                    "rgba(200,200,200,0.02)"
+                ]
+            }
+        }
+    },
+    "logAxis": {
+        "axisLine": {
+            "show": true,
+            "lineStyle": {
+                "color": "#aaaaaa"
+            }
+        },
+        "axisTick": {
+            "show": false,
+            "lineStyle": {
+                "color": "#333"
+            }
+        },
+        "axisLabel": {
+            "show": true,
+            "textStyle": {
+                "color": "#999999"
+            }
+        },
+        "splitLine": {
+            "show": true,
+            "lineStyle": {
+                "color": [
+                    "#e6e6e6"
+                ]
+            }
+        },
+        "splitArea": {
+            "show": false,
+            "areaStyle": {
+                "color": [
+                    "rgba(250,250,250,0.05)",
+                    "rgba(200,200,200,0.02)"
+                ]
+            }
+        }
+    },
+    "timeAxis": {
+        "axisLine": {
+            "show": true,
+            "lineStyle": {
+                "color": "#aaaaaa"
+            }
+        },
+        "axisTick": {
+            "show": false,
+            "lineStyle": {
+                "color": "#333"
+            }
+        },
+        "axisLabel": {
+            "show": true,
+            "textStyle": {
+                "color": "#999999"
+            }
+        },
+        "splitLine": {
+            "show": true,
+            "lineStyle": {
+                "color": [
+                    "#e6e6e6"
+                ]
+            }
+        },
+        "splitArea": {
+            "show": false,
+            "areaStyle": {
+                "color": [
+                    "rgba(250,250,250,0.05)",
+                    "rgba(200,200,200,0.02)"
+                ]
+            }
+        }
+    },
+    "toolbox": {
+        "iconStyle": {
+            "normal": {
+                "borderColor": "#999999"
+            },
+            "emphasis": {
+                "borderColor": "#666666"
+            }
+        }
+    },
+    "legend": {
+        "textStyle": {
+            "color": "#999999"
+        }
+    },
+    "tooltip": {
+        "axisPointer": {
+            "lineStyle": {
+                "color": "#cccccc",
+                "width": 1
+            },
+            "crossStyle": {
+                "color": "#cccccc",
+                "width": 1
+            }
+        }
+    },
+    "timeline": {
+        "lineStyle": {
+            "color": "#666666",
+            "width": 1
+        },
+        "itemStyle": {
+            "normal": {
+                "color": "#666666",
+                "borderWidth": 1
+            },
+            "emphasis": {
+                "color": "#fec64d"
+            }
+        },
+        "controlStyle": {
+            "normal": {
+                "color": "#666666",
+                "borderColor": "#666666",
+                "borderWidth": 0.5
+            },
+            "emphasis": {
+                "color": "#666666",
+                "borderColor": "#666666",
+                "borderWidth": 0.5
+            }
+        },
+        "checkpointStyle": {
+            "color": "#f3753f",
+            "borderColor": "rgba(255,178,72,0.41)"
+        },
+        "label": {
+            "normal": {
+                "textStyle": {
+                    "color": "#666666"
+                }
+            },
+            "emphasis": {
+                "textStyle": {
+                    "color": "#666666"
+                }
+            }
+        }
+    },
+    "visualMap": {
+        "color": [
+            "#667279",
+            "#979ea4",
+            "#caced0",
+            "#ffbb9c",
+            "#fd986d",
+            "#F3753F"
+        ]
+    },
+    "dataZoom": {
+        "backgroundColor": "rgba(255,255,255,0)",
+        "dataBackgroundColor": "rgba(255,178,72,0.5)",
+        "fillerColor": "rgba(255,178,72,0.15)",
+        "handleColor": "#fec64d",
+        "handleSize": "100%",
+        "textStyle": {
+            "color": "#aaaaaa"
+        }
+    },
+    "markPoint": {
+        "label": {
+            "normal": {
+                "textStyle": {
+                    "color": "#ffffff"
+                }
+            },
+            "emphasis": {
+                "textStyle": {
+                    "color": "#ffffff"
+                }
+            }
+        }
+    }
+}
diff --git a/src/platform/echarts/base/themes/volcanic-eruption.ts b/src/platform/echarts/base/themes/volcanic-eruption.ts
new file mode 100644
index 0000000..154e88c
--- /dev/null
+++ b/src/platform/echarts/base/themes/volcanic-eruption.ts
@@ -0,0 +1,500 @@
+/* tslint:disable */
+export default {
+    "color": [
+        "#565a83",
+        "#7c5c91",
+        "#a85a90",
+        "#cf5880",
+        "#ea5f64",
+        "#f3753f"
+    ],
+    "backgroundColor": "transparent",
+    "textStyle": {},
+    "title": {
+        "textStyle": {
+            "color": "#aaaaaa"
+        },
+        "subtextStyle": {
+            "color": "#aaaaaa"
+        }
+    },
+    "tree": {
+      "itemStyle": {
+        "color": '#a85a90',
+        "borderColor": '#565a83'
+      }
+    },
+    "line": {
+        "itemStyle": {
+            "normal": {
+                "borderWidth": "2"
+            }
+        },
+        "lineStyle": {
+            "normal": {
+                "width": "2"
+            }
+        },
+        "symbolSize": "6",
+        "symbol": "emptyCircle",
+        "smooth": true
+    },
+    "radar": {
+        "itemStyle": {
+            "normal": {
+                "borderWidth": "2"
+            }
+        },
+        "lineStyle": {
+            "normal": {
+                "width": "2"
+            }
+        },
+        "symbolSize": "6",
+        "symbol": "emptyCircle",
+        "smooth": true
+    },
+    "bar": {
+        "itemStyle": {
+            "normal": {
+                "barBorderWidth": 0,
+                "barBorderColor": "#ccc"
+            },
+            "emphasis": {
+                "barBorderWidth": 0,
+                "barBorderColor": "#ccc"
+            }
+        }
+    },
+    "pie": {
+        "itemStyle": {
+            "normal": {
+                "borderWidth": 0,
+                "borderColor": "#ccc"
+            },
+            "emphasis": {
+                "borderWidth": 0,
+                "borderColor": "#ccc"
+            }
+        }
+    },
+    "scatter": {
+        "itemStyle": {
+            "normal": {
+                "borderWidth": 0,
+                "borderColor": "#ccc"
+            },
+            "emphasis": {
+                "borderWidth": 0,
+                "borderColor": "#ccc"
+            }
+        }
+    },
+    "boxplot": {
+        "itemStyle": {
+            "normal": {
+                "borderWidth": 0,
+                "borderColor": "#ccc"
+            },
+            "emphasis": {
+                "borderWidth": 0,
+                "borderColor": "#ccc"
+            }
+        }
+    },
+    "parallel": {
+        "itemStyle": {
+            "normal": {
+                "borderWidth": 0,
+                "borderColor": "#ccc"
+            },
+            "emphasis": {
+                "borderWidth": 0,
+                "borderColor": "#ccc"
+            }
+        }
+    },
+    "sankey": {
+        "itemStyle": {
+            "normal": {
+                "borderWidth": 0,
+                "borderColor": "#ccc"
+            },
+            "emphasis": {
+                "borderWidth": 0,
+                "borderColor": "#ccc"
+            }
+        }
+    },
+    "funnel": {
+        "itemStyle": {
+            "normal": {
+                "borderWidth": 0,
+                "borderColor": "#ccc"
+            },
+            "emphasis": {
+                "borderWidth": 0,
+                "borderColor": "#ccc"
+            }
+        }
+    },
+    "gauge": {
+        "itemStyle": {
+            "normal": {
+                "borderWidth": 0,
+                "borderColor": "#ccc"
+            },
+            "emphasis": {
+                "borderWidth": 0,
+                "borderColor": "#ccc"
+            }
+        }
+    },
+    "candlestick": {
+        "itemStyle": {
+            "normal": {
+                "color": "#f3753f",
+                "color0": "transparent",
+                "borderColor": "#f3753f",
+                "borderColor0": "#667279",
+                "borderWidth": "2"
+            }
+        }
+    },
+    "graph": {
+        "itemStyle": {
+            "normal": {
+                "borderWidth": 0,
+                "borderColor": "#ccc"
+            }
+        },
+        "lineStyle": {
+            "normal": {
+                "width": 1,
+                "color": "#aaaaaa"
+            }
+        },
+        "symbolSize": "6",
+        "symbol": "emptyCircle",
+        "smooth": true,
+        "color": [
+            "#565a83",
+            "#7c5c91",
+            "#a85a90",
+            "#cf5880",
+            "#ea5f64",
+            "#f3753f"
+        ],
+        "label": {
+            "normal": {
+                "textStyle": {
+                    "color": "#ffffff"
+                }
+            }
+        }
+    },
+    "map": {
+        "itemStyle": {
+            "normal": {
+                "areaColor": "#f3f3f3",
+                "borderColor": "#999999",
+                "borderWidth": 0.5
+            },
+            "emphasis": {
+                "areaColor": "rgba(254,198,77,1)",
+                "borderColor": "#ecaf2b",
+                "borderWidth": 1
+            }
+        },
+        "label": {
+            "normal": {
+                "textStyle": {
+                    "color": "#667279"
+                }
+            },
+            "emphasis": {
+                "textStyle": {
+                    "color": "rgb(102,114,121)"
+                }
+            }
+        }
+    },
+    "geo": {
+        "itemStyle": {
+            "normal": {
+                "areaColor": "#f3f3f3",
+                "borderColor": "#999999",
+                "borderWidth": 0.5
+            },
+            "emphasis": {
+                "areaColor": "rgba(254,198,77,1)",
+                "borderColor": "#ecaf2b",
+                "borderWidth": 1
+            }
+        },
+        "label": {
+            "normal": {
+                "textStyle": {
+                    "color": "#667279"
+                }
+            },
+            "emphasis": {
+                "textStyle": {
+                    "color": "rgb(102,114,121)"
+                }
+            }
+        }
+    },
+    "categoryAxis": {
+        "axisLine": {
+            "show": true,
+            "lineStyle": {
+                "color": "#aaaaaa"
+            }
+        },
+        "axisTick": {
+            "show": false,
+            "lineStyle": {
+                "color": "#333"
+            }
+        },
+        "axisLabel": {
+            "show": true,
+            "textStyle": {
+                "color": "#999999"
+            }
+        },
+        "splitLine": {
+            "show": true,
+            "lineStyle": {
+                "color": [
+                    "#e6e6e6"
+                ]
+            }
+        },
+        "splitArea": {
+            "show": false,
+            "areaStyle": {
+                "color": [
+                    "rgba(250,250,250,0.05)",
+                    "rgba(200,200,200,0.02)"
+                ]
+            }
+        }
+    },
+    "valueAxis": {
+        "axisLine": {
+            "show": true,
+            "lineStyle": {
+                "color": "#aaaaaa"
+            }
+        },
+        "axisTick": {
+            "show": false,
+            "lineStyle": {
+                "color": "#333"
+            }
+        },
+        "axisLabel": {
+            "show": true,
+            "textStyle": {
+                "color": "#999999"
+            }
+        },
+        "splitLine": {
+            "show": true,
+            "lineStyle": {
+                "color": [
+                    "#e6e6e6"
+                ]
+            }
+        },
+        "splitArea": {
+            "show": false,
+            "areaStyle": {
+                "color": [
+                    "rgba(250,250,250,0.05)",
+                    "rgba(200,200,200,0.02)"
+                ]
+            }
+        }
+    },
+    "logAxis": {
+        "axisLine": {
+            "show": true,
+            "lineStyle": {
+                "color": "#aaaaaa"
+            }
+        },
+        "axisTick": {
+            "show": false,
+            "lineStyle": {
+                "color": "#333"
+            }
+        },
+        "axisLabel": {
+            "show": true,
+            "textStyle": {
+                "color": "#999999"
+            }
+        },
+        "splitLine": {
+            "show": true,
+            "lineStyle": {
+                "color": [
+                    "#e6e6e6"
+                ]
+            }
+        },
+        "splitArea": {
+            "show": false,
+            "areaStyle": {
+                "color": [
+                    "rgba(250,250,250,0.05)",
+                    "rgba(200,200,200,0.02)"
+                ]
+            }
+        }
+    },
+    "timeAxis": {
+        "axisLine": {
+            "show": true,
+            "lineStyle": {
+                "color": "#aaaaaa"
+            }
+        },
+        "axisTick": {
+            "show": false,
+            "lineStyle": {
+                "color": "#333"
+            }
+        },
+        "axisLabel": {
+            "show": true,
+            "textStyle": {
+                "color": "#999999"
+            }
+        },
+        "splitLine": {
+            "show": true,
+            "lineStyle": {
+                "color": [
+                    "#e6e6e6"
+                ]
+            }
+        },
+        "splitArea": {
+            "show": false,
+            "areaStyle": {
+                "color": [
+                    "rgba(250,250,250,0.05)",
+                    "rgba(200,200,200,0.02)"
+                ]
+            }
+        }
+    },
+    "toolbox": {
+        "iconStyle": {
+            "normal": {
+                "borderColor": "#999999"
+            },
+            "emphasis": {
+                "borderColor": "#666666"
+            }
+        }
+    },
+    "legend": {
+        "textStyle": {
+            "color": "#000000"
+        }
+    },
+    "tooltip": {
+        "axisPointer": {
+            "lineStyle": {
+                "color": "#cccccc",
+                "width": 1
+            },
+            "crossStyle": {
+                "color": "#cccccc",
+                "width": 1
+            }
+        }
+    },
+    "timeline": {
+        "lineStyle": {
+            "color": "#666666",
+            "width": 1
+        },
+        "itemStyle": {
+            "normal": {
+                "color": "#666666",
+                "borderWidth": 1
+            },
+            "emphasis": {
+                "color": "#fec64d"
+            }
+        },
+        "controlStyle": {
+            "normal": {
+                "color": "#666666",
+                "borderColor": "#666666",
+                "borderWidth": 0.5
+            },
+            "emphasis": {
+                "color": "#666666",
+                "borderColor": "#666666",
+                "borderWidth": 0.5
+            }
+        },
+        "checkpointStyle": {
+            "color": "#f3753f",
+            "borderColor": "rgba(255,178,72,0.41)"
+        },
+        "label": {
+            "normal": {
+                "textStyle": {
+                    "color": "#666666"
+                }
+            },
+            "emphasis": {
+                "textStyle": {
+                    "color": "#666666"
+                }
+            }
+        }
+    },
+    "visualMap": {
+        "color": [
+            "#565a83",
+            "#7c5c91",
+            "#a85a90",
+            "#cf5880",
+            "#ea5f64",
+            "#f3753f"
+        ]
+    },
+    "dataZoom": {
+        "backgroundColor": "rgba(255,255,255,0)",
+        "dataBackgroundColor": "rgba(255,178,72,0.5)",
+        "fillerColor": "rgba(255,178,72,0.15)",
+        "handleColor": "#fec64d",
+        "handleSize": "100%",
+        "textStyle": {
+            "color": "#aaaaaa"
+        }
+    },
+    "markPoint": {
+        "label": {
+            "normal": {
+                "textStyle": {
+                    "color": "#ffffff"
+                }
+            },
+            "emphasis": {
+                "textStyle": {
+                    "color": "#ffffff"
+                }
+            }
+        }
+    }
+}
diff --git a/src/platform/echarts/base/utils/echarts.ts b/src/platform/echarts/base/utils/echarts.ts
new file mode 100644
index 0000000..ce9a0f2
--- /dev/null
+++ b/src/platform/echarts/base/utils/echarts.ts
@@ -0,0 +1,53 @@
+import * as echarts from 'echarts/lib/echarts';
+
+import aquaSplash from '../themes/aqua-splash';
+import californiaCoast from '../themes/california-coast';
+import hawaiianSunrise from '../themes/hawaiian-sunrise';
+import passionFlower from '../themes/passion-flower';
+import razzleberryPie from '../themes/razzleberry-pie';
+import teradataClassic from '../themes/teradata-classic';
+import teradataDefault from '../themes/teradata-default';
+import urbanSunrise from '../themes/urban-sunrise';
+import volcanicEruption from '../themes/volcanic-eruption';
+
+/**
+ * Function used to register a theme into echarts
+ * Theme name and theme object needed as stated in
+ * https://ecomfe.github.io/echarts-doc/public/en/api.html#echarts.registerTheme
+ */
+export function registerTheme(themeName: string, theme: Object): void {
+  echarts.registerTheme(themeName, theme);
+}
+
+/**
+ * Function to register all default themes
+ * @internal
+ */
+export function registerDefaultThemes(): void {
+  registerTheme('aqua-splash', aquaSplash);
+  registerTheme('california-coast', californiaCoast);
+  registerTheme('hawaiian-sunrise', hawaiianSunrise);
+  registerTheme('passion-flower', passionFlower);
+  registerTheme('razzleberry-pie', razzleberryPie);
+  registerTheme('teradata-classic', teradataClassic);
+  registerTheme('teradata-default', teradataDefault);
+  registerTheme('urban-sunrise', urbanSunrise);
+  registerTheme('volcanic-eruption', volcanicEruption);
+}
+
+/**
+ * Returns all the theme names bundled with covalent echarts.
+ */
+export function getThemes(): string[] {
+  return [
+    'aqua-splash',
+    'california-coast',
+    'hawaiian-sunrise',
+    'passion-flower',
+    'razzleberry-pie',
+    'teradata-classic',
+    'teradata-default',
+    'urban-sunrise',
+    'volcanic-eruption',
+  ];
+}
diff --git a/src/platform/echarts/base/utils/index.ts b/src/platform/echarts/base/utils/index.ts
index 7728078..b658b70 100644
--- a/src/platform/echarts/base/utils/index.ts
+++ b/src/platform/echarts/base/utils/index.ts
@@ -1 +1,2 @@
 export * from './assign-defined';
+export * from './echarts';