From 46632515739539f5c5be82ce4972c84c2be5d949 Mon Sep 17 00:00:00 2001
From: woothu <32914662+woothu@users.noreply.github.com>
Date: Mon, 15 Apr 2019 15:09:35 +0200
Subject: [PATCH] feat: replace charts with charts built on coreui-vue-chartjs
 library

---
 package.json                                  |   3 +-
 src/views/Charts.vue                          |  38 ++--
 src/views/Dashboard.vue                       |  43 ++--
 src/views/charts/BarExample.vue               |  40 ----
 src/views/charts/CChartBarExample.vue         |  27 +++
 src/views/charts/CChartBarSimple.vue          |  69 +++++++
 src/views/charts/CChartDoughnutExample.vue    |  30 +++
 src/views/charts/CChartLineExample.vue        |  32 +++
 src/views/charts/CChartLineSimple.vue         | 125 ++++++++++++
 src/views/charts/CChartPieExample.vue         |  30 +++
 src/views/charts/CChartPolarAreaExample.vue   |  49 +++++
 ...adarExample.vue => CChartRadarExample.vue} |  47 +++--
 src/views/charts/CalloutChartExample.vue      |  75 +++++++
 src/views/charts/DoughnutExample.vue          |  24 ---
 src/views/charts/LineExample.vue              |  48 -----
 src/views/charts/MainChartExample.vue         | 191 ++++++++++++++++++
 src/views/charts/PieExample.vue               |  23 ---
 src/views/charts/PolarAreaExample.vue         |  48 -----
 src/views/charts/index.js                     |  19 ++
 src/views/dashboard/CalloutChartExample.vue   |  67 ------
 src/views/dashboard/CardBarChartExample.vue   |  45 -----
 src/views/dashboard/CardLine1ChartExample.vue |  72 -------
 src/views/dashboard/CardLine2ChartExample.vue |  73 -------
 src/views/dashboard/CardLine3ChartExample.vue |  53 -----
 src/views/dashboard/MainChartExample.vue      | 103 ----------
 src/views/dashboard/SocialBoxChartExample.vue |  70 -------
 src/views/widgets/Widgets.vue                 |  43 ++--
 src/views/widgets/WidgetsDropdown.vue         |  63 +++---
 src/views/widgets/WidgetsSocial.vue           |  52 ++---
 29 files changed, 788 insertions(+), 814 deletions(-)
 delete mode 100644 src/views/charts/BarExample.vue
 create mode 100644 src/views/charts/CChartBarExample.vue
 create mode 100644 src/views/charts/CChartBarSimple.vue
 create mode 100644 src/views/charts/CChartDoughnutExample.vue
 create mode 100644 src/views/charts/CChartLineExample.vue
 create mode 100644 src/views/charts/CChartLineSimple.vue
 create mode 100644 src/views/charts/CChartPieExample.vue
 create mode 100644 src/views/charts/CChartPolarAreaExample.vue
 rename src/views/charts/{RadarExample.vue => CChartRadarExample.vue} (53%)
 create mode 100644 src/views/charts/CalloutChartExample.vue
 delete mode 100644 src/views/charts/DoughnutExample.vue
 delete mode 100644 src/views/charts/LineExample.vue
 create mode 100644 src/views/charts/MainChartExample.vue
 delete mode 100644 src/views/charts/PieExample.vue
 delete mode 100644 src/views/charts/PolarAreaExample.vue
 create mode 100644 src/views/charts/index.js
 delete mode 100644 src/views/dashboard/CalloutChartExample.vue
 delete mode 100644 src/views/dashboard/CardBarChartExample.vue
 delete mode 100644 src/views/dashboard/CardLine1ChartExample.vue
 delete mode 100644 src/views/dashboard/CardLine2ChartExample.vue
 delete mode 100644 src/views/dashboard/CardLine3ChartExample.vue
 delete mode 100644 src/views/dashboard/MainChartExample.vue
 delete mode 100644 src/views/dashboard/SocialBoxChartExample.vue

