diff --git a/src/app/pages/charts/components/chartJs/chartJs.component.ts b/src/app/pages/charts/components/chartJs/chartJs.component.ts
index 847dce88..ec9ce54e 100644
--- a/src/app/pages/charts/components/chartJs/chartJs.component.ts
+++ b/src/app/pages/charts/components/chartJs/chartJs.component.ts
@@ -19,12 +19,18 @@ export class ChartJs {
 
   public labels = {
     one: ["Sleeping", "Designing", "Coding", "Cycling"],
-    two: ["April", "May", "June", "Jule", "August", "September", "October", "November", "December"]
+    two: ["April", "May", "June", "Jule", "August", "September", "October", "November", "December"],
+    three: ["May", "June", "Jule", "August", "September", "October", "November"]
   };
   public data = {
     one: [20, 40, 5, 35],
-    two: [[1, 9, 3, 4, 5, 6, 7, 8, 2].map((e) => {return Math.sin(e) * 25 + 25})]
+    two: [[1, 9, 3, 4, 5, 6, 7, 8, 2].map((e) => {return Math.sin(e) * 25 + 25})],
+    three: [
+      [65, 59, 90, 81, 56, 55, 40],
+      [28, 48, 40, 19, 88, 27, 45]
+    ]
   };
+  public series = ['Product A', 'Product B'];
   public colours = chartColors;
   public options = {
     scaleShowLabelBackdrop : false,
diff --git a/src/app/pages/charts/components/chartJs/chartJs.html b/src/app/pages/charts/components/chartJs/chartJs.html
index 2a666eff..f5872bbf 100644
--- a/src/app/pages/charts/components/chartJs/chartJs.html
+++ b/src/app/pages/charts/components/chartJs/chartJs.html
@@ -40,3 +40,27 @@
     </ba-card>
   </div>
 </div>
+
+<div class="row ">
+  <div class="col-lg-4 col-md-6">
+    <ba-card title="Radar" baCardClass="with-scroll ">
+      <base-chart id="radar" class="chart chart-radar"
+                  [legend]="false" [series]="series" [colours]="colours" [options]="options" [data]="data.three" [chartType]="chartType('Radar')" [labels]="labels.three" (chartClick)="changeData($event)">
+      </base-chart>
+    </ba-card>
+  </div>
+  <div class="col-lg-4 col-md-6">
+    <ba-card title="Line" baCardClass="with-scroll ">
+      <base-chart id="line" class="chart chart-line"
+                  [legend]="false" [series]="series" [colours]="colours" [options]="options" [data]="data.three" [chartType]="chartType('Line')" [labels]="labels.two" (chartClick)="changeData($event)">
+      </base-chart>
+    </ba-card>
+  </div>
+  <div class="col-lg-4 col-md-12">
+    <ba-card title="Bars" baCardClass="with-scroll ">
+      <base-chart id="bar" class="chart chart-bar"
+                  [legend]="false" [series]="series" [colours]="colours" [options]="options" [data]="data.three" [chartType]="chartType('Bar')" [labels]="labels.two" (chartClick)="changeData($event)">
+      </base-chart>
+    </ba-card>
+  </div>
+</div>