refactor(charts): add CustomTooltips, add chartId prop

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

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>

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>

src/views/charts/BarExample.vue

@@ -1,11 +1,13 @@
 <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({
+    this.renderChart(
+      {
         labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
         datasets: [
           {
@@ -14,7 +16,24 @@ export default {
             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>

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>

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({
+    this.renderChart(
+      {
         labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
         datasets: [
           {
             label: 'Data One',
-          backgroundColor: '#f87979',
+            backgroundColor: hexToRgba('#E46651', 90),
-          data: [40, 39, 10, 40, 39, 80, 40]
+            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: 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].backgroundColor }
+            }
+          }
+        }
+      }
+    )
   }
 }
 </script>

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>

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>

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>

src/views/dashboard/CalloutChartExample.vue

@@ -1,16 +1,12 @@
 <script>
 import { Line } from 'vue-chartjs'
-import { getStyle } from '@coreui/coreui/dist/js/coreui-utilities'
+import { CustomTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips'
-
+// import { getStyle } from '@coreui/coreui/dist/js/coreui-utilities'
-// const brandPrimary = '#20a8d8'
+import getStyle from '../../utils/getStyle'
-// const brandSuccess = '#4dbd74'
-// const brandInfo = '#63c2de'
-// const brandWarning = '#f8cb00'
-// const brandDanger = '#f86c6b'
 
 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: [{

src/views/dashboard/CardBarChartExample.vue

@@ -1,23 +1,29 @@
 <script>
 import { Bar } from 'vue-chartjs'
+import { CustomTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips'
 
-const datasets = [
+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(
-export default {
+      {
-  extends: Bar,
-  props: ['height'],
-  mounted () {
-    this.renderChart({
         labels: ['', '', '', '', '', '', '', '', '', '', '', '', '', '', '', ''],
-      datasets: datasets
+        datasets: datasets4
-    }, {
+      },
+      {
+        tooltips: {
+          enabled: false,
+          custom: CustomTooltips
+        },
         maintainAspectRatio: false,
         legend: {
           display: false
@@ -32,7 +38,8 @@ export default {
             display: false
           }]
         }
-    })
+      }
+    )
   }
 }
 </script>

src/views/dashboard/CardLine1ChartExample.vue

@@ -1,33 +1,40 @@
 <script>
 import { Line } from 'vue-chartjs'
-// import { getStyle } from '@coreui/coreui/js/src/utilities'
+import { CustomTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips'
+// import { getStyle } from '@coreui/coreui/dist/js/coreui-utilities'
+import getStyle from '../../utils/getStyle'
 
-const brandPrimary = '#20a8d8'
+export default {
-// const brandPrimary = getStyle('--primary')
+  extends: Line,
-
+  props: ['height', 'width'],
-const datasets1 = [
+  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]
       }
-]
+    ]
 
-export default {
+    this.renderChart(
-  extends: Line,
+      {
-  props: ['height', 'width'],
-  mounted () {
-    this.renderChart({
         labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
         datasets: datasets1
-    }, {
+      },
+      {
+        tooltips: {
+          enabled: false,
+          custom: CustomTooltips
+        },
         maintainAspectRatio: false,
         legend: {
           display: false
         },
         scales: {
-        xAxes: [{
+          xAxes: [
+            {
               gridLines: {
                 color: 'transparent',
                 zeroLineColor: 'transparent'
@@ -36,15 +43,18 @@ export default {
                 fontSize: 2,
                 fontColor: 'transparent'
               }
-        }],
+            }
-        yAxes: [{
+          ],
+          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: {
@@ -56,7 +66,8 @@ export default {
             hoverRadius: 4
           }
         }
-    })
+      }
+    )
   }
 }
 </script>

src/views/dashboard/CardLine2ChartExample.vue

@@ -1,33 +1,40 @@
 <script>
 import { Line } from 'vue-chartjs'
-// import { getStyle } from '@coreui/coreui/js/src/utilities'
+import { CustomTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips'
+// import { getStyle } from '@coreui/coreui/dist/js/coreui-utilities'
+import getStyle from '../../utils/getStyle'
 
-const brandInfo = '#63c2de'
+export default {
-// const brandInfo = getStyle('--light-blue')
+  extends: Line,
-
+  props: ['height', 'width'],
-const datasets2 = [
+  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]
       }
-]
+    ]
 
-export default {
+    this.renderChart(
-  extends: Line,
+      {
-  props: ['height', 'width'],
-  mounted () {
-    this.renderChart({
         labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
         datasets: datasets2
-    }, {
+      },
+      {
+        tooltips: {
+          enabled: false,
+          custom: CustomTooltips
+        },
         maintainAspectRatio: false,
         legend: {
           display: false
         },
         scales: {
-        xAxes: [{
+          xAxes: [
+            {
               gridLines: {
                 color: 'transparent',
                 zeroLineColor: 'transparent'
@@ -36,16 +43,18 @@ export default {
                 fontSize: 2,
                 fontColor: 'transparent'
               }
-
+            }
-        }],
+          ],
-        yAxes: [{
+          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: {
@@ -58,7 +67,8 @@ export default {
             hoverRadius: 4
           }
         }
-    })
+      }
+    )
   }
 }
 </script>

src/views/dashboard/CardLine3ChartExample.vue

@@ -1,23 +1,29 @@
 <script>
 import { Line } from 'vue-chartjs'
+import { CustomTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips'
 
-const datasets = [
+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(
-export default {
+      {
-  extends: Line,
-  props: ['height', 'width'],
-  mounted () {
-    this.renderChart({
         labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
-      datasets: datasets
+        datasets: datasets3
-    }, {
+      },
+      {
+        tooltips: {
+          enabled: false,
+          custom: CustomTooltips
+        },
         maintainAspectRatio: false,
         legend: {
           display: false
@@ -40,7 +46,8 @@ export default {
             hoverRadius: 4
           }
         }
-    })
+      }
+    )
   }
 }
 </script>

src/views/dashboard/MainChartExample.vue

@@ -1,21 +1,9 @@
 <script>
 import { Line } from 'vue-chartjs'
-import { getStyle } from '@coreui/coreui/js/src/utilities'
+// import { getStyle, hexToRgba } from '@coreui/coreui/dist/js/coreui-utilities'
-
+import { hexToRgba } from '@coreui/coreui/dist/js/coreui-utilities'
-// const brandPrimary = '#20a8d8'
+import { CustomTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips'
-// const brandSuccess = '#4dbd74'
+import getStyle from '../../utils/getStyle'
-// 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})`
-}
 
 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),
+          backgroundColor: hexToRgba(brandInfo, 10),
-          borderColor: getStyle('--info'),
+          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

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: {