From c4d5ff886cffbe35b310679ecd42a20389b9e821 Mon Sep 17 00:00:00 2001
From: xidedix <xidedix@users.noreply.github.com>
Date: Fri, 25 May 2018 17:47:07 +0200
Subject: [PATCH] refactor(charts): add CustomTooltips, add chartId prop

---
 src/utils/getStyle.js                         |  10 ++
 src/views/Charts.vue                          |  14 +--
 src/views/Dashboard.vue                       |  26 ++---
 src/views/charts/BarExample.vue               |  37 ++++--
 src/views/charts/DoughnutExample.vue          |   2 +-
 src/views/charts/LineExample.vue              |  47 ++++++--
 src/views/charts/PieExample.vue               |   2 +-
 src/views/charts/PolarAreaExample.vue         |  18 ++-
 src/views/charts/RadarExample.vue             |  22 +++-
 src/views/dashboard/CalloutChartExample.vue   |  24 ++--
 src/views/dashboard/CardBarChartExample.vue   |  61 +++++-----
 src/views/dashboard/CardLine1ChartExample.vue | 107 +++++++++--------
 src/views/dashboard/CardLine2ChartExample.vue | 108 ++++++++++--------
 src/views/dashboard/CardLine3ChartExample.vue |  71 ++++++------
 src/views/dashboard/MainChartExample.vue      |  46 ++++----
 src/views/dashboard/SocialBoxChartExample.vue |   5 +
 16 files changed, 371 insertions(+), 229 deletions(-)
 create mode 100644 src/utils/getStyle.js

diff --git a/src/utils/getStyle.js b/src/utils/getStyle.js
new file mode 100644
index 00000000..efc89f21
--- /dev/null
+++ b/src/utils/getStyle.js
@@ -0,0 +1,10 @@
+// todo
+// temp getStyle fix for IE
+const getStyle = (prop, node) => {
+  const root = node || document.querySelector(':root')
+  const value = window.getComputedStyle(root).getPropertyValue(prop).trim()
+  // console.log('utils/getStyle', value)
+  return value
+}
+
+export default getStyle
diff --git a/src/views/Charts.vue b/src/views/Charts.vue
index fbca1689..bcea281d 100644
--- a/src/views/Charts.vue
+++ b/src/views/Charts.vue
@@ -1,34 +1,34 @@
 <template>
   <div class="animated fadeIn">
-    <b-card-group columns class="card-columns cols-2">
+    <b-card-group columns class="card-columns">
       <b-card header="Line Chart">
         <div class="chart-wrapper">
-          <line-example/>
+          <line-example chartId="chart-line-01"/>
         </div>
       </b-card>
       <b-card header="Bar Chart">
         <div class="chart-wrapper">
-          <bar-example/>
+          <bar-example chartId="chart-bar-01"/>
         </div>
       </b-card>
       <b-card header="Doughnut Chart">
         <div class="chart-wrapper">
-          <doughnut-example/>
+          <doughnut-example chartId="chart-doughnut-01"/>
         </div>
       </b-card>
       <b-card header="Radar Chart">
         <div class="chart-wrapper">
-          <radar-example/>
+          <radar-example chartId="chart-radar-01"/>
         </div>
       </b-card>
       <b-card header="Pie Chart">
         <div class="chart-wrapper">
-          <pie-example/>
+          <pie-example chartId="chart-pie-01"/>
         </div>
       </b-card>
       <b-card header="Polar Area Chart">
         <div class="chart-wrapper">
-          <polar-area-example/>
+          <polar-area-example chartId="chart-polar-area-01"/>
         </div>
       </b-card>
     </b-card-group>
diff --git a/src/views/Dashboard.vue b/src/views/Dashboard.vue
index 8b855dec..50826734 100644
--- a/src/views/Dashboard.vue
+++ b/src/views/Dashboard.vue
@@ -16,7 +16,7 @@
             <h4 class="mb-0">9.823</h4>
             <p>Members online</p>
           </b-card-body>
