diff --git a/docs/data/charts/axis/CustomDomainYAxis.js b/docs/data/charts/axis/CustomDomainYAxis.js
index a9987854a6674..bf57e3e8754b4 100644
--- a/docs/data/charts/axis/CustomDomainYAxis.js
+++ b/docs/data/charts/axis/CustomDomainYAxis.js
@@ -5,10 +5,7 @@ import TextField from '@mui/material/TextField';
 import MenuItem from '@mui/material/MenuItem';
 
 const settings = {
-  valueFormatter: (value) => `${value}%`,
   height: 200,
-  showTooltip: true,
-  showHighlight: true,
   series: [{ data: [60, -15, 66, 68, 87, 82, 83, 85, 92, 75, 76, 50, 91] }],
   margin: { top: 10, bottom: 20 },
 };
diff --git a/docs/data/charts/axis/CustomDomainYAxis.tsx b/docs/data/charts/axis/CustomDomainYAxis.tsx
index 8fb3fb23f3daa..6e771e3878a91 100644
--- a/docs/data/charts/axis/CustomDomainYAxis.tsx
+++ b/docs/data/charts/axis/CustomDomainYAxis.tsx
@@ -1,14 +1,11 @@
 import * as React from 'react';
 import Box from '@mui/material/Box';
-import { BarChart } from '@mui/x-charts/BarChart';
+import { BarChart, BarChartProps } from '@mui/x-charts/BarChart';
 import TextField from '@mui/material/TextField';
 import MenuItem from '@mui/material/MenuItem';
 
-const settings = {
-  valueFormatter: (value: number | null) => `${value}%`,
+const settings: BarChartProps = {
   height: 200,
-  showTooltip: true,
-  showHighlight: true,
   series: [{ data: [60, -15, 66, 68, 87, 82, 83, 85, 92, 75, 76, 50, 91] }],
   margin: { top: 10, bottom: 20 },
 };
diff --git a/docs/data/charts/styling/ColorTemplate.js b/docs/data/charts/styling/ColorTemplate.js
index 1d9f3cc0e1203..9cef10b181db9 100644
--- a/docs/data/charts/styling/ColorTemplate.js
+++ b/docs/data/charts/styling/ColorTemplate.js
@@ -33,7 +33,6 @@ const legendPlacement = {
         horizontal: 'right',
       },
       direction: 'vertical',
-      itemGap: 2,
     },
   },
   margin: {
diff --git a/docs/data/charts/styling/ColorTemplate.tsx b/docs/data/charts/styling/ColorTemplate.tsx
index a5c6d978e406a..b448a3f4ec45a 100644
--- a/docs/data/charts/styling/ColorTemplate.tsx
+++ b/docs/data/charts/styling/ColorTemplate.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { ScatterChart } from '@mui/x-charts/ScatterChart';
+import { ScatterChart, ScatterChartProps } from '@mui/x-charts/ScatterChart';
 import { ScatterValueType } from '@mui/x-charts/models';
 import Stack from '@mui/material/Stack';
 import TextField from '@mui/material/TextField';
@@ -29,7 +29,7 @@ function getGaussianSeriesData(
   });
 }
 
-const legendPlacement = {
+const legendPlacement: Partial<ScatterChartProps> = {
   slotProps: {
     legend: {
       position: {
@@ -37,7 +37,6 @@ const legendPlacement = {
         horizontal: 'right',
       },
       direction: 'vertical',
-      itemGap: 2,
     },
   },
   margin: {
@@ -45,7 +44,7 @@ const legendPlacement = {
     right: 20,
     left: 30,
   },
-} as const;
+};
 const series = [
   { label: 'Series 1', data: getGaussianSeriesData([-5, 0]) },
   { label: 'Series 2', data: getGaussianSeriesData([-4, 0]) },
diff --git a/docs/data/charts/styling/MuiColorTemplate.js b/docs/data/charts/styling/MuiColorTemplate.js
index 7f3c9c8f507bc..8d3283df006c9 100644
--- a/docs/data/charts/styling/MuiColorTemplate.js
+++ b/docs/data/charts/styling/MuiColorTemplate.js
@@ -39,7 +39,6 @@ const legendPlacement = {
   slotProps: {
     legend: {
       direction: 'vertical',
-      itemGap: 2,
     },
   },
   margin: {
diff --git a/docs/data/charts/styling/MuiColorTemplate.tsx b/docs/data/charts/styling/MuiColorTemplate.tsx
index 798bd11f88e17..89dc8dedec6bb 100644
--- a/docs/data/charts/styling/MuiColorTemplate.tsx
+++ b/docs/data/charts/styling/MuiColorTemplate.tsx
@@ -9,7 +9,7 @@ import Button from '@mui/material/Button';
 import Brightness4Icon from '@mui/icons-material/Brightness4';
 import Brightness7Icon from '@mui/icons-material/Brightness7';
 import { Chance } from 'chance';
-import { ScatterChart } from '@mui/x-charts/ScatterChart';
+import { ScatterChart, ScatterChartProps } from '@mui/x-charts/ScatterChart';
 import { ScatterValueType } from '@mui/x-charts/models';
 import {
   blueberryTwilightPalette,
@@ -39,18 +39,17 @@ function getGaussianSeriesData(
   });
 }
 
-const legendPlacement = {
+const legendPlacement: Partial<ScatterChartProps> = {
   slotProps: {
     legend: {
       direction: 'vertical',
-      itemGap: 2,
     },
   },
   margin: {
     top: 20,
     right: 20,
   },
-} as const;
+};
 
 const series = [
   { label: 'Series 1', data: getGaussianSeriesData([-5, 0]) },