diff --git a/docs/data/charts/bars/ColorScaleNoSnap.js b/docs/data/charts/bars/ColorScale.js
similarity index 98%
rename from docs/data/charts/bars/ColorScaleNoSnap.js
rename to docs/data/charts/bars/ColorScale.js
index 23752dfc63e94..dc3eb0778e8ad 100644
--- a/docs/data/charts/bars/ColorScaleNoSnap.js
+++ b/docs/data/charts/bars/ColorScale.js
@@ -3,12 +3,11 @@ import { BarChart } from '@mui/x-charts/BarChart';
 import Stack from '@mui/material/Stack';
 import TextField from '@mui/material/TextField';
 import MenuItem from '@mui/material/MenuItem';
-// @ts-ignore
 import { HighlightedCode } from '@mui/docs/HighlightedCode';
 
 const series = [{ data: [-2, -9, 12, 11, 6, -4] }];
 
-export default function ColorScaleNoSnap() {
+export default function ColorScale() {
   const [colorX, setColorX] = React.useState('piecewise');
   const [colorY, setColorY] = React.useState('None');
 
diff --git a/docs/data/charts/bars/ColorScaleNoSnap.tsx b/docs/data/charts/bars/ColorScale.tsx
similarity index 99%
rename from docs/data/charts/bars/ColorScaleNoSnap.tsx
rename to docs/data/charts/bars/ColorScale.tsx
index be412801c386c..bda7278912dd8 100644
--- a/docs/data/charts/bars/ColorScaleNoSnap.tsx
+++ b/docs/data/charts/bars/ColorScale.tsx
@@ -7,7 +7,7 @@ import { HighlightedCode } from '@mui/docs/HighlightedCode';
 
 const series = [{ data: [-2, -9, 12, 11, 6, -4] }];
 
-export default function ColorScaleNoSnap() {
+export default function ColorScale() {
   const [colorX, setColorX] = React.useState<
     'None' | 'piecewise' | 'continuous' | 'ordinal'
   >('piecewise');
diff --git a/docs/data/charts/bars/bars.md b/docs/data/charts/bars/bars.md
index 3287a06ee42fd..f9aad2fa32097 100644
--- a/docs/data/charts/bars/bars.md
+++ b/docs/data/charts/bars/bars.md
@@ -98,7 +98,7 @@ The bar charts use by priority:
 
 Learn more about the `colorMap` properties in the [Styling docs](/x/react-charts/styling/#values-color).
 
-{{"demo": "ColorScaleNoSnap.js"}}
+{{"demo": "ColorScale.js"}}
 
 ## Click event
 
diff --git a/docs/data/charts/lines/ColorScaleNoSnap.js b/docs/data/charts/lines/ColorScale.js
similarity index 98%
rename from docs/data/charts/lines/ColorScaleNoSnap.js
rename to docs/data/charts/lines/ColorScale.js
index 4a99734f23b28..1744ee298e1ad 100644
--- a/docs/data/charts/lines/ColorScaleNoSnap.js
+++ b/docs/data/charts/lines/ColorScale.js
@@ -3,10 +3,9 @@ import { LineChart } from '@mui/x-charts/LineChart';
 import Stack from '@mui/material/Stack';
 import TextField from '@mui/material/TextField';
 import MenuItem from '@mui/material/MenuItem';
-// @ts-ignore
 import { HighlightedCode } from '@mui/docs/HighlightedCode';
 
-export default function ColorScaleNoSnap() {
+export default function ColorScale() {
   const [colorX, setColorX] = React.useState('None');
   const [colorY, setColorY] = React.useState('piecewise');
 
diff --git a/docs/data/charts/lines/ColorScaleNoSnap.tsx b/docs/data/charts/lines/ColorScale.tsx
similarity index 99%
rename from docs/data/charts/lines/ColorScaleNoSnap.tsx
rename to docs/data/charts/lines/ColorScale.tsx
index 3556db7d64c99..281bc9f8c040a 100644
--- a/docs/data/charts/lines/ColorScaleNoSnap.tsx
+++ b/docs/data/charts/lines/ColorScale.tsx
@@ -5,7 +5,7 @@ import TextField from '@mui/material/TextField';
 import MenuItem from '@mui/material/MenuItem';
 import { HighlightedCode } from '@mui/docs/HighlightedCode';
 
-export default function ColorScaleNoSnap() {
+export default function ColorScale() {
   const [colorX, setColorX] = React.useState<
     'None' | 'piecewise' | 'continuous' | 'ordinal'
   >('None');
diff --git a/docs/data/charts/lines/lines.md b/docs/data/charts/lines/lines.md
index 9b203541adca2..83ec7505ffd6c 100644
--- a/docs/data/charts/lines/lines.md
+++ b/docs/data/charts/lines/lines.md
@@ -159,7 +159,7 @@ The line charts use by priority:
 
 Learn more about the `colorMap` properties in the [Styling docs](/x/react-charts/styling/#values-color).
 
-{{"demo": "ColorScaleNoSnap.js"}}
+{{"demo": "ColorScale.js"}}
 
 :::warning
 For now, ordinal config is not supported for line chart.
diff --git a/docs/data/charts/scatter/ColorScaleNoSnap.js b/docs/data/charts/scatter/ColorScale.js
similarity index 99%
rename from docs/data/charts/scatter/ColorScaleNoSnap.js
rename to docs/data/charts/scatter/ColorScale.js
index 1f6e6adc977c7..5c046a3de76d2 100644
--- a/docs/data/charts/scatter/ColorScaleNoSnap.js
+++ b/docs/data/charts/scatter/ColorScale.js
@@ -4,7 +4,6 @@ import { ScatterChart } from '@mui/x-charts/ScatterChart';
 import Stack from '@mui/material/Stack';
 import TextField from '@mui/material/TextField';
 import MenuItem from '@mui/material/MenuItem';
-// @ts-ignore
 import { HighlightedCode } from '@mui/docs/HighlightedCode';
 
 import { Chance } from 'chance';
@@ -12,7 +11,7 @@ import { Chance } from 'chance';
 const POINTS_NUMBER = 50;
 const chance = new Chance(42);
 
-export default function ColorScaleNoSnap() {
+export default function ColorScale() {
   const [colorX, setColorX] = React.useState('piecewise');
   const [colorY, setColorY] = React.useState('None');
   const [colorZ, setColorZ] = React.useState('None');
diff --git a/docs/data/charts/scatter/ColorScaleNoSnap.tsx b/docs/data/charts/scatter/ColorScale.tsx
similarity index 99%
rename from docs/data/charts/scatter/ColorScaleNoSnap.tsx
rename to docs/data/charts/scatter/ColorScale.tsx
index 0ffcb7e86a348..42e6b349def27 100644
--- a/docs/data/charts/scatter/ColorScaleNoSnap.tsx
+++ b/docs/data/charts/scatter/ColorScale.tsx
@@ -11,7 +11,7 @@ import { Chance } from 'chance';
 const POINTS_NUMBER = 50;
 const chance = new Chance(42);
 
-export default function ColorScaleNoSnap() {
+export default function ColorScale() {
   const [colorX, setColorX] = React.useState<'None' | 'piecewise' | 'continuous'>(
     'piecewise',
   );
diff --git a/docs/data/charts/scatter/scatter.md b/docs/data/charts/scatter/scatter.md
index 1ebeebf8ec9f1..188c91bdd01b4 100644
--- a/docs/data/charts/scatter/scatter.md
+++ b/docs/data/charts/scatter/scatter.md
@@ -88,7 +88,7 @@ Here are three ways to set z value to 5.
 
 Learn more about the `colorMap` properties in the [Styling docs](/x/react-charts/styling/#values-color).
 
-{{"demo": "ColorScaleNoSnap.js"}}
+{{"demo": "ColorScale.js"}}
 
 ### Grid