-          <card-line1-chart-example class="chart-wrapper px-3" style="height:70px;" height="70"/>
+          <card-line1-chart-example chartId="card-chart-01" class="chart-wrapper px-3" style="height:70px;" height="70"/>
         </b-card>
       </b-col>
       <b-col sm="6" lg="3">
@@ -34,7 +34,7 @@
             <h4 class="mb-0">9.823</h4>
             <p>Members online</p>
           </b-card-body>
-          <card-line2-chart-example class="chart-wrapper px-3" style="height:70px;" height="70"/>
+          <card-line2-chart-example chartId="card-chart-02" class="chart-wrapper px-3" style="height:70px;" height="70"/>
         </b-card>
       </b-col>
       <b-col sm="6" lg="3">
@@ -52,7 +52,7 @@
             <h4 class="mb-0">9.823</h4>
             <p>Members online</p>
           </b-card-body>
-          <card-line3-chart-example class="chart-wrapper" style="height:70px;" height="70"/>
+          <card-line3-chart-example chartId="card-chart-03" class="chart-wrapper" style="height:70px;" height="70"/>
         </b-card>
       </b-col>
       <b-col sm="6" lg="3">
@@ -70,7 +70,7 @@
             <h4 class="mb-0">9.823</h4>
             <p>Members online</p>
           </b-card-body>
-          <card-bar-chart-example class="chart-wrapper px-3" style="height:70px;" height="70"/>
+          <card-bar-chart-example chartId="card-chart-04" class="chart-wrapper px-3" style="height:70px;" height="70"/>
         </b-card>
       </b-col>
     </b-row>
@@ -92,7 +92,7 @@
           </b-button-toolbar>
         </b-col>
       </b-row>
-      <main-chart-example class="chart-wrapper" style="height:300px;margin-top:40px;" height="300"></main-chart-example>
+      <main-chart-example chartId="main-chart-01" class="chart-wrapper" style="height:300px;margin-top:40px;" height="300"></main-chart-example>
       <div slot="footer">
         <b-row class="text-center">
           <b-col class="mb-sm-2 mb-0">
@@ -129,7 +129,7 @@
           <div class="brand-card-header bg-facebook">
             <i class="fa fa-facebook"></i>
             <div class="chart-wrapper">
-              <social-box-chart-example :data="[65, 59, 84, 84, 51, 55, 40]" height="90"/>
+              <social-box-chart-example chartId="box-chart-01" :data="[65, 59, 84, 84, 51, 55, 40]" height="90"/>
             </div>
           </div>
           <div class="brand-card-body">
@@ -149,7 +149,7 @@
           <div class="brand-card-header bg-twitter">
             <i class="fa fa-twitter"></i>
             <div class="chart-wrapper">
-              <social-box-chart-example :data="[1, 13, 9, 17, 34, 41, 38]" height="90"/>
+              <social-box-chart-example chartId="box-chart-02" :data="[1, 13, 9, 17, 34, 41, 38]" height="90"/>
             </div>
           </div>
           <div class="brand-card-body">
@@ -169,7 +169,7 @@
           <div class="brand-card-header bg-linkedin">
             <i class="fa fa-linkedin"></i>
             <div class="chart-wrapper">
-              <social-box-chart-example :data="[78, 81, 80, 45, 34, 12, 40]" height="90"/>
+              <social-box-chart-example chartId="box-chart-03" :data="[78, 81, 80, 45, 34, 12, 40]" height="90"/>
             </div>
           </div>
           <div class="brand-card-body">
@@ -189,7 +189,7 @@
           <div class="brand-card-header bg-google-plus">
             <i class="fa fa-google-plus"></i>
             <div class="chart-wrapper">
-              <social-box-chart-example :data="[35, 23, 56, 22, 97, 23, 64]" height="90"/>
+              <social-box-chart-example chartId="box-chart-04" :data="[35, 23, 56, 22, 97, 23, 64]" height="90"/>
             </div>
           </div>
           <div class="brand-card-body">
@@ -217,7 +217,7 @@
                     <strong class="h4">9,123</strong>
                     <div class="chart-wrapper" :style="{ top: '-10px'}">
                       <!--<callout-chart-example :data="[35, 23, 56, 22, 97, 23, 64]" variant="#20a8d8" width="80" height="30" />-->
