diff --git a/package.json b/package.json
index 72ff7ce..a2b9359 100644
--- a/package.json
+++ b/package.json
@@ -11,9 +11,11 @@
   },
   "dependencies": {
     "bootstrap": "^4.0.0",
+    "chart.js": "^2.7.2",
     "chartist": "^0.11.0",
     "es6-promise": "^4.2.4",
     "vue": "^2.5.17",
+    "vue-chartjs": "^3.4.0",
     "vue-router": "^3.0.1",
     "vue2-transitions": "^0.2.3"
   },
diff --git a/src/components/Cards/ChartCard.vue b/src/components/Cards/ChartCard.vue
deleted file mode 100644
index 4570330..0000000
--- a/src/components/Cards/ChartCard.vue
+++ /dev/null
@@ -1,113 +0,0 @@
-<template>
-  <card>
-    <template slot="header">
-      <h4 v-if="$slots.title || title" class="card-title">
-        <slot name="title">
-          {{title}}
-        </slot>
-      </h4>
-      <p class="card-category">
-        <slot name="subTitle">
-          {{subTitle}}
-        </slot>
-      </p>
-    </template>
-    <div>
-      <div :id="chartId" class="ct-chart"></div>
-      <div class="footer">
-        <div class="chart-legend">
-          <slot name="legend"></slot>
-        </div>
-        <hr>
-        <div class="stats">
-          <slot name="footer"></slot>
-        </div>
-        <div class="pull-right">
-        </div>
-      </div>
-    </div>
-
-  </card>
-</template>
-<script>
-import Card from "./Card.vue";
-export default {
-  name: "chart-card",
-  components: {
-    Card
-  },
-  props: {
-    footerText: {
-      type: String,
-      default: ""
-    },
-    title: {
-      type: String,
-      default: ""
-    },
-    subTitle: {
-      type: String,
-      default: ""
-    },
-    chartType: {
-      type: String,
-      default: "Line" // Line | Pie | Bar
-    },
-    chartOptions: {
-      type: Object,
-      default: () => {
-        return {};
-      }
-    },
-    chartData: {
-      type: Object,
-      default: () => {
-        return {
-          labels: [],
-          series: []
-        };
-      }
-    }
-  },
-  data() {
-    return {
-      chartId: "no-id"
-    };
-  },
-  methods: {
-    /***
-     * Initializes the chart by merging the chart options sent via props and the default chart options
-     */
-    initChart(Chartist) {
-      const chartIdQuery = `#${this.chartId}`;
-      Chartist[this.chartType](
-        chartIdQuery,
-        this.chartData,
-        this.chartOptions
-      );
-    },
-    /***
-     * Assigns a random id to the chart
-     */
-    updateChartId() {
-      const currentTime = new Date().getTime().toString();
-      const randomInt = this.getRandomInt(0, currentTime);
-      this.chartId = `div_${randomInt}`;
-    },
-    getRandomInt(min, max) {
-      return Math.floor(Math.random() * (max - min + 1)) + min;
-    }
-  },
-  mounted() {
-    this.updateChartId();
-    import('chartist').then((Chartist) => {
-      let ChartistLib = Chartist.default || Chartist ;
-      this.$nextTick(() => {
-        this.initChart(ChartistLib);
-      });
-    });
-  }
-};
-</script>
-<style>
-</style>
diff --git a/src/components/Charts/BarChart.js b/src/components/Charts/BarChart.js
new file mode 100644
index 0000000..a7851df
--- /dev/null
+++ b/src/components/Charts/BarChart.js
@@ -0,0 +1,57 @@
+import { Bar } from 'vue-chartjs';
+
+export default {
+  name: 'bar-chart',
+  extends: Bar,
+  props: {
+    labels: Array,
+    datasets: Array,
+    data: [Array, Object],
+    color: {
+      type: String,
+      default: ''
+    },
+    extraOptions: Object,
+    title: {
+      type: String,
+      default: ''
+    },
+    gradientColors: {
+      type: Array,
+      deafault: () => ['rgba(72,72,176,0.2)', 'rgba(72,72,176,0.0)', 'rgba(119,52,169,0)'],
+      validator: val =>{
+        return val.length > 2;
+      }
+    },
+  },
+  mounted() {
+    let fallBackColor = '#d048b6';
+    let color = this.color || fallBackColor;
+    const ctx = document.getElementById(this.chartId).getContext('2d');
+    const gradientStroke = ctx.createLinearGradient(0, 230, 0, 50);
+
+    gradientStroke.addColorStop(1, this.gradientColors[0]);
+    gradientStroke.addColorStop(0.2, this.gradientColors[1]);
+    gradientStroke.addColorStop(0, this.gradientColors[2]); //purple colors
+
+    this.renderChart(
+      {
+        labels: this.labels || [],
+        datasets: this.datasets
+          ? this.datasets
+          : [{
+              label: this.title || '',
+              fill: true,
+              backgroundColor: gradientStroke,
+              hoverBackgroundColor: gradientStroke,
+              borderColor: color,
+              borderWidth: 2,
+              borderDash: [],
+              borderDashOffset: 0.0,
+              data: this.data || []
+            }]
+      },
+      this.extraOptions
+    );
+  }
+};
diff --git a/src/components/Charts/LineChart.js b/src/components/Charts/LineChart.js
new file mode 100644
index 0000000..90d89f3
--- /dev/null
+++ b/src/components/Charts/LineChart.js
@@ -0,0 +1,65 @@
+import { Line } from 'vue-chartjs';
+
+export default {
+  name: 'line-chart',
+  extends: Line,
+  props: {
+    labels: Array,
+    datasets: Array,
+    data: [Array, Object],
+    color: {
+      type: String,
+      default: ''
+    },
+    extraOptions: Object,
+    title: {
+      type: String,
+      default: ''
+    },
+    gradientColors: {
+      type: Array,
+      deafault: () => ['rgba(72,72,176,0.2)', 'rgba(72,72,176,0.0)', 'rgba(119,52,169,0)'],
+      validator: val =>{
+        return val.length > 2;
+      }
+    },
+  },
+  mounted() {
+    let fallBackColor = '#d048b6';
+    let color = this.color || fallBackColor;
+    const ctx = document.getElementById(this.chartId).getContext('2d');
+    const gradientStroke = ctx.createLinearGradient(0, 230, 0, 50);
+
+    gradientStroke.addColorStop(1, this.gradientColors[0]);
+    gradientStroke.addColorStop(0.2, this.gradientColors[1]);
+    gradientStroke.addColorStop(0, this.gradientColors[2]); //purple colors
+
+    this.renderChart(
+      {
+        labels: this.labels || [],
+        datasets: this.datasets
+          ? this.datasets
+          : [
+              {
+                label: this.title || '',
+                fill: true,
+                backgroundColor: gradientStroke,
+                borderColor: color,
+                borderWidth: 2,
+                borderDash: [],
+                borderDashOffset: 0.0,
+                pointBackgroundColor: color,
+                pointBorderColor: 'rgba(255,255,255,0)',
+                pointHoverBackgroundColor: color,
+                pointBorderWidth: 20,
+                pointHoverRadius: 4,
+                pointHoverBorderWidth: 15,
+                pointRadius: 4,
+                data: this.data || []
+              }
+            ]
+      },
+      this.extraOptions
+    );
+  }
+};
diff --git a/src/components/Charts/config.js b/src/components/Charts/config.js
new file mode 100644
index 0000000..8227a0d
--- /dev/null
+++ b/src/components/Charts/config.js
@@ -0,0 +1,222 @@
+
+export const basicOptions = {
+  maintainAspectRatio: false,
+  legend: {
+    display: false
+  },
+  responsive: true,
+};
+export let blueChartOptions = {
+  ...basicOptions,
+  tooltips: {
+    backgroundColor: '#f5f5f5',
+    titleFontColor: '#333',
+    bodyFontColor: '#666',
+    bodySpacing: 4,
+    xPadding: 12,
+    mode: "nearest",
+    intersect: 0,
+    position: "nearest"
+  },
+  scales: {
+    yAxes: [{
+      barPercentage: 1.6,
+      gridLines: {
+        drawBorder: false,
+        color: 'rgba(29,140,248,0.0)',
+        zeroLineColor: "transparent",
+      },
+      ticks: {
+        suggestedMin: 60,
+        suggestedMax: 125,
+        padding: 20,
+        fontColor: "#2380f7"
+      }
+    }],
+
+    xAxes: [{
+      barPercentage: 1.6,
+      gridLines: {
+        drawBorder: false,
+        color: 'rgba(29,140,248,0.1)',
+        zeroLineColor: "transparent",
+      },
+      ticks: {
+        padding: 20,
+        fontColor: "#2380f7"
+      }
+    }]
+  }
+}
+
+export let purpleChartOptions = {
+  ...basicOptions,
+  tooltips: {
+    backgroundColor: '#f5f5f5',
+    titleFontColor: '#333',
+    bodyFontColor: '#666',
+    bodySpacing: 4,
+    xPadding: 12,
+    mode: "nearest",
+    intersect: 0,
+    position: "nearest"
+  },
+  scales: {
+    yAxes: [{
+      barPercentage: 1.6,
+      gridLines: {
+        drawBorder: false,
+        color: 'rgba(29,140,248,0.0)',
+        zeroLineColor: "transparent",
+      },
+      ticks: {
+        suggestedMin: 60,
+        suggestedMax: 125,
+        padding: 20,
+        fontColor: "#9a9a9a"
+      }
+    }],
+
+    xAxes: [{
+      barPercentage: 1.6,
+      gridLines: {
+        drawBorder: false,
+        color: 'rgba(225,78,202,0.1)',
+        zeroLineColor: "transparent",
+      },
+      ticks: {
+        padding: 20,
+        fontColor: "#9a9a9a"
+      }
+    }]
+  }
+}
+
+export let orangeChartOptions = {
+  ...basicOptions,
+  tooltips: {
+    backgroundColor: '#f5f5f5',
+    titleFontColor: '#333',
+    bodyFontColor: '#666',
+    bodySpacing: 4,
+    xPadding: 12,
+    mode: "nearest",
+    intersect: 0,
+    position: "nearest"
+  },
+  scales: {
+    yAxes: [{
+      barPercentage: 1.6,
+      gridLines: {
+        drawBorder: false,
+        color: 'rgba(29,140,248,0.0)',
+        zeroLineColor: "transparent",
+      },
+      ticks: {
+        suggestedMin: 50,
+        suggestedMax: 110,
+        padding: 20,
+        fontColor: "#ff8a76"
+      }
+    }],
+
+    xAxes: [{
+      barPercentage: 1.6,
+      gridLines: {
+        drawBorder: false,
+        color: 'rgba(220,53,69,0.1)',
+        zeroLineColor: "transparent",
+      },
+      ticks: {
+        padding: 20,
+        fontColor: "#ff8a76"
+      }
+    }]
+  }
+
+}
+export let greenChartOptions = {
+  ...basicOptions,
+  tooltips: {
+    backgroundColor: '#f5f5f5',
+    titleFontColor: '#333',
+    bodyFontColor: '#666',
+    bodySpacing: 4,
+    xPadding: 12,
+    mode: "nearest",
+    intersect: 0,
+    position: "nearest"
+  },
+  scales: {
+    yAxes: [{
+      barPercentage: 1.6,
+      gridLines: {
+        drawBorder: false,
+        color: 'rgba(29,140,248,0.0)',
+        zeroLineColor: "transparent",
+      },
+      ticks: {
+        suggestedMin: 50,
+        suggestedMax: 125,
+        padding: 20,
+        fontColor: "#9e9e9e"
+      }
+    }],
+
+    xAxes: [{
+      barPercentage: 1.6,
+      gridLines: {
+        drawBorder: false,
+        color: 'rgba(0,242,195,0.1)',
+        zeroLineColor: "transparent",
+      },
+      ticks: {
+        padding: 20,
+        fontColor: "#9e9e9e"
+      }
+    }]
+  }
+}
+
+export let barChartOptions = {
+  ...basicOptions,
+  tooltips: {
+    backgroundColor: '#f5f5f5',
+    titleFontColor: '#333',
+    bodyFontColor: '#666',
+    bodySpacing: 4,
+    xPadding: 12,
+    mode: "nearest",
+    intersect: 0,
+    position: "nearest"
+  },
+  scales: {
+    yAxes: [{
+
+      gridLines: {
+        drawBorder: false,
+        color: 'rgba(29,140,248,0.1)',
+        zeroLineColor: "transparent",
+      },
+      ticks: {
+        suggestedMin: 60,
+        suggestedMax: 120,
+        padding: 20,
+        fontColor: "#9e9e9e"
+      }
+    }],
+    xAxes: [{
+
+      gridLines: {
+        drawBorder: false,
+        color: 'rgba(29,140,248,0.1)',
+        zeroLineColor: "transparent",
+      },
+      ticks: {
+        padding: 20,
+        fontColor: "#9e9e9e"
+      }
+    }]
+  }
+
+}
diff --git a/src/components/Charts/utils.js b/src/components/Charts/utils.js
new file mode 100644
index 0000000..f01e490
--- /dev/null
+++ b/src/components/Charts/utils.js
@@ -0,0 +1,11 @@
+export function hexToRGB(hex, alpha) {
+  const r = parseInt(hex.slice(1, 3), 16),
+    g = parseInt(hex.slice(3, 5), 16),
+    b = parseInt(hex.slice(5, 7), 16);
+
+  if (alpha) {
+    return `rgba(${r},${g},${b}, ${alpha})`;
+  } else {
+    return `rgb(${r},${g},${b})`;
+  }
+}
diff --git a/src/components/index.js b/src/components/index.js
index 2805b51..2b22499 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -6,7 +6,6 @@ import BaseButton from "./BaseButton";
 import BaseAlert from "./BaseAlert";
 
 import Card from "./Cards/Card.vue";
