slider

app/funciones.js

@@ -1,8 +1,9 @@
 import React, { useEffect } from 'react';
 import { Chart, registerables } from 'chart.js';
+import zoomPlugin from 'chartjs-plugin-zoom';
 
-// Registra los módulos necesarios de Chart.js
-Chart.register(...registerables);
+// Registra los módulos necesarios de Chart.js y el plugin de zoom
+Chart.register(...registerables, zoomPlugin);
 
 const Tablero = ({ labels, dataPoints }) => {
     useEffect(() => {
@@ -42,12 +43,43 @@ const Tablero = ({ labels, dataPoints }) => {
                         title: {
                             display: true,
                             text: 'X'
-                        }
+                        },
+                        zoom: {
+                            enabled: true,
+                            mode: 'x', // Habilita el zoom en el eje X
+                        },
+                        pan: {
+                            enabled: true,
+                            mode: 'x', // Habilita el desplazamiento en el eje X
+                        },
                     },
                     y: {
                         title: {
                             display: true,
                             text: 'f(x)'
+                        },
+                        zoom: {
+                            enabled: true,
+                            mode: 'y', // Habilita el zoom en el eje Y
+                        },
+                        pan: {
+                            enabled: true,
+                            mode: 'y', // Habilita el desplazamiento en el eje Y
+                        },
+                    }
+                },
+                plugins: {
+                    zoom: {
+                        pan: {
+                            enabled: true,
+                            mode: 'xy', // Permite el desplazamiento en ambos ejes
+                        },
+                        zoom: {
+                            enabled: true,
+                            mode: 'xy', // Permite el zoom en ambos ejes
+                            speed: 0.1, // Velocidad de zoom
+                            sensitivity: 3, // Sensibilidad del zoom
+                            threshold: 2, // Umbral de activación del zoom
                         }
                     }
                 }
@@ -58,7 +90,7 @@ const Tablero = ({ labels, dataPoints }) => {
         return () => myChart.destroy();
     }, [labels, dataPoints]);
 
-    return <canvas id="myChart" width="400" height="200"></canvas>;
+    return <canvas id="myChart" width="400" height="175"></canvas>;
 };
 
 export default Tablero;

app/page.js

@@ -32,7 +32,8 @@ const Home = () => {
     };
 
     return (
-        <div className="container border-2">
+        <div className="flex">
+            <div className='border-2'>
                 <h1>Exprecion algebraica</h1>
                 <form onSubmit={handleSubmit}>
                     <div>
@@ -73,6 +74,8 @@ const Home = () => {
                     </div>
                     <button type="submit" className='bg-black text-white font-bold px-6 py-1 rounded-3xl'>Generar Grafica</button>
                 </form>
+            </div>
+
             {data.labels.length > 0 && <Tablero labels={data.labels} dataPoints={data.dataPoints} />}
         </div>
     );

package.json

@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "chart.js": "^4.4.4",
+    "chartjs-plugin-zoom": "^2.0.1",
     "mathjs": "^13.1.1",
     "next": "14.2.11",
     "react": "^18",