-                      <callout-chart-example :data="[35, 23, 56, 22, 97, 23, 64]" variant="info" width="80" height="30" />
+                      <callout-chart-example chartId="callout-chart-01" :data="[35, 23, 56, 22, 97, 23, 64]" variant="info" width="80" height="30" />
                     </div>
                   </Callout>
                 </b-col>
@@ -226,7 +226,7 @@
                     <small class="text-muted">Recurring Clients</small><br>
                     <strong class="h4">22,643</strong>
                     <div class="chart-wrapper" :style="{ top: '-10px'}">
-                      <callout-chart-example :data="[65, 59, 84, 84, 51, 55, 40]" variant="danger" width="80" height="30" />
+                      <callout-chart-example chartId="callout-chart-02" :data="[65, 59, 84, 84, 51, 55, 40]" variant="danger" width="80" height="30" />
                     </div>
                   </Callout>
                 </b-col>
@@ -326,7 +326,7 @@
                     <small class="text-muted">Pageviews</small><br>
                     <strong class="h4">78,623</strong>
                     <div class="chart-wrapper" :style="{ top: '-10px'}">
-                      <callout-chart-example :data="[35, 23, 56, 22, 97, 23, 64]" variant="#f8cb00" width="80" height="30"/>
+                      <callout-chart-example chartId="callout-chart-03" :data="[35, 23, 56, 22, 97, 23, 64]" variant="#f8cb00" width="80" height="30"/>
                     </div>
                   </Callout>
                 </b-col>
@@ -335,7 +335,7 @@
                     <small class="text-muted">Organic</small><br>
                     <strong class="h4">49,123</strong>
                     <div class="chart-wrapper" :style="{ top: '-10px'}">
-                      <callout-chart-example :data="[65, 59, 84, 84, 51, 55, 40]" variant="#4dbd74" width="80" height="30" />
+                      <callout-chart-example chartId="callout-chart-04" :data="[65, 59, 84, 84, 51, 55, 40]" variant="#4dbd74" width="80" height="30" />
                     </div>
                   </Callout>
                 </b-col>
diff --git a/src/views/charts/BarExample.vue b/src/views/charts/BarExample.vue
index ac8bbd22..8e99818f 100644
--- a/src/views/charts/BarExample.vue
+++ b/src/views/charts/BarExample.vue
@@ -1,20 +1,39 @@
 <script>
 import { Bar } from 'vue-chartjs'
+import { CustomTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips'
 
 export default {
   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]
+    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/DoughnutExample.vue b/src/views/charts/DoughnutExample.vue
index 2cd26b56..65f9bcba 100644
--- a/src/views/charts/DoughnutExample.vue
+++ b/src/views/charts/DoughnutExample.vue
@@ -17,7 +17,7 @@ export default {
           data: [40, 20, 80, 10]
         }
       ]
-    }, {responsive: true, maintainAspectRatio: false})
+    }, {responsive: true, maintainAspectRatio: true})
   }
 }
 </script>
diff --git a/src/views/charts/LineExample.vue b/src/views/charts/LineExample.vue
index efd444af..6e1e3d0e 100644
--- a/src/views/charts/LineExample.vue
+++ b/src/views/charts/LineExample.vue
@@ -1,19 +1,48 @@
 <script>
 import { Line } from 'vue-chartjs'
+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: '#f87979',
-          data: [40, 39, 10, 40, 39, 80, 40]
+    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 }
+            }
+          }
         }
-      ]
-    }, {responsive: true, maintainAspectRatio: false})
+      }
+    )
   }
 }
 </script>
diff --git a/src/views/charts/PieExample.vue b/src/views/charts/PieExample.vue
index 2b68b466..3e7d1273 100644
--- a/src/views/charts/PieExample.vue
+++ b/src/views/charts/PieExample.vue
@@ -17,7 +17,7 @@ export default {
           data: [40, 20, 80, 10]
         }
       ]
-    }, {responsive: true, maintainAspectRatio: false})
+    }, {responsive: true, maintainAspectRatio: true})
   }
 }
 </script>