-import ChartCard from "./Cards/ChartCard.vue";
 import StatsCard from "./Cards/StatsCard.vue";
 
 import SidebarPlugin from "./SidebarPlugin/index";
@@ -14,7 +13,6 @@ import SidebarPlugin from "./SidebarPlugin/index";
 export {
   FormGroupInput,
   Card,
-  ChartCard,
   StatsCard,
   BaseTable,
   BaseDropdown,
diff --git a/yarn.lock b/yarn.lock
index ed74d42..4e3044f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1677,10 +1677,30 @@ chardet@^0.4.0:
   version "0.4.2"
   resolved "https://registry.yarnpkg.com/chardet/-/chardet-0.4.2.tgz#b5473b33dc97c424e5d98dc87d55d4d8a29c8bf2"
 
+chart.js@^2.7.2:
+  version "2.7.2"
+  resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-2.7.2.tgz#3c9fde4dc5b95608211bdefeda7e5d33dffa5714"
+  dependencies:
+    chartjs-color "^2.1.0"
+    moment "^2.10.2"
+
 chartist@^0.11.0:
   version "0.11.0"
   resolved "https://registry.yarnpkg.com/chartist/-/chartist-0.11.0.tgz#84ba5e05490d096d93dcfa9343ebc31ef6a3bd28"
 
+chartjs-color-string@^0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/chartjs-color-string/-/chartjs-color-string-0.5.0.tgz#8d3752d8581d86687c35bfe2cb80ac5213ceb8c1"
+  dependencies:
+    color-name "^1.0.0"
+
+chartjs-color@^2.1.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/chartjs-color/-/chartjs-color-2.2.0.tgz#84a2fb755787ed85c39dd6dd8c7b1d88429baeae"
+  dependencies:
+    chartjs-color-string "^0.5.0"
+    color-convert "^0.5.3"
+
 check-types@^7.3.0:
   version "7.4.0"
   resolved "https://registry.yarnpkg.com/check-types/-/check-types-7.4.0.tgz#0378ec1b9616ec71f774931a3c6516fad8c152f4"
@@ -1814,6 +1834,10 @@ collection-visit@^1.0.0:
     map-visit "^1.0.0"
     object-visit "^1.0.0"
 
+color-convert@^0.5.3:
+  version "0.5.3"
+  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-0.5.3.tgz#bdb6c69ce660fadffe0b0007cc447e1b9f7282bd"
+
 color-convert@^1.9.0:
   version "1.9.1"
   resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.1.tgz#c1261107aeb2f294ebffec9ed9ecad529a6097ed"
@@ -4681,6 +4705,10 @@ mkdirp@0.5.1, mkdirp@0.5.x, "mkdirp@>=0.5 0", mkdirp@^0.5.0, mkdirp@^0.5.1, mkdi
   dependencies:
     minimist "0.0.8"
 
+moment@^2.10.2:
+  version "2.22.2"
+  resolved "https://registry.yarnpkg.com/moment/-/moment-2.22.2.tgz#3c257f9839fc0e93ff53149632239eb90783ff66"
+
 move-concurrently@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/move-concurrently/-/move-concurrently-1.0.1.tgz#be2c005fda32e0b29af1f05d7c4b33214c701f92"
@@ -7219,6 +7247,10 @@ vm-browserify@0.0.4:
   dependencies:
     indexof "0.0.1"
 
+vue-chartjs@^3.4.0:
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/vue-chartjs/-/vue-chartjs-3.4.0.tgz#669e4453be0676605fc9290b3b581867ccd15c88"
+
 vue-eslint-parser@^2.0.3:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/vue-eslint-parser/-/vue-eslint-parser-2.0.3.tgz#c268c96c6d94cfe3d938a5f7593959b0ca3360d1"