adding the dependance

frontend/src/Apps/ResearcherProfile.vue

@@ -1,5 +1,33 @@
 <script setup>
+  import CanvasJSChart from "@canvasjs/vue-charts";
 
+  const chartData ={
+      options: {
+    theme: "light2",
+        animationEnabled: true,
+        title:{
+      text: "Visitors By Channel"
+    },
+    data: [{
+      type: "pie",
+      indexLabel: "{label} (#percent%)",
+      yValueFormatString: "#,##0",
+      toolTipContent: "<span style='\"'color: {color};'\"'>{label}</span> {y}(#percent%)",
+      dataPoints: [
+        { label: "Organic Traffic", y: 130631 },
+        { label: "Direct", y: 28874 },
+        { label: "Referral", y: 15467 },
+        { label: "Social", y: 10543 },
+        { label: "Email", y: 5613 },
+        { label: "Others", y: 8492 }
+      ]
+    }]
+  },
+  styleOptions: {
+    width: "100%",
+        height: "360px"
+  }
+  }
 
 
 </script>
@@ -52,8 +80,10 @@
       <option value="months">Months</option>
       <option value="topics">Topics</option>
     </select>
+    </div>
+    <div id="statsPie">
+      <CanvasJSChart :data="chartData"/>
 
-     
 
 
     </div>

frontend/src/main.js

@@ -4,5 +4,8 @@ import 'https://kit.fontawesome.com/fb3bbd0a95.js'
 
 import { createApp } from 'vue'
 import App from './App.vue'
+import CanvasJSChart from '@canvasjs/vue-charts';
 
-createApp(App).mount('#app')
+const app = createApp(App);
+app.use(CanvasJSChart);
+app.mount('#app');