manipular los ejes x e y

app/funciones.js

@@ -1,4 +1,5 @@
-import React, { useEffect } from 'react';
+
+import React, { useRef, useEffect } from 'react';
 import { Chart, registerables } from 'chart.js';
 import zoomPlugin from 'chartjs-plugin-zoom';
 
@@ -6,17 +7,17 @@ import zoomPlugin from 'chartjs-plugin-zoom';
 Chart.register(...registerables, zoomPlugin);
 
 const Tablero = ({ labels, dataPoints }) => {
+    const canvasRef = useRef(null);
+
     useEffect(() => {
-        // Verifica si el canvas está disponible
+        // Asegúrate de que el código solo se ejecute en el cliente
-        const canvas = document.getElementById("myChart");
+        const canvas = canvasRef.current;
         if (!canvas) {
             console.error("Canvas element not found");
             return;
         }
 
         const ctx = canvas.getContext("2d");
-        
-        // Verifica si el contexto es válido
         if (!ctx) {
             console.error("Failed to get canvas context");
             return;
@@ -46,11 +47,11 @@ const Tablero = ({ labels, dataPoints }) => {
                         },
                         zoom: {
                             enabled: true,
-                            mode: 'x', // Habilita el zoom en el eje X
+                            mode: 'x',
                         },
                         pan: {
                             enabled: true,
-                            mode: 'x', // Habilita el desplazamiento en el eje X
+                            mode: 'x',
                         },
                     },
                     y: {
@@ -60,11 +61,11 @@ const Tablero = ({ labels, dataPoints }) => {
                         },
                         zoom: {
                             enabled: true,
-                            mode: 'y', // Habilita el zoom en el eje Y
+                            mode: 'y',
                         },
                         pan: {
                             enabled: true,
-                            mode: 'y', // Habilita el desplazamiento en el eje Y
+                            mode: 'y',
                         },
                     }
                 },
@@ -72,14 +73,14 @@ const Tablero = ({ labels, dataPoints }) => {
                     zoom: {
                         pan: {
                             enabled: true,
-                            mode: 'xy', // Permite el desplazamiento en ambos ejes
+                            mode: 'xy',
                         },
                         zoom: {
                             enabled: true,
-                            mode: 'xy', // Permite el zoom en ambos ejes
+                            mode: 'xy',
-                            speed: 0.1, // Velocidad de zoom
+                            speed: 0.1,
-                            sensitivity: 3, // Sensibilidad del zoom
+                            sensitivity: 3,
-                            threshold: 2, // Umbral de activación del zoom
+                            threshold: 2,
                         }
                     }
                 }
@@ -90,7 +91,7 @@ const Tablero = ({ labels, dataPoints }) => {
         return () => myChart.destroy();
     }, [labels, dataPoints]);
 
-    return <canvas id="myChart" width="400" height="175"></canvas>;
+    return <canvas ref={canvasRef} width="400" height="175"></canvas>;
 };
 
 export default Tablero;

app/page.js

@@ -1,7 +1,11 @@
 "use client";
 import React, { useState } from 'react';
-import Tablero from './funciones';
 import { evaluate } from 'mathjs';
+import dynamic from 'next/dynamic';
+
+// Importa el componente Tablero dinámicamente sin renderizado del lado del servidor
+const Tablero = dynamic(() => import('./funciones'), { ssr: false });
+
 
 const Home = () => {
     const [expression, setExpression] = useState('');

package-lock.json

@@ -9,6 +9,7 @@
       "version": "0.1.0",
       "dependencies": {
         "chart.js": "^4.4.4",
+        "chartjs-plugin-zoom": "^2.0.1",
         "mathjs": "^13.1.1",
         "next": "14.2.11",
         "react": "^18",
@@ -1217,6 +1218,18 @@
         "pnpm": ">=8"
       }
     },
+    "node_modules/chartjs-plugin-zoom": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/chartjs-plugin-zoom/-/chartjs-plugin-zoom-2.0.1.tgz",
+      "integrity": "sha512-ogOmLu6e+Q7E1XWOCOz9YwybMslz9qNfGV2a+qjfmqJYpsw5ZMoRHZBUyW+NGhkpQ5PwwPA/+rikHpBZb7PZuA==",
+      "license": "MIT",
+      "dependencies": {
+        "hammerjs": "^2.0.8"
+      },
+      "peerDependencies": {
+        "chart.js": ">=3.2.0"
+      }
+    },
     "node_modules/chokidar": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
@@ -2642,6 +2655,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/hammerjs": {
+      "version": "2.0.8",
+      "resolved": "https://registry.npmjs.org/hammerjs/-/hammerjs-2.0.8.tgz",
+      "integrity": "sha512-tSQXBXS/MWQOn/RKckawJ61vvsDpCom87JgxiYdGwHdOa0ht0vzUWDlfioofFCRU0L+6NGDt6XzbgoJvZkMeRQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
     "node_modules/has-bigints": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.0.2.tgz",