diff --git a/docs/data/charts/lines/LineDataset.js b/docs/data/charts/lines/LineDataset.js
index 0e05117c04945..34f6f21b7bb37 100644
--- a/docs/data/charts/lines/LineDataset.js
+++ b/docs/data/charts/lines/LineDataset.js
@@ -541,7 +541,7 @@ export default function LineDataset() {
       xAxis={[
         {
           dataKey: 'year',
-          valueFormatter: (v) => v.toString(),
+          valueFormatter: (value) => value.toString(),
           min: 1985,
           max: 2022,
         },
diff --git a/docs/data/charts/lines/LineDataset.tsx b/docs/data/charts/lines/LineDataset.tsx
index 00588a9035f93..4efe4d2281e42 100644
--- a/docs/data/charts/lines/LineDataset.tsx
+++ b/docs/data/charts/lines/LineDataset.tsx
@@ -542,7 +542,7 @@ export default function LineDataset() {
       xAxis={[
         {
           dataKey: 'year',
-          valueFormatter: (v) => v.toString(),
+          valueFormatter: (value) => value.toString(),
           min: 1985,
           max: 2022,
         },
diff --git a/docs/data/charts/tooltip/Formatting.js b/docs/data/charts/tooltip/Formatting.js
index 759307e1c79fb..bfb10d79e38fa 100644
--- a/docs/data/charts/tooltip/Formatting.js
+++ b/docs/data/charts/tooltip/Formatting.js
@@ -86,9 +86,9 @@ export default function Formatting() {
   return (
     <LineChart
       {...lineChartsParams}
-      xAxis={[{ data: years, scaleType: 'time', valueFormatter: yearFormater }]}
-      series={lineChartsParams.series.map((s) => ({
-        ...s,
+      xAxis={[{ data: years, scaleType: 'time', valueFormatter: yearFormatter }]}
+      series={lineChartsParams.series.map((serie) => ({
+        ...serie,
         valueFormatter: currencyFormatter,
       }))}
     />
diff --git a/docs/data/charts/tooltip/Formatting.tsx b/docs/data/charts/tooltip/Formatting.tsx
index ab975cdd909fb..ef5247fbfd9e6 100644
--- a/docs/data/charts/tooltip/Formatting.tsx
+++ b/docs/data/charts/tooltip/Formatting.tsx
@@ -86,9 +86,9 @@ export default function Formatting() {
   return (
     <LineChart
       {...lineChartsParams}
-      xAxis={[{ data: years, scaleType: 'time', valueFormatter: yearFormater }]}
-      series={lineChartsParams.series.map((s) => ({
-        ...s,
+      xAxis={[{ data: years, scaleType: 'time', valueFormatter: yearFormatter }]}
+      series={lineChartsParams.series.map((serie) => ({
+        ...serie,
         valueFormatter: currencyFormatter,
       }))}
     />
diff --git a/docs/data/charts/tooltip/Formatting.tsx.preview b/docs/data/charts/tooltip/Formatting.tsx.preview
index 9e2d3ca905687..0c659b2551fbf 100644
--- a/docs/data/charts/tooltip/Formatting.tsx.preview
+++ b/docs/data/charts/tooltip/Formatting.tsx.preview
@@ -1,8 +1,8 @@
 <LineChart
   {...lineChartsParams}
-  xAxis={[{ data: years, scaleType: 'time', valueFormatter: yearFormater }]}
-  series={lineChartsParams.series.map((s) => ({
-    ...s,
+  xAxis={[{ data: years, scaleType: 'time', valueFormatter: yearFormatter }]}
+  series={lineChartsParams.series.map((serie) => ({
+    ...serie,
     valueFormatter: currencyFormatter,
   }))}
 />
\ No newline at end of file
diff --git a/docs/pages/x/api/charts/spark-line-chart.json b/docs/pages/x/api/charts/spark-line-chart.json
index 6a2f609ba5029..274ec701e8ec2 100644
--- a/docs/pages/x/api/charts/spark-line-chart.json
+++ b/docs/pages/x/api/charts/spark-line-chart.json
@@ -33,7 +33,7 @@
     },
     "valueFormatter": {
       "type": { "name": "func" },
-      "default": "(v: number) => v.toString()",
+      "default": "(value: number | null) => (value === null ? '' : value.toString())",
       "signature": {
         "type": "function(value: number) => string",
         "describedArgs": ["value"],
diff --git a/packages/x-charts/src/SparkLineChart/SparkLineChart.tsx b/packages/x-charts/src/SparkLineChart/SparkLineChart.tsx
index 38ee565b52ccb..c0f1d4e66c892 100644
--- a/packages/x-charts/src/SparkLineChart/SparkLineChart.tsx
+++ b/packages/x-charts/src/SparkLineChart/SparkLineChart.tsx
@@ -64,7 +64,7 @@ export interface SparkLineChartProps
    * Formatter used by the tooltip.
    * @param {number} value The value to format.
    * @returns {string} the formatted value.
-   * @default (v: number) => v.toString()
+   * @default (value: number | null) => (value === null ? '' : value.toString())
    */
   valueFormatter?: (value: number) => string;
   /**
@@ -146,7 +146,7 @@ const SparkLineChart = React.forwardRef(function SparkLineChart(props: SparkLine
     slotProps,
     data,
     plotType = 'line',
-    valueFormatter = (v: number) => v.toString(),
+    valueFormatter = (value: number | null) => (value === null ? '' : value.toString()),
     area,
     curve = 'linear',
   } = props;
@@ -326,7 +326,7 @@ SparkLineChart.propTypes = {
    * Formatter used by the tooltip.
    * @param {number} value The value to format.
    * @returns {string} the formatted value.
-   * @default (v: number) => v.toString()
+   * @default (value: number | null) => (value === null ? '' : value.toString())
    */
   valueFormatter: PropTypes.func,
   viewBox: PropTypes.shape({