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,8 +38,13 @@ export default function ZoomSlider() {
         },
       ]}
       yAxis={[
-        { zoom: { slider: { enabled: true } } },
-        { id: 'y2', position: 'right', zoom: { slider: { enabled: true } } },
+        { 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}

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,8 +38,13 @@ export default function ZoomSlider() {
         },
       ]}
       yAxis={[
-        { zoom: { slider: { enabled: true } } },
-        { id: 'y2', position: 'right', zoom: { slider: { enabled: true } } },
+        { 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}