diff --git a/docs/data/charts/axis/AxisCustomization.tsx b/docs/data/charts/axis/AxisCustomization.tsx
deleted file mode 100644
index 6210abae0b24b..0000000000000
--- a/docs/data/charts/axis/AxisCustomization.tsx
+++ /dev/null
@@ -1,82 +0,0 @@
-import * as React from 'react';
-import Box from '@mui/material/Box';
-import ChartsUsageDemo from 'docsx/src/modules/components/ChartsUsageDemo';
-import { ScatterChart } from '@mui/x-charts/ScatterChart';
-import { Chance } from 'chance';
-
-const chance = new Chance(42);
-
-const data = Array.from({ length: 200 }, () => ({
-  x: chance.floating({ min: -25, max: 25 }),
-  y: chance.floating({ min: -25, max: 25 }),
-})).map((d, index) => ({ ...d, id: index }));
-
-const defaultXAxis = {
-  disableLine: false,
-  disableTicks: false,
-  fontSize: 12,
-  label: 'My axis',
-  tickSize: 6,
-};
-
-type DefaultXAxis = typeof defaultXAxis;
-type DefaultXAxisKey = keyof DefaultXAxis;
-
-export default function AxisCustomization() {
-  return (
-    <ChartsUsageDemo
-      componentName="Alert"
-      data={[
-        { propName: 'disableLine', knob: 'switch', defaultValue: false },
-        { propName: 'disableTicks', knob: 'switch', defaultValue: false },
-        { propName: 'label', knob: 'input', defaultValue: 'my axis' },
-        { propName: 'tickSize', knob: 'number', defaultValue: 6 },
-      ]}
-      renderDemo={(props: DefaultXAxis) => (
-        <Box sx={{ width: '100%', maxWidth: 400 }}>
-          <ScatterChart
-            series={[
-              {
-                type: 'scatter',
-                id: 'linear',
-                data,
-              },
-            ]}
-            leftAxis={null}
-            bottomAxis={{
-              ...defaultXAxis,
-              ...props,
-            }}
-            height={300}
-            margin={{ top: 10, left: 20, right: 20 }}
-          />
-        </Box>
-      )}
-      getCode={({ props }: { props: DefaultXAxis }) =>
-        [
-          `import { ScatterChart } from '@mui/x-charts/ScatterChart';`,
-          '',
-          `<ScatterChart`,
-          '  {/** ... */}',
-          `  bottomAxis={{`,
-          ...Object.keys(props)
-            .filter(
-              (prop) =>
-                props[prop as DefaultXAxisKey] !==
-                defaultXAxis[prop as DefaultXAxisKey],
-            )
-            .map(
-              (prop) =>
-                `    ${prop}: ${
-                  typeof props[prop as DefaultXAxisKey] === 'string'
-                    ? `"${props[prop as DefaultXAxisKey]}"`
-                    : props[prop as DefaultXAxisKey]
-                },`,
-            ),
-          '  }}',
-          '/>',
-        ].join('\n')
-      }
-    />
-  );
-}
diff --git a/docs/data/charts/axis/AxisCustomization.js b/docs/data/charts/axis/AxisCustomizationNoSnap.js
similarity index 97%
rename from docs/data/charts/axis/AxisCustomization.js
rename to docs/data/charts/axis/AxisCustomizationNoSnap.js
index 47daece6e102e..c5d485e2286f7 100644
--- a/docs/data/charts/axis/AxisCustomization.js
+++ b/docs/data/charts/axis/AxisCustomizationNoSnap.js
@@ -18,8 +18,7 @@ const defaultXAxis = {
   label: 'My axis',
   tickSize: 6,
 };
-
-export default function AxisCustomization() {
+export default function AxisCustomizationNoSnap() {
   return (
     <ChartsUsageDemo
       componentName="Alert"
diff --git a/docs/data/charts/axis/axis.md b/docs/data/charts/axis/axis.md
index b542361ea8b33..10bb97df86c3b 100644
--- a/docs/data/charts/axis/axis.md
+++ b/docs/data/charts/axis/axis.md
@@ -214,7 +214,7 @@ For example `leftAxis={null}` hides the left axis.
 
 Axes rendering can be further customized. Below is an interactive demonstration of the axis props.
 
-{{"demo": "AxisCustomization.js", "hideToolbar": true, "bg": "playground"}}
+{{"demo": "AxisCustomizationNoSnap.js", "hideToolbar": true, "bg": "playground"}}
 
 ### Text customization