refactor: update charts to latest version

src/assets/scss/style.scss

@@ -7,6 +7,9 @@ $enable-rtl: true;
 // Import styles
 @import "~@coreui/coreui/scss/coreui";
 
+// Import Chart.js Tooltips
+@import "~@coreui/chartjs/scss/tooltips";
+
 @import "layout";
 @import "example";
 

src/views/Dashboard.vue

@@ -1,5 +1,16 @@
 <template>
-  <div class="dashboard">
-    <h1>Dashboard</h1>
+  <div>
+    <MainChartExample style="height: 300px; margin-top: 40px" />
   </div>
 </template>
+
+<script>
+import MainChartExample from "./charts/MainChartExample";
+
+export default {
+  name: "Dashboard",
+  components: {
+    MainChartExample,
+  },
+};
+</script>

src/views/charts/MainChartExample.vue

@@ -0,0 +1,121 @@
+<template>
+  <CChart
+    type="line"
+    :data="data"
+    :options="options"
+    @get-dataset-at-event="aa"
+    @get-element-at-event="aa"
+    @get-elements-at-event="aa"
+  />
+</template>
+
+<script>
+import { CChart } from "@coreui/vue-chartjs";
+import { getStyle, hexToRgba } from "@coreui/utils/src";
+
+function random(min, max) {
+  return Math.floor(Math.random() * (max - min + 1) + min);
+}
+
+export default {
+  name: "MainChartExample",
+  components: {
+    CChart,
+  },
+  setup() {
+    const data = {
+      labels: ["January", "February", "March", "April", "May", "June", "July"],
+      datasets: [
+        {
+          label: "My First dataset",
+          backgroundColor: hexToRgba(getStyle("--cui-info"), 10),
+          borderColor: getStyle("--cui-info"),
+          pointHoverBackgroundColor: getStyle("--cui-info"),
+          borderWidth: 2,
+          data: [
+            random(50, 200),
+            random(50, 200),
+            random(50, 200),
+            random(50, 200),
+            random(50, 200),
+            random(50, 200),
+            random(50, 200),
+          ],
+          fill: true,
+        },
+        {
+          label: "My Second dataset",
+          backgroundColor: "transparent",
+          borderColor: getStyle("--cui-success"),
+          pointHoverBackgroundColor: getStyle("--cui-success"),
+          borderWidth: 2,
+          data: [
+            random(50, 200),
+            random(50, 200),
+            random(50, 200),
+            random(50, 200),
+            random(50, 200),
+            random(50, 200),
+            random(50, 200),
+          ],
+        },
+        {
+          label: "My Third dataset",
+          backgroundColor: "transparent",
+          borderColor: getStyle("--cui-danger"),
+          pointHoverBackgroundColor: getStyle("--cui-danger"),
+          borderWidth: 1,
+          borderDash: [8, 5],
+          data: [65, 65, 65, 65, 65, 65, 65],
+        },
+      ],
+    };
+
+    const options = {
+      maintainAspectRatio: false,
+      plugins: {
+        legend: {
+          display: false,
+        },
+      },
+      scales: {
+        x: {
+          grid: {
+            drawOnChartArea: false,
+          },
+        },
+        y: {
+          ticks: {
+            beginAtZero: true,
+            maxTicksLimit: 5,
+            stepSize: Math.ceil(250 / 5),
+            max: 250,
+          },
+        },
+      },
+      elements: {
+        line: {
+          tension: 0.4,
+        },
+        point: {
+          radius: 0,
+          hitRadius: 10,
+          hoverRadius: 4,
+          hoverBorderWidth: 3,
+        },
+      },
+    };
+
+    return {
+      data,
+      options,
+    };
+  },
+  methods: {
+    aa(value, value2) {
+      console.log(value);
+      console.log(value2);
+    },
+  },
+};
+</script>