Update demo

Author: bernardobelchior

docs/data/charts/zoom-and-pan/ZoomSlider.js

@@ -1,13 +1,13 @@
 import { ScatterChartPro } from '@mui/x-charts-pro/ScatterChartPro';
 import * as React from 'react';
 
-const dataLength = 800;
+const dataLength = 790;
 const data = Array.from({ length: dataLength }).map((_, i) => ({
   x: i,
   y: 50 + Math.sin(i / 5) * 25,
 }));
 const series2Data = Array.from({ length: dataLength }).map((_, i) => ({
-  x: i,
+  x: i + 10,
   y: 50 + Math.sin(i / 5) * 25,
 }));
 
@@ -38,12 +38,23 @@ export default function ZoomSlider() {
         },
       ]}
       yAxis={[
-        { zoom: { slider: { enabled: true } } },
-        { id: 'y2', position: 'right', zoom: { slider: { enabled: true } } },
+        { id: 'y', width: 28, zoom: { slider: { enabled: true } } },
+        {
+          id: 'y2',
+          position: 'right',
+          width: 28,
+          zoom: { slider: { enabled: true } },
+        },
       ]}
       series={[{ data }, { data: series2Data, xAxisId: 'x2', yAxisId: 'y2' }]}
       height={400}
       margin={{ bottom: 40 }}
+      initialZoom={[
+        { axisId: 'x', start: 10, end: 90 },
+        { axisId: 'x2', start: 30, end: 70 },
+        { axisId: 'y', start: 10, end: 90 },
+        { axisId: 'y2', start: 30, end: 70 },
+      ]}
     />
   );
 }

docs/data/charts/zoom-and-pan/ZoomSlider.tsx

@@ -1,13 +1,13 @@
 import { ScatterChartPro } from '@mui/x-charts-pro/ScatterChartPro';
 import * as React from 'react';
 
-const dataLength = 800;
+const dataLength = 790;
 const data = Array.from({ length: dataLength }).map((_, i) => ({
   x: i,
   y: 50 + Math.sin(i / 5) * 25,
 }));
 const series2Data = Array.from({ length: dataLength }).map((_, i) => ({
-  x: i,
+  x: i + 10,
   y: 50 + Math.sin(i / 5) * 25,
 }));
 
@@ -38,12 +38,23 @@ export default function ZoomSlider() {
         },
       ]}
       yAxis={[
-        { zoom: { slider: { enabled: true } } },
-        { id: 'y2', position: 'right', zoom: { slider: { enabled: true } } },
+        { id: 'y', width: 28, zoom: { slider: { enabled: true } } },
+        {
+          id: 'y2',
+          position: 'right',
+          width: 28,
+          zoom: { slider: { enabled: true } },
+        },
       ]}
       series={[{ data }, { data: series2Data, xAxisId: 'x2', yAxisId: 'y2' }]}
       height={400}
       margin={{ bottom: 40 }}
+      initialZoom={[
+        { axisId: 'x', start: 10, end: 90 },
+        { axisId: 'x2', start: 30, end: 70 },
+        { axisId: 'y', start: 10, end: 90 },
+        { axisId: 'y2', start: 30, end: 70 },
+      ]}
     />
   );
 }