diff --git a/package.json b/package.json
index fc8df6a3..4f030090 100644
--- a/package.json
+++ b/package.json
@@ -15,7 +15,8 @@
   },
   "dependencies": {
     "@coreui/coreui": "^2.1.6",
-    "@coreui/coreui-plugin-chartjs-custom-tooltips": "^1.2.0",
+    "@coreui/coreui-plugin-chartjs-custom-tooltips": "^1.3.0",
+    "@coreui/coreui-vue-chartjs": "file:../coreui-vue-chartjs",
     "@coreui/icons": "0.3.0",
     "@coreui/vue": "../coreui-vue",
     "babel-polyfill": "^6.26.0",
diff --git a/src/views/Charts.vue b/src/views/Charts.vue
index b82188ed..79436d11 100644
--- a/src/views/Charts.vue
+++ b/src/views/Charts.vue
@@ -1,57 +1,43 @@
 <template>
   <div class="animated fadeIn">
-    <CCardGroup columns class="card-columns">
+    <CCardGroup columns class="card-columns cols-2">
       <CCard headerHtml="Line Chart" bodyWrapper>
-        <LineExample/>
+        <CChartLineExample/>
       </CCard>
       <CCard headerHtml="Bar Chart" bodyWrapper>
-        <BarExample/>
+        <CChartBarExample/>
       </CCard>
       <CCard headerHtml="Doughnut Chart" bodyWrapper>
-        <DoughnutExample/>
+        <CChartDoughnutExample/>
       </CCard>
       <CCard headerHtml="Radar Chart" bodyWrapper>
-        <RadarExample/>
+        <CChartRadarExample/>
       </CCard>
       <CCard headerHtml="Pie Chart" bodyWrapper>
-        <PieExample/>
+        <CChartPieExample/>
       </CCard>
       <CCard headerHtml="Polar Area Chart" bodyWrapper>
-        <PolarAreaExample/>
+        <CChartPolarAreaExample/>
       </CCard>
       <CCard headerHtml="Simple line chart" bodyWrapper>
-        <CSimpleLineChart style="height:80px" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
-                     label='Sales' borderColor='success'/>
+        <CChartLineSimple borderColor="success" labels="months"/>
       </CCard>
       <CCard headerHtml="Simple pointed chart" bodyWrapper>
-        <CSimplePointedChart class='px-3' :data='[65, 59, 84, 84, 51, 55, 40]'
-                     :labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
-                     style='height:80px' label='Members' pointHoverColor='warning' borderColor='warning'/>
+        <CChartLineSimple pointed borderColor="warning"/>
       </CCard>
       <CCard headerHtml="Simple bar chart" bodyWrapper>
-        <CSimpleBarChart style="height:80px" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
-                    label='Sales' color='danger'/>
+        <CChartBarSimple backgroundColor="danger"/>
       </CCard>
     </CCardGroup>
   </div>
 </template>
 <script>
-import BarExample from './charts/BarExample'
-import LineExample from './charts/LineExample'
-import DoughnutExample from './charts/DoughnutExample'
-import RadarExample from './charts/RadarExample'
-import PieExample from './charts/PieExample'
-import PolarAreaExample from './charts/PolarAreaExample'
+import * as Charts from './charts/index.js'
 
 export default {
   name: 'Charts',
   components: {
-    BarExample,
-    LineExample,
-    DoughnutExample,
-    RadarExample,
-    PieExample,
-    PolarAreaExample
+    ...Charts
   }
 }
 </script>
diff --git a/src/views/Dashboard.vue b/src/views/Dashboard.vue
index 0b605359..d5ef1805 100644
--- a/src/views/Dashboard.vue
+++ b/src/views/Dashboard.vue
@@ -23,7 +23,7 @@
             </CButtonGroup>
           </CCol>
         </CRow>
-        <MainChartExample style="height:300px;margin-top:40px;" height="300"></MainChartExample>
+        <MainChartExample style="height:300px;margin-top:40px;"/>
       </CCardBody>
       <CCardFooter>
         <CRow class="text-center">
@@ -66,19 +66,29 @@
                   <CCallout variant="info">
                     <small class="text-muted">New Clients</small><br>
                     <strong class="h4">9,123</strong>
-                    <div :style="{ top: '-10px'}">
-                      <!--<CalloutChartExample :data="[35, 23, 56, 22, 97, 23, 64]" variant="#20a8d8" width="80" height="30" />-->
-                      <CalloutChartExample :data="[35, 23, 56, 22, 97, 23, 64]" variant="info" width="80" height="30" />
-                    </div>
                   </CCallout>
+                  <!-- <CCallout variant="info" class="d-inline">
+                    <div  class="d-inline">
+                      <small class="text-muted">New Clients</small><br>
+                      <strong class="h4">9,123</strong>
+                    </div>
+                    <div class="d-inline">
+                      <CChartLineSimple
+                        :data="[35, 23, 56, 22, 97, 23, 64]"
+                        borderColor="info"
+                        style="width:80px !important"
+                        :options="{ maintainAspectRatio: true, aspectRatio: 3 }"
+                      />
+                    </div>
+                  </CCallout> -->
                 </CCol>
                 <CCol sm="6">
                   <CCallout variant="danger">
                     <small class="text-muted">Recurring Clients</small><br>
                     <strong class="h4">22,643</strong>
-                    <div :style="{ top: '-10px'}">
+                    <!-- <div :style="{ top: '-10px'}">
                       <CalloutChartExample :data="[65, 59, 84, 84, 51, 55, 40]" variant="danger" width="80" height="30" />
-                    </div>
+                    </div> -->
                   </CCallout>
                 </CCol>
               </CRow>
@@ -176,18 +186,18 @@
                   <CCallout variant="warning">
                     <small class="text-muted">Pageviews</small><br>
                     <strong class="h4">78,623</strong>
-                    <div :style="{ top: '-10px'}">
+                    <!-- <div :style="{ top: '-10px'}">
                       <CalloutChartExample :data="[35, 23, 56, 22, 97, 23, 64]" variant="#f8cb00" width="80" height="30"/>
-                    </div>
+                    </div> -->
                   </CCallout>
                 </CCol>
                 <CCol sm="6">
                   <CCallout variant="success">
                     <small class="text-muted">Organic</small><br>
                     <strong class="h4">49,123</strong>
-                    <div :style="{ top: '-10px'}">
+                    <!-- <div :style="{ top: '-10px'}">
                       <CalloutChartExample :data="[65, 59, 84, 84, 51, 55, 40]" variant="#4dbd74" width="80" height="30" />
-                    </div>
+                    </div> -->
                   </CCallout>
                 </CCol>
               </CRow>
@@ -333,20 +343,21 @@
 </template>
 
 <script>
-import MainChartExample from './dashboard/MainChartExample'
+import MainChartExample from './charts/MainChartExample'
 import WidgetsDropdown from './widgets/WidgetsDropdown'
 import WidgetsSocial from './widgets/WidgetsSocial'
-import SocialBoxChartExample from './dashboard/SocialBoxChartExample'
-import CalloutChartExample from './dashboard/CalloutChartExample'
+import CalloutChartExample from './charts/CalloutChartExample'
+import CChartLineSimple from './charts/CChartLineSimple'
+
 
 export default {
   name: 'Dashboard',
   components: {
     MainChartExample,
-    SocialBoxChartExample,
     CalloutChartExample,
     WidgetsDropdown,
-    WidgetsSocial
+    WidgetsSocial,
+    CChartLineSimple
   },
   data: function () {
     return {
diff --git a/src/views/charts/BarExample.vue b/src/views/charts/BarExample.vue
deleted file mode 100644
index dd1414f7..00000000
--- a/src/views/charts/BarExample.vue
+++ /dev/null
@@ -1,40 +0,0 @@
-<script>
-import { Bar } from '@coreui/vue/src/extends/BaseCharts'
-import { CustomTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips'
-
-export default {
-  name: 'BarExample',
-  extends: Bar,
-  mounted () {
-    // Overwriting base render method with actual data.
-    this.renderChart(
-      {
-        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
-        datasets: [
-          {
-            label: 'GitHub Commits',
-            backgroundColor: '#f87979',
-            data: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 11]
-          }
-        ]
-      },
-      {
-        responsive: true,
-        maintainAspectRatio: true,
-        tooltips: {
-          enabled: false,
-          custom: CustomTooltips,
-          intersect: true,
-          mode: 'index',
-          position: 'nearest',
-          callbacks: {
-            labelColor: function (tooltipItem, chart) {
-              return { backgroundColor: chart.data.datasets[tooltipItem.datasetIndex].backgroundColor }
-            }
-          }
-        }
-      }
-    )
-  }
-}
-</script>
diff --git a/src/views/charts/CChartBarExample.vue b/src/views/charts/CChartBarExample.vue
new file mode 100644
index 00000000..daae013a
--- /dev/null
+++ b/src/views/charts/CChartBarExample.vue
@@ -0,0 +1,27 @@
+<template>
+  <CChartBar
+    :datasets="defaultDatasets"
+    labels="months"
+  />
+</template>
+
+<script>
+import { customTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips'
+import { CChartBar } from '@coreui/coreui-vue-chartjs'
+
+export default {
+  name: 'CChartBarExample',
+  components: { CChartBar },
+  computed: {
+    defaultDatasets () {
+      return [
+        {
+          label: 'GitHub Commits',
+          backgroundColor: '#f87979',
+          data: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 11]
+        }
+      ]
+    }
+  }
+}
+</script>
diff --git a/src/views/charts/CChartBarSimple.vue b/src/views/charts/CChartBarSimple.vue
new file mode 100644
index 00000000..46ed1cfc
--- /dev/null
+++ b/src/views/charts/CChartBarSimple.vue
@@ -0,0 +1,69 @@
+<template>
+  <CChartBar
+    :datasets="computedDatasets"
+    :options="computedOptions"
+    :labels="labels"
+  />
+</template>
+
+<script>
+import { CChartBar } from '@coreui/coreui-vue-chartjs'
+import { getColor, deepObjectsMerge } from '@coreui/coreui/dist/js/coreui-utilities'
+export default {
+  name: 'CChartBarSimple',
+  components: { CChartBar },
+  props: {
+    ...CChartBar.props,
+    backgroundColor: {
+      type: String,
+      default: 'rgba(0,0,0,.2)'
+    },
+    pointHoverBackgroundColor: String,
+    dataPoints: {
+      type: Array,
+      default: () => [10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]
+    },
+    label: {
+      type: String,
+      default: 'Sales'
+    },
+    pointed: Boolean
+  },
+  computed: {
+    defaultDatasets () {
+      return [
+        {
+          data: this.dataPoints,
+          backgroundColor: getColor(this.backgroundColor),
+          pointHoverBackgroundColor: getColor(this.pointHoverBackgroundColor),
+          label: this.label
+        }
+      ]
+    },
+    defaultOptions () {
+      return {
+        maintainAspectRatio: false,
+        legend: {
+          display: false
+        },
+        scales: {
+          xAxes: [{
+            display: false,
+            categoryPercentage: 1,
+            barPercentage: 0.5
+          }],
+          yAxes: [{
+            display: false
+          }]
+        }
+      }
+    },
+    computedDatasets () {
+      return deepObjectsMerge(this.defaultDatasets, this.datasets || {})
+    },
+    computedOptions () {
+      return deepObjectsMerge(this.defaultOptions, this.options || {})
+    }
+  }
+}
+</script>
diff --git a/src/views/charts/CChartDoughnutExample.vue b/src/views/charts/CChartDoughnutExample.vue
new file mode 100644
index 00000000..0e639a27
--- /dev/null
+++ b/src/views/charts/CChartDoughnutExample.vue
@@ -0,0 +1,30 @@
+<template>
+  <CChartDoughnut
+    :datasets="defaultDatasets"
+    :labels="['VueJs', 'EmberJs', 'ReactJs', 'AngularJs']"
+  />
+</template>
+
+<script>
+import { CChartDoughnut } from '@coreui/coreui-vue-chartjs'
+
+export default {
+  name: 'CChartDoughnutExample',
+  components: { CChartDoughnut },
+  computed: {
+    defaultDatasets () {
+      return [
+        {
+          backgroundColor: [
+            '#41B883',
+            '#E46651',
+            '#00D8FF',
+            '#DD1B16'
+          ],
+          data: [40, 20, 80, 10]
+        }
+      ]
+    }
+  }
+}
+</script>
diff --git a/src/views/charts/CChartLineExample.vue b/src/views/charts/CChartLineExample.vue
new file mode 100644
index 00000000..5b75e932
--- /dev/null
+++ b/src/views/charts/CChartLineExample.vue
@@ -0,0 +1,32 @@
+<template>
+  <CChartLine
+    :datasets="defaultDatasets"
+    labels="months"
+  />
+</template>
+
+<script>
+import { customTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips'
+import { CChartLine } from '@coreui/coreui-vue-chartjs'
+
+export default {
+  name: 'CChartLineExample',
+  components: { CChartLine },
+  computed: {
+    defaultDatasets () {
+      return [
+        {
+          label: 'Data One',
+          backgroundColor: 'rgb(228,102,81,0.9)',
+          data: [30, 39, 10, 50, 30, 70, 35]
+        },
+        {
+          label: 'Data Two',
+          backgroundColor: 'rgb(0,216,255,0.9)',
+          data: [39, 80, 40, 35, 40, 20, 45]
+        }
+      ]
+    }
+  }
+}
+</script>
diff --git a/src/views/charts/CChartLineSimple.vue b/src/views/charts/CChartLineSimple.vue
new file mode 100644
index 00000000..ebc51129
--- /dev/null
+++ b/src/views/charts/CChartLineSimple.vue
@@ -0,0 +1,125 @@
+<template>
+  <CChartLine
+    :datasets="computedDatasets"
+    :options="computedOptions"
+    :labels="labels"
+  />
+</template>
+
+<script>
+import { CChartLine } from '@coreui/coreui-vue-chartjs'
+import { getColor, deepObjectsMerge } from '@coreui/coreui/dist/js/coreui-utilities'
+export default {
+  name: 'CChartLineSimple',
+  components: { CChartLine },
+  props: {
+    ...CChartLine.props,
+    borderColor: {
+      type: String,
+      default: 'rgba(255,255,255,.55)'
+    },
+    backgroundColor: {
+      type: String,
+      default: 'transparent'
+    },
+    pointHoverBackgroundColor: String,
+    dataPoints: {
+      type: Array,
+      default: () => [10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]
+    },
+    label: {
+      type: String,
+      default: 'Sales'
+    },
+    pointed: Boolean
+  },
+  computed: {
+    defaultDatasets () {
+      return [
+        {
+          data: this.dataPoints,
+          borderColor: getColor(this.borderColor),
+          backgroundColor: getColor(this.backgroundColor),
+          pointHoverBackgroundColor: getColor(this.pointHoverBackgroundColor),
+          label: this.label
+        }
+      ]
+    },
+    pointedOptions () {
+      return {
+        scales: {
+          xAxes: [
+            {
+              gridLines: {
+                color: 'transparent',
+                zeroLineColor: 'transparent'
+              },
+              ticks: {
+                fontSize: 2,
+                fontColor: 'transparent'
+              }
+            }
+          ],
+          yAxes: [
+            {
+              display: false,
+              ticks: {
+                display: false,
+                min: Math.min.apply(Math, this.dataPoints) - 5,
+                max: Math.max.apply(Math, this.dataPoints) + 5
+              }
+            }
+          ]
+        },
+        elements: {
+          line: {
+            borderWidth: 1
+          },
+          point: {
+            radius: 4,
+            hitRadius: 10,
+            hoverRadius: 4
+          }
+        }
+      }
+    },
+    straightOptions () {
+      return {
+        scales: {
+          xAxes: [{
+            display: false
+          }],
+          yAxes: [{
+            display: false
+          }]
+        },
+        elements: {
+          line: {
+            borderWidth: 2
+          },
+          point: {
+            radius: 0,
+            hitRadius: 10,
+            hoverRadius: 4
+          }
+        }
+      }
+    },
+    defaultOptions () {
+      const options = this.pointed ? this.pointedOptions : this.straightOptions
+      return Object.assign({}, options, {
+        maintainAspectRatio: false,
+        legend: {
+          display: false
+        }
+      })
+    },
+    computedDatasets () {
+      return deepObjectsMerge(this.defaultDatasets, this.datasets || {})
+    },
+    computedOptions () {
+      return deepObjectsMerge(this.defaultOptions, this.options || {})
+    }
+  }
+}
+</script>
diff --git a/src/views/charts/CChartPieExample.vue b/src/views/charts/CChartPieExample.vue
new file mode 100644
index 00000000..9da82091
--- /dev/null
+++ b/src/views/charts/CChartPieExample.vue
@@ -0,0 +1,30 @@
+<template>
+  <CChartPie
+    :datasets="defaultDatasets"
+    :labels="['VueJs', 'EmberJs', 'ReactJs', 'AngularJs']"
+  />
+</template>
+
+<script>
+import { CChartPie } from '@coreui/coreui-vue-chartjs'
+
+export default {
+  name: 'CChartPieExample',
+  components: { CChartPie },
+  computed: {
+    defaultDatasets () {
+      return [
+        {
+          backgroundColor: [
+            '#41B883',
+            '#E46651',
+            '#00D8FF',
+            '#DD1B16'
+          ],
+          data: [40, 20, 80, 10]
+        }
+      ]
+    }
+  }
+}
+</script>
diff --git a/src/views/charts/CChartPolarAreaExample.vue b/src/views/charts/CChartPolarAreaExample.vue
new file mode 100644
index 00000000..ee9679ff
--- /dev/null
+++ b/src/views/charts/CChartPolarAreaExample.vue
@@ -0,0 +1,49 @@
+<template>
+  <CChartPolarArea
+    :datasets="defaultDatasets"
+    :options="defaultOptions"
+    :labels="[
+      'Eating', 'Drinking', 'Sleeping', 'Designing',
+      'Coding', 'Cycling', 'Running'
+    ]"
+  />
+</template>
+
+<script>
+import { customTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips'
+import { CChartPolarArea } from '@coreui/coreui-vue-chartjs'
+
+export default {
+  name: 'CChartPolarAreaExample',
+  components: { CChartPolarArea },
+  computed: {
+    defaultDatasets () {
+      return [
+        {
+          label: 'My First dataset',
+          backgroundColor: 'rgba(179,181,198,0.2)',
+          pointBackgroundColor: 'rgba(179,181,198,1)',
+          pointBorderColor: '#fff',
+          pointHoverBackgroundColor: 'rgba(179,181,198,1)',
+          pointHoverBorderColor: 'rgba(179,181,198,1)',
+          data: [65, 59, 90, 81, 56, 55, 40]
+        },
+        {
+          label: 'My Second dataset',
+          backgroundColor: 'rgba(255,99,132,0.2)',
+          pointBackgroundColor: 'rgba(255,99,132,1)',
+          pointBorderColor: '#fff',
+          pointHoverBackgroundColor: 'rgba(255,99,132,1)',
+          pointHoverBorderColor: 'rgba(255,99,132,1)',
+          data: [28, 48, 40, 19, 96, 27, 100]
+        }
+      ]
+    },
+    defaultOptions () {
+      return {
+        aspectRatio: 1.5
+      }
+    }
+  }
+}
+</script>
diff --git a/src/views/charts/RadarExample.vue b/src/views/charts/CChartRadarExample.vue
similarity index 53%
rename from src/views/charts/RadarExample.vue
rename to src/views/charts/CChartRadarExample.vue
index 533247c2..0d65f654 100644
--- a/src/views/charts/RadarExample.vue
+++ b/src/views/charts/CChartRadarExample.vue
@@ -1,13 +1,24 @@
+<template>
+  <CChartRadar
+    :datasets="defaultDatasets"
+    :options="defaultOptions"
+    :labels="[
+      'Eating', 'Drinking', 'Sleeping', 'Designing',
+      'Coding', 'Cycling', 'Running'
+    ]"
+  />
+</template>
+
 <script>
-import { Radar } from '@coreui/vue/src/extends/BaseCharts'
-import { CustomTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips'
+import { customTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips'
+import { CChartRadar } from '@coreui/coreui-vue-chartjs'
 
 export default {
-  extends: Radar,
-  mounted () {
-    this.renderChart({
-      labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'],
-      datasets: [
+  name: 'CChartRadarExample',
+  components: { CChartRadar },
+  computed: {
+    defaultDatasets () {
+      return [
         {
           label: '2017',
           backgroundColor: 'rgba(179,181,198,0.2)',
@@ -16,6 +27,7 @@ export default {
           pointBorderColor: '#fff',
           pointHoverBackgroundColor: '#fff',
           pointHoverBorderColor: 'rgba(179,181,198,1)',
+          tooltipLabelColor: 'rgba(179,181,198,1)',
           data: [65, 59, 90, 81, 56, 55, 40]
         },
         {
@@ -26,25 +38,16 @@ export default {
           pointBorderColor: '#fff',
           pointHoverBackgroundColor: '#fff',
           pointHoverBorderColor: 'rgba(255,99,132,1)',
+          tooltipLabelColor: 'rgba(255,99,132,1)',
           data: [28, 48, 40, 19, 96, 27, 100]
         }
       ]
-    }, {
-      responsive: true,
-      maintainAspectRatio: true,
-      tooltips: {
-        enabled: false,
-        custom: CustomTooltips,
-        intersect: true,
-        mode: 'index',
-        position: 'nearest',
-        callbacks: {
-          labelColor: function (tooltipItem, chart) {
-            return { backgroundColor: chart.data.datasets[tooltipItem.datasetIndex].borderColor }
-          }
-        }
+    },
+    defaultOptions () {
+      return {
+        aspectRatio: 1.5
       }
-    })
+    }
   }
 }
 </script>
diff --git a/src/views/charts/CalloutChartExample.vue b/src/views/charts/CalloutChartExample.vue
new file mode 100644
index 00000000..22c5b80a
--- /dev/null
+++ b/src/views/charts/CalloutChartExample.vue
@@ -0,0 +1,75 @@
+<template>
+  <CChartLine
+    :datasets="defaultDatasets"
+    :options="defaultOptions"
+    :labels="['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']"
+  />
+</template>
+
+<script>
+import { CChartLine } from '@coreui/coreui-vue-chartjs'
+import { customTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips'
+import { getColor } from '@coreui/coreui/dist/js/coreui-utilities'
+
+export default {
+  components: {
+    CChartLine
+  },
+  props: ['data', 'borderColor'],
+  computed: {
+    defaultDatasets () {
+      return [
+        {
+          backgroundColor: 'transparent',
+          borderColor: getColor(this.borderColor) || '#c2cfd6',
+          data: this.data
+        }
+      ]
+    },
+    defaultOptions () {
+      return {
+        tooltips: {
+          enabled: false,
+          custom: customTooltips,
+          intersect: true,
+          mode: 'index',
+          position: 'nearest',
+          callbacks: {
+            labelColor: function (tooltipItem, chart) {
+              return { backgroundColor: chart.data.datasets[tooltipItem.datasetIndex].backgroundColor }
+            }
+          }
+        },
+        scales: {
+          xAxes: [{
+            display: false
+          }],
+          yAxes: [{
+            display: false
+          }]
+        },
+        elements: {
+          line: {
+            borderWidth: 2
+          },
+          point: {
+            radius: 0,
+            hitRadius: 10,
+            hoverRadius: 4,
+            hoverBorderWidth: 3
+          }
+        },
+        legend: {
+          display: false
+        }
+      }
+    }
+  },
+
+  methods: {
+    getVariant (val, el) {
+      return val[0] === '#' ? val : getStyle(`--${val}`, el)
+    }
+  }
+}
+</script>
diff --git a/src/views/charts/DoughnutExample.vue b/src/views/charts/DoughnutExample.vue
deleted file mode 100644
index dc5cac6e..00000000
--- a/src/views/charts/DoughnutExample.vue
+++ /dev/null
@@ -1,24 +0,0 @@
-<script>
-import { Doughnut } from '@coreui/vue/src/extends/BaseCharts'
-
-export default {
-  name: 'DoughnutExample',
-  extends: Doughnut,
-  mounted () {
-    this.renderChart({
-      labels: ['VueJs', 'EmberJs', 'ReactJs', 'AngularJs'],
-      datasets: [
-        {
-          backgroundColor: [
-            '#41B883',
-            '#E46651',
-            '#00D8FF',
-            '#DD1B16'
-          ],
-          data: [40, 20, 80, 10]
-        }
-      ]
-    }, {responsive: true, maintainAspectRatio: true})
-  }
-}
-</script>
diff --git a/src/views/charts/LineExample.vue b/src/views/charts/LineExample.vue
deleted file mode 100644
index c4046930..00000000
--- a/src/views/charts/LineExample.vue
+++ /dev/null
@@ -1,48 +0,0 @@
-<script>
-import { Line } from '@coreui/vue/src/extends/BaseCharts'
-import { CustomTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips'
-import { hexToRgba } from '@coreui/coreui/dist/js/coreui-utilities'
-
-export default {
-  components: {
-    hexToRgba,
-    CustomTooltips
-  },
-  extends: Line,
-  mounted () {
-    this.renderChart(
-      {
-        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
-        datasets: [
-          {
-            label: 'Data One',
-            backgroundColor: hexToRgba('#E46651', 90),
-            data: [30, 39, 10, 50, 30, 70, 35]
-          },
-          {
-            label: 'Data Two',
-            backgroundColor: hexToRgba('#00D8FF', 90),
-            data: [39, 80, 40, 35, 40, 20, 45]
-          }
-        ]
-      },
-      {
-        responsive: true,
-        maintainAspectRatio: true,
-        tooltips: {
-          enabled: false,
-          custom: CustomTooltips,
-          intersect: true,
-          mode: 'index',
-          position: 'nearest',
-          callbacks: {
-            labelColor: function (tooltipItem, chart) {
-              return { backgroundColor: chart.data.datasets[tooltipItem.datasetIndex].backgroundColor }
-            }
-          }
-        }
-      }
-    )
-  }
-}
-</script>
diff --git a/src/views/charts/MainChartExample.vue b/src/views/charts/MainChartExample.vue
new file mode 100644
index 00000000..46902d85
--- /dev/null
+++ b/src/views/charts/MainChartExample.vue
@@ -0,0 +1,191 @@
+<template>
+  <CChartLine
+    :datasets="defaultDatasets"
+    :options="defaultOptions"
+    :labels="['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su']"
+  />
+</template>
+
+<script>
+import { CChartLine } from '@coreui/coreui-vue-chartjs'
+import { getColor, hexToRgba } from '@coreui/coreui/dist/js/coreui-utilities'
+import { customTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips'
+
+function random (min, max) {
+  return Math.floor(Math.random() * (max - min + 1) + min)
+}
+
+export default {
+  components: {
+    CChartLine
+  },
+  computed: {
+    defaultDatasets () {
+      const brandSuccess = getColor('success') || '#4dbd74'
+      const brandInfo = getColor('info') || '#20a8d8'
+      const brandDanger = getColor('danger') || '#f86c6b'
+
+      let elements = 27
+      const data1 = []
+      const data2 = []
+      const data3 = []
+
+      for (let i = 0; i <= elements; i++) {
+        data1.push(random(50, 200))
+        data2.push(random(80, 100))
+        data3.push(65)
+      }
+      return [
+        {
+          label: 'My First dataset',
+          backgroundColor: hexToRgba(brandInfo, 10),
+          borderColor: brandInfo,
+          pointHoverBackgroundColor: '#fff',
+          borderWidth: 2,
+          data: data1
+        },
+        {
+          label: 'My Second dataset',
+          backgroundColor: 'transparent',
+          borderColor: brandSuccess,
+          pointHoverBackgroundColor: '#fff',
+          borderWidth: 2,
+          data: data2
+        },
+        {
+          label: 'My Third dataset',
+          backgroundColor: 'transparent',
+          borderColor: brandDanger,
+          pointHoverBackgroundColor: '#fff',
+          borderWidth: 1,
+          borderDash: [8, 5],
+          data: data3
+        }
+      ]
+    },
+    defaultOptions () {
+      return {
+      
+        maintainAspectRatio: false,
+        legend: {
+          display: false
+        },
+        scales: {
+          xAxes: [{
+            gridLines: {
+              drawOnChartArea: false
+            }
+          }],
+          yAxes: [{
+            ticks: {
+              beginAtZero: true,
+              maxTicksLimit: 5,
+              stepSize: Math.ceil(250 / 5),
+              max: 250
+            },
+            gridLines: {
+              display: true
+            }
+          }]
+        },
+        elements: {
+          point: {
+            radius: 0,
+            hitRadius: 10,
+            hoverRadius: 4,
+            hoverBorderWidth: 3
+          }
+        }
+      }
+    }
+  },
+  // mounted () {
+  //   const brandSuccess = getStyle('--success') || '#4dbd74'
+  //   const brandInfo = getStyle('--info') || '#20a8d8'
+  //   const brandDanger = getStyle('--danger') || '#f86c6b'
+  //
+  //   let elements = 27
+  //   const data1 = []
+  //   const data2 = []
+  //   const data3 = []
+  //
+  //   for (let i = 0; i <= elements; i++) {
+  //     data1.push(random(50, 200))
+  //     data2.push(random(80, 100))
+  //     data3.push(65)
+  //   }
+  //   this.renderChart({
+  //     datasets: [
+  //       {
+  //         label: 'My First dataset',
+  //         backgroundColor: hexToRgba(brandInfo, 10),
+  //         borderColor: brandInfo,
+  //         pointHoverBackgroundColor: '#fff',
+  //         borderWidth: 2,
+  //         data: data1
+  //       },
+  //       {
+  //         label: 'My Second dataset',
+  //         backgroundColor: 'transparent',
+  //         borderColor: brandSuccess,
+  //         pointHoverBackgroundColor: '#fff',
+  //         borderWidth: 2,
+  //         data: data2
+  //       },
+  //       {
+  //         label: 'My Third dataset',
+  //         backgroundColor: 'transparent',
+  //         borderColor: brandDanger,
+  //         pointHoverBackgroundColor: '#fff',
+  //         borderWidth: 1,
+  //         borderDash: [8, 5],
+  //         data: data3
+  //       }
+  //     ]
+  //   }, {
+  //     tooltips: {
+  //       enabled: false,
+  //       custom: CustomTooltips,
+  //       intersect: true,
+  //       mode: 'index',
+  //       position: 'nearest',
+  //       callbacks: {
+  //         labelColor: function (tooltipItem, chart) {
+  //           return { backgroundColor: chart.data.datasets[tooltipItem.datasetIndex].borderColor }
+  //         }
+  //       }
+  //     },
+  //     maintainAspectRatio: false,
+  //     legend: {
+  //       display: false
+  //     },
+  //     scales: {
+  //       xAxes: [{
+  //         gridLines: {
+  //           drawOnChartArea: false
+  //         }
+  //       }],
+  //       yAxes: [{
+  //         ticks: {
+  //           beginAtZero: true,
+  //           maxTicksLimit: 5,
+  //           stepSize: Math.ceil(250 / 5),
+  //           max: 250
+  //         },
+  //         gridLines: {
+  //           display: true
+  //         }
+  //       }]
+  //     },
+  //     elements: {
+  //       point: {
+  //         radius: 0,
+  //         hitRadius: 10,
+  //         hoverRadius: 4,
+  //         hoverBorderWidth: 3
+  //       }
+  //     }
+  //   })
+  // }
+}
+</script>
diff --git a/src/views/charts/PieExample.vue b/src/views/charts/PieExample.vue
deleted file mode 100644
index 67a5ee57..00000000
--- a/src/views/charts/PieExample.vue
+++ /dev/null
@@ -1,23 +0,0 @@
-<script>
-import { Pie } from '@coreui/vue/src/extends/BaseCharts'
-
-export default {
-  extends: Pie,
-  mounted () {
-    this.renderChart({
-      labels: ['VueJs', 'EmberJs', 'ReactJs', 'AngularJs'],
-      datasets: [
-        {
-          backgroundColor: [
-            '#41B883',
-            '#E46651',
-            '#00D8FF',
-            '#DD1B16'
-          ],
-          data: [40, 20, 80, 10]
-        }
-      ]
-    }, {responsive: true, maintainAspectRatio: true})
-  }
-}
-</script>
diff --git a/src/views/charts/PolarAreaExample.vue b/src/views/charts/PolarAreaExample.vue
deleted file mode 100644
index aed2e8f4..00000000
--- a/src/views/charts/PolarAreaExample.vue
+++ /dev/null
@@ -1,48 +0,0 @@
-<script>
-import { PolarArea } from '@coreui/vue/src/extends/BaseCharts'
-import { CustomTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips'
-
-export default {
-  extends: PolarArea,
-  mounted () {
-    this.renderChart({
-      labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'],
-      datasets: [
-        {
-          label: 'My First dataset',
-          backgroundColor: 'rgba(179,181,198,0.2)',
-          pointBackgroundColor: 'rgba(179,181,198,1)',
-          pointBorderColor: '#fff',
-          pointHoverBackgroundColor: '#fff',
-          pointHoverBorderColor: 'rgba(179,181,198,1)',
-          data: [65, 59, 90, 81, 56, 55, 40]
-        },
-        {
-          label: 'My Second dataset',
-          backgroundColor: 'rgba(255,99,132,0.2)',
-          pointBackgroundColor: 'rgba(255,99,132,1)',
-          pointBorderColor: '#fff',
-          pointHoverBackgroundColor: '#fff',
-          pointHoverBorderColor: 'rgba(255,99,132,1)',
-          data: [28, 48, 40, 19, 96, 27, 100]
-        }
-      ]
-    }, {
-      responsive: true,
-      maintainAspectRatio: false,
-      tooltips: {
-        enabled: false,
-        custom: CustomTooltips,
-        intersect: true,
-        mode: 'index',
-        position: 'nearest',
-        callbacks: {
-          labelColor: function (tooltipItem, chart) {
-            return { backgroundColor: chart.data.datasets[tooltipItem.datasetIndex].backgroundColor }
-          }
-        }
-      }
-    })
-  }
-}
-</script>
diff --git a/src/views/charts/index.js b/src/views/charts/index.js
new file mode 100644
index 00000000..aba2fc9e
--- /dev/null
+++ b/src/views/charts/index.js
@@ -0,0 +1,19 @@
+import CChartLineSimple from './CChartLineSimple'
+import CChartBarSimple from './CChartBarSimple'
+import CChartLineExample from './CChartLineExample'
+import CChartBarExample from './CChartBarExample'
+import CChartDoughnutExample from './CChartDoughnutExample'
+import CChartRadarExample from './CChartRadarExample'
+import CChartPieExample from './CChartPieExample'
+import CChartPolarAreaExample from './CChartPolarAreaExample'
+
+export {
+  CChartLineSimple,
+  CChartBarSimple,
+  CChartLineExample,
+  CChartBarExample,
+  CChartDoughnutExample,
+  CChartRadarExample,
+  CChartPieExample,
+  CChartPolarAreaExample
+}
diff --git a/src/views/dashboard/CalloutChartExample.vue b/src/views/dashboard/CalloutChartExample.vue
deleted file mode 100644
index c8212bde..00000000
--- a/src/views/dashboard/CalloutChartExample.vue
+++ /dev/null
@@ -1,67 +0,0 @@
-<script>
-import { Line } from '@coreui/vue/src/extends/BaseCharts'
-import { CustomTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips'
-import { getStyle } from '@coreui/coreui/dist/js/coreui-utilities'
-
-export default {
-  components: {
-    CustomTooltips
-  },
-  extends: Line,
-  props: ['data', 'height', 'width', 'variant'],
-  mounted () {
-    this.renderChart({
-      labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
-      datasets: [
-        {
-          backgroundColor: 'transparent',
-          borderColor: this.getVariant(this.variant) || '#c2cfd6',
-          data: this.data
-        }
-      ]
-    }, {
-      responsive: true,
-      tooltips: {
-        enabled: false,
-        custom: CustomTooltips,
-        intersect: true,
-        mode: 'index',
-        position: 'nearest',
-        callbacks: {
-          labelColor: function (tooltipItem, chart) {
-            return { backgroundColor: chart.data.datasets[tooltipItem.datasetIndex].borderColor }
-          }
-        }
-      },
-      maintainAspectRatio: true,
-      scales: {
-        xAxes: [{
-          display: false
-        }],
-        yAxes: [{
-          display: false
-        }]
-      },
-      elements: {
-        line: {
-          borderWidth: 2
-        },
-        point: {
-          radius: 0,
-          hitRadius: 10,
-          hoverRadius: 4,
-          hoverBorderWidth: 3
-        }
-      },
-      legend: {
-        display: false
-      }
-    })
-  },
-  methods: {
-    getVariant (val, el) {
-      return val[0] === '#' ? val : getStyle(`--${val}`, el)
-    }
-  }
-}
-</script>
diff --git a/src/views/dashboard/CardBarChartExample.vue b/src/views/dashboard/CardBarChartExample.vue
deleted file mode 100644
index 408fe2ad..00000000
--- a/src/views/dashboard/CardBarChartExample.vue
+++ /dev/null
@@ -1,45 +0,0 @@
-<script>
-import { Bar } from '@coreui/vue/src/extends/BaseCharts'
-import { CustomTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips'
-
-export default {
-  extends: Bar,
-  props: ['height'],
-  mounted () {
-    const datasets4 = [
-      {
-        label: 'My First dataset',
-        backgroundColor: 'rgba(255,255,255,.3)',
-        borderColor: 'transparent',
-        data: [78, 81, 80, 45, 34, 12, 40, 75, 34, 89, 32, 68, 54, 72, 18, 98]
-      }
-    ]
-    this.renderChart(
-      {
-        labels: ['', '', '', '', '', '', '', '', '', '', '', '', '', '', '', ''],
-        datasets: datasets4
-      },
-      {
-        tooltips: {
-          enabled: false,
-          custom: CustomTooltips
-        },
-        maintainAspectRatio: false,
-        legend: {
-          display: false
-        },
-        scales: {
-          xAxes: [{
-            display: false,
-            categoryPercentage: 1,
-            barPercentage: 0.5
-          }],
-          yAxes: [{
-            display: false
-          }]
-        }
-      }
-    )
-  }
-}
-</script>
diff --git a/src/views/dashboard/CardLine1ChartExample.vue b/src/views/dashboard/CardLine1ChartExample.vue
deleted file mode 100644
index d1d45359..00000000
--- a/src/views/dashboard/CardLine1ChartExample.vue
+++ /dev/null
@@ -1,72 +0,0 @@
-<script>
-import { Line } from '@coreui/vue/src/extends/BaseCharts'
-import { CustomTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips'
-import { getStyle } from '@coreui/coreui/dist/js/coreui-utilities'
-
-export default {
-  extends: Line,
-  props: ['height', 'width'],
-  mounted () {
-    const brandPrimary = getStyle('--primary') || '#20a8d8'
-    const datasets1 = [
-      {
-        label: 'My First dataset',
-        backgroundColor: brandPrimary,
-        borderColor: 'rgba(255,255,255,.55)',
-        data: [65, 59, 84, 84, 51, 55, 40]
-      }
-    ]
-
-    this.renderChart(
-      {
-        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
-        datasets: datasets1
-      },
-      {
-        tooltips: {
-          enabled: false,
-          custom: CustomTooltips
-        },
-        maintainAspectRatio: false,
-        legend: {
-          display: false
-        },
-        scales: {
-          xAxes: [
-            {
-              gridLines: {
-                color: 'transparent',
-                zeroLineColor: 'transparent'
-              },
-              ticks: {
-                fontSize: 2,
-                fontColor: 'transparent'
-              }
-            }
-          ],
-          yAxes: [
-            {
-              display: false,
-              ticks: {
-                display: false,
-                min: Math.min.apply(Math, datasets1[0].data) - 5,
-                max: Math.max.apply(Math, datasets1[0].data) + 5
-              }
-            }
-          ]
-        },
-        elements: {
-          line: {
-            borderWidth: 1
-          },
-          point: {
-            radius: 4,
-            hitRadius: 10,
-            hoverRadius: 4
-          }
-        }
-      }
-    )
-  }
-}
-</script>
diff --git a/src/views/dashboard/CardLine2ChartExample.vue b/src/views/dashboard/CardLine2ChartExample.vue
deleted file mode 100644
index f83268df..00000000
--- a/src/views/dashboard/CardLine2ChartExample.vue
+++ /dev/null
@@ -1,73 +0,0 @@
-<script>
-import { Line } from '@coreui/vue/src/extends/BaseCharts'
-import { CustomTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips'
-import { getStyle } from '@coreui/coreui/dist/js/coreui-utilities'
-
-export default {
-  extends: Line,
-  props: ['height', 'width'],
-  mounted () {
-    const brandInfo = getStyle('--light-blue') || '#63c2de'
-    const datasets2 = [
-      {
-        label: 'My First dataset',
-        backgroundColor: brandInfo,
-        borderColor: 'rgba(255,255,255,.55)',
-        data: [1, 18, 9, 17, 34, 22, 11]
-      }
-    ]
-
-    this.renderChart(
-      {
-        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
-        datasets: datasets2
-      },
-      {
-        tooltips: {
-          enabled: false,
-          custom: CustomTooltips
-        },
-        maintainAspectRatio: false,
-        legend: {
-          display: false
-        },
-        scales: {
-          xAxes: [
-            {
-              gridLines: {
-                color: 'transparent',
-                zeroLineColor: 'transparent'
-              },
-              ticks: {
-                fontSize: 2,
-                fontColor: 'transparent'
-              }
-            }
-          ],
-          yAxes: [
-            {
-              display: false,
-              ticks: {
-                display: false,
-                min: Math.min.apply(Math, datasets2[0].data) - 5,
-                max: Math.max.apply(Math, datasets2[0].data) + 5
-              }
-            }
-          ]
-        },
-        elements: {
-          line: {
-            tension: 0.00001,
-            borderWidth: 1
-          },
-          point: {
-            radius: 4,
-            hitRadius: 10,
-            hoverRadius: 4
-          }
-        }
-      }
-    )
-  }
-}
-</script>
diff --git a/src/views/dashboard/CardLine3ChartExample.vue b/src/views/dashboard/CardLine3ChartExample.vue
deleted file mode 100644
index a080fade..00000000
--- a/src/views/dashboard/CardLine3ChartExample.vue
+++ /dev/null
@@ -1,53 +0,0 @@
-<script>
-import { Line } from '@coreui/vue/src/extends/BaseCharts'
-import { CustomTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips'
-
-export default {
-  extends: Line,
-  props: ['height', 'width'],
-  mounted () {
-    const datasets3 = [
-      {
-        label: 'My First dataset',
-        backgroundColor: 'rgba(255,255,255,.2)',
-        borderColor: 'rgba(255,255,255,.55)',
-        data: [78, 81, 80, 45, 34, 12, 40]
-      }
-    ]
-    this.renderChart(
-      {
-        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
-        datasets: datasets3
-      },
-      {
-        tooltips: {
-          enabled: false,
-          custom: CustomTooltips
-        },
-        maintainAspectRatio: false,
-        legend: {
-          display: false
-        },
-        scales: {
-          xAxes: [{
-            display: false
-          }],
-          yAxes: [{
-            display: false
-          }]
-        },
-        elements: {
-          line: {
-            borderWidth: 2
-          },
-          point: {
-            radius: 0,
-            hitRadius: 10,
-            hoverRadius: 4
-          }
-        }
-      }
-    )
-  }
-}
-</script>
diff --git a/src/views/dashboard/MainChartExample.vue b/src/views/dashboard/MainChartExample.vue
deleted file mode 100644
index b801d4e9..00000000
--- a/src/views/dashboard/MainChartExample.vue
+++ /dev/null
@@ -1,103 +0,0 @@
-<script>
-import { Line } from '@coreui/vue/src/extends/BaseCharts'
-import { getStyle, hexToRgba } from '@coreui/coreui/dist/js/coreui-utilities'
-import { CustomTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips'
-
-function random (min, max) {
-  return Math.floor(Math.random() * (max - min + 1) + min)
-}
-
-export default {
-  extends: Line,
-  props: ['height'],
-  mounted () {
-    const brandSuccess = getStyle('--success') || '#4dbd74'
-    const brandInfo = getStyle('--info') || '#20a8d8'
-    const brandDanger = getStyle('--danger') || '#f86c6b'
-
-    let elements = 27
-    const data1 = []
-    const data2 = []
-    const data3 = []
-
-    for (let i = 0; i <= elements; i++) {
-      data1.push(random(50, 200))
-      data2.push(random(80, 100))
-      data3.push(65)
-    }
-    this.renderChart({
-      labels: ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'],
-      datasets: [
-        {
-          label: 'My First dataset',
-          backgroundColor: hexToRgba(brandInfo, 10),
-          borderColor: brandInfo,
-          pointHoverBackgroundColor: '#fff',
-          borderWidth: 2,
-          data: data1
-        },
-        {
-          label: 'My Second dataset',
-          backgroundColor: 'transparent',
-          borderColor: brandSuccess,
-          pointHoverBackgroundColor: '#fff',
-          borderWidth: 2,
-          data: data2
-        },
-        {
-          label: 'My Third dataset',
-          backgroundColor: 'transparent',
-          borderColor: brandDanger,
-          pointHoverBackgroundColor: '#fff',
-          borderWidth: 1,
-          borderDash: [8, 5],
-          data: data3
-        }
-      ]
-    }, {
-      tooltips: {
-        enabled: false,
-        custom: CustomTooltips,
-        intersect: true,
-        mode: 'index',
-        position: 'nearest',
-        callbacks: {
-          labelColor: function (tooltipItem, chart) {
-            return { backgroundColor: chart.data.datasets[tooltipItem.datasetIndex].borderColor }
-          }
-        }
-      },
-      maintainAspectRatio: false,
-      legend: {
-        display: false
-      },
-      scales: {
-        xAxes: [{
-          gridLines: {
-            drawOnChartArea: false
-          }
-        }],
-        yAxes: [{
-          ticks: {
-            beginAtZero: true,
-            maxTicksLimit: 5,
-            stepSize: Math.ceil(250 / 5),
-            max: 250
-          },
-          gridLines: {
-            display: true
-          }
-        }]
-      },
-      elements: {
-        point: {
-          radius: 0,
-          hitRadius: 10,
-          hoverRadius: 4,
-          hoverBorderWidth: 3
-        }
-      }
-    })
-  }
-}
-</script>
diff --git a/src/views/dashboard/SocialBoxChartExample.vue b/src/views/dashboard/SocialBoxChartExample.vue
deleted file mode 100644
index bc699467..00000000
--- a/src/views/dashboard/SocialBoxChartExample.vue
+++ /dev/null
@@ -1,70 +0,0 @@
-<script>
-import { Line } from '@coreui/vue/src/extends/BaseCharts'
-import { CustomTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips'
-
-export default {
-  name: 'SocialBoxChartExample',
-  extends: Line,
-  props: {
-    data: {
-      type: Array,
-      default: () => [0, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]
-    },
-    height: {
-      type: String,
-      default: '100'
-    },
-    label:{
-      type: String,
-      default: 'label|string'
-    },
-    labels:{
-      type: Array,
-      default () {
-        return(['January', 'February', 'March', 'April', 'May', 'June', 'July','August','September','October','November','December'])
-      }
-    }
-  },
-  mounted () {
-    this.renderChart({
-      labels: this.labels,
-      datasets: [
-        {
-          label: this.label,
-          backgroundColor: 'rgba(255,255,255,.1)',
-          borderColor: 'rgba(255,255,255,.55)',
-          pointHoverBackgroundColor: '#fff',
-          borderWidth: 2,
-          data: this.data
-        }
-      ]
-    }, {
-      tooltips: {
-        enabled: false,
-        custom: CustomTooltips
-      },
-      responsive: true,
-      maintainAspectRatio: false,
-      legend: {
-        display: false
-      },
-      scales: {
-        xAxes: [{
-          display: false
-        }],
-        yAxes: [{
-          display: false
-        }]
-      },
-      elements: {
-        point: {
-          radius: 0,
-          hitRadius: 10,
-          hoverRadius: 4,
-          hoverBorderWidth: 3
-        }
-      }
-    })
-  }
-}
-</script>
diff --git a/src/views/widgets/Widgets.vue b/src/views/widgets/Widgets.vue
index 4db976fa..977daa29 100644
--- a/src/views/widgets/Widgets.vue
+++ b/src/views/widgets/Widgets.vue
@@ -264,70 +264,58 @@
     <CRow>
       <CCol sm="6" lg="3">
         <CWidgetSmallText rightHeader='SALE' rightFooter='Today 6:43 AM' leftHeader='$1.890,65' leftFooter='+432,50 (15,78%)'>
-          <CSimpleLineChart style="height:40px" chartId="CWidgetSmallText_line1" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
-          <CSimpleBarChart style="height:40px"
-                           :data="[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]"
-                           label="Sales"
-          />
+          <CChartLineSimple style="height:40px"/>
+          <CChartBarSimple style="height:40px"/>
         </CWidgetSmallText>
       </CCol>
       <CCol sm="6" lg="3">
         <CWidgetSmallText variant='success' rightHeader='SALE' rightFooter='Today 6:43 AM' leftHeader='$1.890,65' leftFooter='+432,50 (15,78%)'>
-          <CSimpleLineChart style="height:40px" chartId="CWidgetSmallText_line2" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
-          <CSimpleBarChart style="height:40px" chartId="CWidgetSmallText_bar2" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
+          <CChartLineSimple style="height:40px"/>
+          <CChartBarSimple style="height:40px"/>
         </CWidgetSmallText>
       </CCol>
       <CCol sm="6" lg="3">
         <CWidgetSmallText variant='danger' rightHeader='SALE' rightFooter='Today 6:43 AM' leftHeader='$1.890,65' leftFooter='+432,50 (15,78%)'>
-          <CSimpleLineChart style="height:40px" chartId="CWidgetSmallText_line3" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
-          <CSimpleBarChart style="height:40px" chartId="CWidgetSmallText_bar3" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
+          <CChartLineSimple style="height:40px"/>
+          <CChartBarSimple style="height:40px"/>
         </CWidgetSmallText>
       </CCol>
       <CCol sm="6" lg="3">
         <CWidgetSmallText variant='warning' rightHeader='SALE' rightFooter='Today 6:43 AM' leftHeader='$1.890,65' leftFooter='+432,50 (15,78%)'>
-          <CSimpleLineChart style="height:40px" chartId="CWidgetSmallText_line4" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
-          <CSimpleBarChart style="height:40px" chartId="CWidgetSmallText_bar4" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
+          <CChartLineSimple style="height:40px"/>
+          <CChartBarSimple style="height:40px"/>
         </CWidgetSmallText>
       </CCol>
     </CRow>
     <CRow>
       <CCol sm="4" lg="2">
         <CWidgetSimple header='title' text='1,123'>
-          <CSimpleLineChart style="height:40px" chartId="CWidgetSimple_1" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
-                       label='Sales' borderColor='danger'/>
+          <CChartLineSimple style="height:40px" borderColor="danger"/>
         </CWidgetSimple>
       </CCol>
       <CCol sm="4" lg="2">
         <CWidgetSimple header='title' text='1,123'>
-          <CSimpleLineChart style="height:40px" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
-                       label='Sales' borderColor='primary'/>
+          <CChartLineSimple style="height:40px" borderColor="primary"/>
         </CWidgetSimple>
       </CCol>
       <CCol sm="4" lg="2">
         <CWidgetSimple header='title' text='1,123'>
-                       <CSimpleLineChart style="height:40px"
-                                        :data="[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]"
-                                        label="Sales"
-                                        borderColor="success"
-                       />
+          <CChartLineSimple style="height:40px" borderColor="success"/>
         </CWidgetSimple>
       </CCol>
       <CCol sm="4" lg="2">
         <CWidgetSimple  header='title' text='1,123'>
-          <CSimpleBarChart style="height:40px" chartId="CWidgetSimple_4" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
-                      label='Sales' color='danger'/>
+          <CChartBarSimple style="height:40px" backgroundColor="danger"/>
         </CWidgetSimple>
       </CCol>
       <CCol sm="4" lg="2">
         <CWidgetSimple  header='title' text='1,123'>
-          <CSimpleBarChart style="height:40px" chartId="CWidgetSimple_5" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
-                      label='Sales' color='primary'/>
+          <CChartBarSimple style="height:40px" backgroundColor="primary"/>
         </CWidgetSimple>
       </CCol>
       <CCol sm="4" lg="2">
         <CWidgetSimple  header='title' text='1,123'>
-          <CSimpleBarChart style="height:40px"  :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
-                      label='Sales' color='success'/>
+          <CChartBarSimple style="height:40px" backgroundColor="success"/>
         </CWidgetSimple>
       </CCol>
     </CRow>
@@ -337,10 +325,13 @@
 <script>
 import WidgetsSocial from './WidgetsSocial'
 import WidgetsDropdown from './WidgetsDropdown'
+import { CChartLineSimple, CChartBarSimple } from '../charts/index.js'
 
 export default {
   name: 'Widgets',
   components: {
+    CChartLineSimple,
+    CChartBarSimple,
     WidgetsSocial,
     WidgetsDropdown
   }
diff --git a/src/views/widgets/WidgetsDropdown.vue b/src/views/widgets/WidgetsDropdown.vue
index 69f17d24..0526b537 100644
--- a/src/views/widgets/WidgetsDropdown.vue
+++ b/src/views/widgets/WidgetsDropdown.vue
@@ -15,13 +15,14 @@
             <CDropdownItem disabled>Disabled action</CDropdownItem>
           </CDropdown>
         </template>
-        <CSimplePointedChart
+        <CChartLineSimple
+          pointed
           class="px-3"
-          :data="[65, 59, 84, 84, 51, 55, 40]"
-          :labels="months"
           style="height:70px"
+          :dataPoints="[65, 59, 84, 84, 51, 55, 40]"
+          backgroundColor="primary"
           label="Members"
-          pointHoverColor="primary"
+          labels="months"
         />
       </CWidgetDropdown>
     </CCol>
@@ -41,14 +42,15 @@
             <CDropdownItem disabled>Disabled action</CDropdownItem>
           </CDropdown>
         </template>
-        <CSimplePointedChart
+        <CChartLineSimple
+          pointed
           class="px-3"
-          :data="[1, 18, 9, 17, 34, 22, 11]"
-          :labels="months"
           style="height:70px"
-          label="Members"
+          :dataPoints="[1, 18, 9, 17, 34, 22, 11]"
+          backgroundColor="info"
           :options="{ elements: { line: { tension: 0.00001 }}}"
-          pointHoverColor="info"
+          label="Members"
+          labels="months"
         />
       </CWidgetDropdown>
     </CCol>
@@ -72,17 +74,15 @@
             <CDropdownItem disabled>Disabled action</CDropdownItem>
           </CDropdown>
         </template>
-
-        <CSimpleLineChart
-          chartId="CWidgetDropdown_3"
-          :data="[78, 81, 80, 45, 34, 12, 40]"
-          :labels="months"
-          style="height:70px"
-          color="rgba(255,255,255,.2)"
-          label="Members"
-          :options="{elements: {line: {borderWidth: 2.5}}}"
-          pointHoverColor="warning"
-        />
+          <CChartLineSimple
+            style="height:70px"
+            backgroundColor="rgba(255,255,255,.2)"
+            :dataPoints="[78, 81, 80, 45, 34, 12, 40]"
+            :options="{ elements: { line: { borderWidth: 2.5 }}}"
+            pointHoverBackgroundColor="warning"
+            label="Members"
+            labels="months"
+          />
       </CWidgetDropdown>
     </CCol>
     <CCol sm="6" lg="3">
@@ -105,13 +105,11 @@
             <CDropdownItem disabled>Disabled action</CDropdownItem>
           </CDropdown>
         </template>
-
-        <CSimpleBarChart
-          chartId="CWidgetDropdown_4"
-          :data="[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]"
-          label="Members"
-          color="rgb(250, 152, 152)"
+        <CChartBarSimple
           style="height:70px"
+          backgroundColor="rgb(250, 152, 152)"
+          label="Members"
+          labels="months"
         />
       </CWidgetDropdown>
     </CCol>
@@ -119,12 +117,15 @@
 </template>
 
 <script>
+import { CChartLineSimple, CChartBarSimple } from '../charts/index.js'
+
 export default {
   name: 'WidgetsDropdown',
-  data () {
-    return {
-      months: ['January', 'February', 'March', 'April', 'May', 'June', 'July']
-    }
-  }
+  // data () {
+  //   return {
+  //     months: ['January', 'February', 'March', 'April', 'May', 'June', 'July']
+  //   }
+  // },
+  components: { CChartLineSimple, CChartBarSimple }
 }
 </script>
diff --git a/src/views/widgets/WidgetsSocial.vue b/src/views/widgets/WidgetsSocial.vue
index 7b21c5a8..b4b9844f 100644
--- a/src/views/widgets/WidgetsSocial.vue
+++ b/src/views/widgets/WidgetsSocial.vue
@@ -1,6 +1,6 @@
-<template functional>
+<template>
   <CRow>
-    <template v-if="!props.noCharts">
+    <template v-if="!noCharts">
       <CCol md="3" sm="6">
         <CWidgetSocial
           variant="facebook"
@@ -9,13 +9,12 @@
           leftHeader="459"
           leftFooter="feeds"
         >
-          <CSimpleLineChart
-            chartId="facebook"
-            :data="[65, 59, 84, 84, 51, 55, 40]"
-            label="Friends"
-            :labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
+          <CChartLineSimple
             style="height:100px"
-            color="rgba(255,255,255,.1)"
+            backgroundColor="rgba(255,255,255,.1)"
+            :dataPoints="[65, 59, 84, 84, 51, 55, 40]"
+            label="Friends"
+            labels="months"
           />
         </CWidgetSocial>
        </CCol>
@@ -27,13 +26,12 @@
           leftHeader="1.792"
           leftFooter="tweets"
         >
-          <CSimpleLineChart
-            chartId="twitter"
-            :data="[1, 13, 9, 17, 34, 41, 38]"
-            label="Followers"
-            :labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
+          <CChartLineSimple
             style="height:100px"
-            color="rgba(255,255,255,.1)"
+            backgroundColor="rgba(255,255,255,.1)"
+            :dataPoints="[1, 13, 9, 17, 34, 41, 38]"
+            label="Followers"
+            labels="months"
           />
         </CWidgetSocial>
        </CCol>
@@ -45,13 +43,12 @@
           leftHeader="292"
           leftFooter="feeds"
         >
-          <CSimpleLineChart
-            chartId="linkedIn"
-            :data="[78, 81, 80, 45, 34, 12, 40]"
-            label="Contracts"
-            :labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
+          <CChartLineSimple
             style="height:100px"
-            color="rgba(255,255,255,.1)"
+            backgroundColor="rgba(255,255,255,.1)"
+            :dataPoints="[78, 81, 80, 45, 34, 12, 40]"
+            label="Contracts"
+            labels="months"
           />
         </CWidgetSocial>
        </CCol>
@@ -63,13 +60,12 @@
           leftHeader="92"
           leftFooter="circles"
         >
-          <CSimpleLineChart
-            chartId="google-plus"
-            :data="[35, 23, 56, 22, 97, 23, 64]"
-            label="Followers"
-            :labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
+          <CChartLineSimple
             style="height:100px"
-            color="rgba(255,255,255,.1)"
+            backgroundColor="rgba(255,255,255,.1)"
+            :dataPoints="[35, 23, 56, 22, 97, 23, 64]"
+            label="Followers"
+            labels="months"
           />
         </CWidgetSocial>
       </CCol>
@@ -117,8 +113,12 @@
 </template>
 
 <script>
+import { CChartLineSimple } from '../charts/index.js'
 export default {
   name: 'WidgetsSocial',
+  components: {
+    CChartLineSimple
+  },
   props: {
     noCharts: Boolean
   }