refactor(charts): add CustomTooltips, add chartId prop

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>