diff --git a/src/app/pages/charts/components/chartJs/chartJs.component.ts b/src/app/pages/charts/components/chartJs/chartJs.component.ts
index dc38ffd2..76641b0d 100644
--- a/src/app/pages/charts/components/chartJs/chartJs.component.ts
+++ b/src/app/pages/charts/components/chartJs/chartJs.component.ts
@@ -16,11 +16,12 @@ import {chartColors} from "../../../../theme/theme.constants";
   template: require('./chartJs.html'),
 })
 export class ChartJs {
-  public pieLabels = ["Sleeping", "Designing", "Coding", "Cycling"];
-  public pieChartType = 'Pie';
-  public pieData = [20, 40, 5, 35];
-  public pieColours = chartColors;
-  public pieOptions = {
+
+  public labels = ["Sleeping", "Designing", "Coding", "Cycling"];
+  public data = [20, 40, 5, 35];
+  public colours = chartColors;
+  public options = {
+    scaleShowLabelBackdrop : false,
     segmentShowStroke : false,
     // responsive: true,
     scaleFontColor: "rgba(255,255,255,.7)",
@@ -31,16 +32,16 @@ export class ChartJs {
   constructor(private _chartJsService:ChartJsService) {
   }
 
-  ngAfterViewInit() {
-
+  chartType(type) {
+    return type;
   }
 
-  pieChangeData () {
+  changeData ($event) {
     let shuffle = (o) => {
       for(var j, x, i = o.length; i; j = Math.floor(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x){}
       return o;
     };
 
-    this.pieData = shuffle(this.pieData);
+    this.data = shuffle(this.data);
   }
 }
diff --git a/src/app/pages/charts/components/chartJs/chartJs.html b/src/app/pages/charts/components/chartJs/chartJs.html
index daf9a249..95c8887e 100644
--- a/src/app/pages/charts/components/chartJs/chartJs.html
+++ b/src/app/pages/charts/components/chartJs/chartJs.html
@@ -1,9 +1,25 @@
 <div class="row">
   <div class="col-md-4">
-    <div ba-panel ba-panel-title="Pie">
+    <ba-card title="Pie" baCardClass="medium-card">
       <base-chart class="chart chart-pie"
-              [legend]="true" [colours]="pieColours" [options]="pieOptions" [data]="pieData" [chartType]="pieChartType" [labels]="pieLabels" (chartClick)="pieChangeData($event)">
+              [legend]="true" [colours]="colours" [options]="options" [data]="data" [chartType]="chartType('Pie')" [labels]="labels" (chartClick)="changeData($event)">
       </base-chart>
-    </div>
+    </ba-card>
+  </div>
+
+  <div class="col-md-4">
+    <ba-card title="Doughnut" baCardClass="medium-card">
+      <base-chart class="doughnut chart-doughnut"
+                  [legend]="true" [colours]="colours" [options]="options" [data]="data" [chartType]="chartType('Doughnut')" [labels]="labels" (chartClick)="changeData($event)">
+      </base-chart>
+    </ba-card>
+  </div>
+
+  <div class="col-md-4">
+    <ba-card title="Polar" baCardClass="medium-card">
+      <base-chart class="polar chart-polar"
+                  [legend]="true" [colours]="colours" [options]="options" [data]="data" [chartType]="chartType('PolarArea')" [labels]="labels" (chartClick)="changeData($event)">
+      </base-chart>
+      </ba-card>
   </div>
 </div>