zoom plugin

jacksalici · Aug 23, 2023 · 836d039 · 836d039
1 parent 320ad04
commit 836d039
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 7 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -9,6 +9,7 @@
   },
   "dependencies": {
     "chart.js": "^4.3.0",
+    "chartjs-plugin-zoom": "^2.0.1",
     "js-cookie": "^3.0.3",
     "moment": "^2.29.4",
     "vue": "^3.2.31",

diff --git a/frontend/src/components/Stat.vue b/frontend/src/components/Stat.vue
@@ -1,8 +1,10 @@
 <script setup>
 import { Line } from "vue-chartjs";
+import zoomPlugin from 'chartjs-plugin-zoom';
 import moment from "moment";
 import {ref, watchEffect} from 'vue';
 
+
 import {
   Chart as ChartJS,
   Title,
@@ -22,7 +24,8 @@ ChartJS.register(
   LineElement,
   CategoryScale,
   LinearScale,
-  Colors
+  Colors,
+  zoomPlugin
 );
 
 const props = defineProps({
@@ -74,6 +77,22 @@ const chartOptions = {
         enabled: true,
         position: 'nearest',
        
+      },
+      zoom: {
+        zoom: {
+          wheel: {
+            enabled: true,
+            modifierKey: 'ctrl',
+          },
+          pinch: {
+            enabled: true
+          },
+          mode: 'xy',
+        },
+        limits:{
+          x: {min: 0, max: 'original'},
+          y: {min: 0, max: 'original'}
+        }
       }
   },
 };