diff --git a/src/views/charts/PolarAreaExample.vue b/src/views/charts/PolarAreaExample.vue
index d86a725e..027d9330 100644
--- a/src/views/charts/PolarAreaExample.vue
+++ b/src/views/charts/PolarAreaExample.vue
@@ -1,5 +1,6 @@
 <script>
 import { PolarArea } from 'vue-chartjs'
+import { CustomTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips'
 
 export default {
   extends: PolarArea,
@@ -26,7 +27,22 @@ export default {
           data: [28, 48, 40, 19, 96, 27, 100]
         }
       ]
-    }, {responsive: true, maintainAspectRatio: false})
+    }, {
+      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/RadarExample.vue b/src/views/charts/RadarExample.vue
index 61d2da14..94671868 100644
--- a/src/views/charts/RadarExample.vue
+++ b/src/views/charts/RadarExample.vue
@@ -1,5 +1,6 @@
 <script>
 import { Radar } from 'vue-chartjs'
+import { CustomTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips'
 
 export default {
   extends: Radar,
@@ -8,7 +9,7 @@ export default {
       labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'],
       datasets: [
         {
-          label: 'My First dataset',
+          label: '2017',
           backgroundColor: 'rgba(179,181,198,0.2)',
           borderColor: 'rgba(179,181,198,1)',
           pointBackgroundColor: 'rgba(179,181,198,1)',
@@ -18,7 +19,7 @@ export default {
           data: [65, 59, 90, 81, 56, 55, 40]
         },
         {
-          label: 'My Second dataset',
+          label: '2018',
           backgroundColor: 'rgba(255,99,132,0.2)',
           borderColor: 'rgba(255,99,132,1)',
           pointBackgroundColor: 'rgba(255,99,132,1)',
@@ -28,7 +29,22 @@ export default {
           data: [28, 48, 40, 19, 96, 27, 100]
         }
       ]
-    }, {responsive: true, maintainAspectRatio: false})
+    }, {
+      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 }
+          }
+        }
+      }
+    })
   }
 }
 </script>
diff --git a/src/views/dashboard/CalloutChartExample.vue b/src/views/dashboard/CalloutChartExample.vue
index 3b037040..93d86d79 100644
--- a/src/views/dashboard/CalloutChartExample.vue
+++ b/src/views/dashboard/CalloutChartExample.vue
@@ -1,16 +1,12 @@
 <script>
 import { Line } from 'vue-chartjs'
-import { getStyle } from '@coreui/coreui/dist/js/coreui-utilities'
-
-// const brandPrimary = '#20a8d8'
-// const brandSuccess = '#4dbd74'
-// const brandInfo = '#63c2de'
-// const brandWarning = '#f8cb00'
-// const brandDanger = '#f86c6b'
+import { CustomTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips'
+// import { getStyle } from '@coreui/coreui/dist/js/coreui-utilities'
+import getStyle from '../../utils/getStyle'
 
 export default {
   components: {
-    getStyle
+    CustomTooltips
   },
   extends: Line,
   props: ['data', 'height', 'width', 'variant'],
@@ -26,6 +22,18 @@ export default {
       ]
     }, {
       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: [{
diff --git a/src/views/dashboard/CardBarChartExample.vue b/src/views/dashboard/CardBarChartExample.vue
index c69d1319..6b99888b 100644
--- a/src/views/dashboard/CardBarChartExample.vue
+++ b/src/views/dashboard/CardBarChartExample.vue
@@ -1,38 +1,45 @@
 <script>
 import { Bar } from 'vue-chartjs'
-
-const datasets = [
-  {
-    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]
-  }
-]
+import { CustomTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips'
 
 export default {
   extends: Bar,
   props: ['height'],
   mounted () {
-    this.renderChart({
-      labels: ['', '', '', '', '', '', '', '', '', '', '', '', '', '', '', ''],
-      datasets: datasets
-    }, {
-      maintainAspectRatio: false,
-      legend: {
-        display: false
-      },
-      scales: {
-        xAxes: [{
-          display: false,
-          categoryPercentage: 1,
-          barPercentage: 0.5
-        }],
-        yAxes: [{
-          display: false
-        }]
+    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
index 15cc5366..5ae493a1 100644
--- a/src/views/dashboard/CardLine1ChartExample.vue
+++ b/src/views/dashboard/CardLine1ChartExample.vue
@@ -1,62 +1,73 @@
 <script>
 import { Line } from 'vue-chartjs'
-// import { getStyle } from '@coreui/coreui/js/src/utilities'
-
-const brandPrimary = '#20a8d8'
-// const brandPrimary = getStyle('--primary')
-
-const datasets1 = [
-  {
-    label: 'My First dataset',
-    backgroundColor: brandPrimary,
-    borderColor: 'rgba(255,255,255,.55)',
-    data: [65, 59, 84, 84, 51, 55, 40]
-  }
-]
+import { CustomTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips'
+// import { getStyle } from '@coreui/coreui/dist/js/coreui-utilities'
+import getStyle from '../../utils/getStyle'
 
 export default {
   extends: Line,
   props: ['height', 'width'],
   mounted () {
-    this.renderChart({
-      labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
-      datasets: datasets1
-    }, {
-      maintainAspectRatio: false,
-      legend: {
-        display: false
+    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
       },
-      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
+      {
+        tooltips: {
+          enabled: false,
+          custom: CustomTooltips
         },
-        point: {
-          radius: 4,
-          hitRadius: 10,
-          hoverRadius: 4
+        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
index de2a1797..7e9e8f20 100644
--- a/src/views/dashboard/CardLine2ChartExample.vue
+++ b/src/views/dashboard/CardLine2ChartExample.vue
@@ -1,64 +1,74 @@
 <script>
 import { Line } from 'vue-chartjs'
-// import { getStyle } from '@coreui/coreui/js/src/utilities'
-
-const brandInfo = '#63c2de'
-// const brandInfo = getStyle('--light-blue')
-
-const datasets2 = [
-  {
-    label: 'My First dataset',
-    backgroundColor: brandInfo,
-    borderColor: 'rgba(255,255,255,.55)',
-    data: [1, 18, 9, 17, 34, 22, 11]
-  }
-]
+import { CustomTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips'
+// import { getStyle } from '@coreui/coreui/dist/js/coreui-utilities'
+import getStyle from '../../utils/getStyle'
 
 export default {
   extends: Line,
   props: ['height', 'width'],
   mounted () {
-    this.renderChart({
-      labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
-      datasets: datasets2
-    }, {
-      maintainAspectRatio: false,
-      legend: {
-        display: false
-      },
-      scales: {
-        xAxes: [{
-          gridLines: {
-            color: 'transparent',
-            zeroLineColor: 'transparent'
-          },
-          ticks: {
-            fontSize: 2,
-            fontColor: 'transparent'
-          }
+    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]
+      }
+    ]
 
-        }],
-        yAxes: [{
-          display: false,
-          ticks: {
-            display: false,
-            min: Math.min.apply(Math, datasets2[0].data) - 5,
-            max: Math.max.apply(Math, datasets2[0].data) + 5
-          }
-        }]
+    this.renderChart(
+      {
+        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+        datasets: datasets2
       },
-      elements: {
-        line: {
-          tension: 0.00001,
-          borderWidth: 1
+      {
+        tooltips: {
+          enabled: false,
+          custom: CustomTooltips
         },
-        point: {
-          radius: 4,
-          hitRadius: 10,
-          hoverRadius: 4
+        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
index 493b1878..266f7b8b 100644
--- a/src/views/dashboard/CardLine3ChartExample.vue
+++ b/src/views/dashboard/CardLine3ChartExample.vue
@@ -1,46 +1,53 @@
 <script>
 import { Line } from 'vue-chartjs'
-
-const datasets = [
-  {
-    label: 'My First dataset',
-    backgroundColor: 'rgba(255,255,255,.2)',
-    borderColor: 'rgba(255,255,255,.55)',
-    data: [78, 81, 80, 45, 34, 12, 40]
-  }
-]
+import { CustomTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips'
 
 export default {
   extends: Line,
   props: ['height', 'width'],
   mounted () {
-    this.renderChart({
-      labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
-      datasets: datasets
-    }, {
-      maintainAspectRatio: false,
-      legend: {
-        display: false
+    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
       },
-      scales: {
-        xAxes: [{
-          display: false
-        }],
-        yAxes: [{
-          display: false
-        }]
-      },
-      elements: {
-        line: {
-          borderWidth: 2
+      {
+        tooltips: {
+          enabled: false,
+          custom: CustomTooltips
         },
-        point: {
-          radius: 0,
-          hitRadius: 10,
-          hoverRadius: 4
+        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
index fa090ba7..09c82578 100644
--- a/src/views/dashboard/MainChartExample.vue
+++ b/src/views/dashboard/MainChartExample.vue
@@ -1,21 +1,9 @@
 <script>
 import { Line } from 'vue-chartjs'
-import { getStyle } from '@coreui/coreui/js/src/utilities'
-
-// const brandPrimary = '#20a8d8'
-// const brandSuccess = '#4dbd74'
-// const brandInfo = '#63c2de'
-// const brandDanger = '#f86c6b'
-
-function convertHex (hex, opacity) {
-  hex = hex.replace('#', '')
-  const r = parseInt(hex.substring(0, 2), 16)
-  const g = parseInt(hex.substring(2, 4), 16)
-  const b = parseInt(hex.substring(4, 6), 16)
-
-  // const result = 'rgba(' + r + ',' + g + ',' + b + ',' + opacity / 100 + ')'
-  return `rgba(${r}, ${g}, ${b}, ${opacity / 100})`
-}
+// import { getStyle, hexToRgba } from '@coreui/coreui/dist/js/coreui-utilities'
+import { hexToRgba } from '@coreui/coreui/dist/js/coreui-utilities'
+import { CustomTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips'
+import getStyle from '../../utils/getStyle'
 
 function random (min, max) {
   return Math.floor(Math.random() * (max - min + 1) + min)
@@ -25,6 +13,10 @@ 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 = []
@@ -36,12 +28,12 @@ export default {
       data3.push(65)
     }
     this.renderChart({
-      labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S', 'M', 'T', 'W', 'T', 'F', 'S', 'S', 'M', 'T', 'W', 'T', 'F', 'S', 'S', 'M', 'T', 'W', 'T', 'F', 'S', 'S'],
+      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: convertHex(getStyle('--info'), 10),
-          borderColor: getStyle('--info'),
+          backgroundColor: hexToRgba(brandInfo, 10),
+          borderColor: brandInfo,
           pointHoverBackgroundColor: '#fff',
           borderWidth: 2,
           data: data1
@@ -49,7 +41,7 @@ export default {
         {
           label: 'My Second dataset',
           backgroundColor: 'transparent',
-          borderColor: getStyle('--success'),
+          borderColor: brandSuccess,
           pointHoverBackgroundColor: '#fff',
           borderWidth: 2,
           data: data2
@@ -57,7 +49,7 @@ export default {
         {
           label: 'My Third dataset',
           backgroundColor: 'transparent',
-          borderColor: getStyle('--danger'),
+          borderColor: brandDanger,
           pointHoverBackgroundColor: '#fff',
           borderWidth: 1,
           borderDash: [8, 5],
@@ -65,6 +57,18 @@ export default {
         }
       ]
     }, {
+      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
diff --git a/src/views/dashboard/SocialBoxChartExample.vue b/src/views/dashboard/SocialBoxChartExample.vue
index 9c03f4bf..d5b9dc1a 100644
--- a/src/views/dashboard/SocialBoxChartExample.vue
+++ b/src/views/dashboard/SocialBoxChartExample.vue
@@ -1,5 +1,6 @@
 <script>
 import { Line } from 'vue-chartjs'
+import { CustomTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips'
 
 export default {
   extends: Line,
@@ -26,6 +27,10 @@ export default {
         }
       ]
     }, {
+      tooltips: {
+        enabled: false,
+        custom: CustomTooltips
+      },
       responsive: true,
       maintainAspectRatio: false,
       legend: {