[charts] Fix Tooltip crash with out of range lines (@alexfauquette)

packages/x-charts/src/BarChart/formatter.ts

@@ -86,7 +86,7 @@ const formatter: Formatter<'bar'> = (params, dataset) => {
   return {
     seriesOrder,
     stackingGroups,
-    series: defaultizeValueFormatter(completedSeries, (v) => v?.toLocaleString()),
+    series: defaultizeValueFormatter(completedSeries, (v) => (v == null ? '' : v.toLocaleString())),
   };
 };
 

packages/x-charts/src/ChartsTooltip/ChartsAxisTooltipContent.tsx

@@ -5,14 +5,11 @@ import { useSlotProps } from '@mui/base/utils';
 import { AxisInteractionData } from '../context/InteractionProvider';
 import { SeriesContext } from '../context/SeriesContextProvider';
 import { CartesianContext } from '../context/CartesianContextProvider';
-import {
-  CartesianChartSeriesType,
-  ChartSeriesDefaultized,
-  ChartSeriesType,
-} from '../models/seriesType/config';
+import { ChartSeriesDefaultized, ChartSeriesType } from '../models/seriesType/config';
 import { AxisDefaultized } from '../models/axis';
 import { ChartsTooltipClasses } from './chartsTooltipClasses';
 import { DefaultChartsAxisTooltipContent } from './DefaultChartsAxisTooltipContent';
+import { isCartesianSeriesType } from './utils';
 
 export type ChartsAxisContentProps = {
   /**
@@ -63,19 +60,17 @@ function ChartsAxisTooltipContent(props: {
 
   const relevantSeries = React.useMemo(() => {
     const rep: any[] = [];
-    (
-      Object.keys(series).filter((seriesType) =>
-        ['bar', 'line', 'scatter'].includes(seriesType),
-      ) as CartesianChartSeriesType[]
-    ).forEach((seriesType) => {
-      series[seriesType]!.seriesOrder.forEach((seriesId) => {
-        const item = series[seriesType]!.series[seriesId];
-        const axisKey = isXaxis ? item.xAxisKey : item.yAxisKey;
-        if (axisKey === undefined || axisKey === USED_AXIS_ID) {
-          rep.push(series[seriesType]!.series[seriesId]);
-        }
+    Object.keys(series)
+      .filter(isCartesianSeriesType)
+      .forEach((seriesType) => {
+        series[seriesType]!.seriesOrder.forEach((seriesId) => {
+          const item = series[seriesType]!.series[seriesId];
+          const axisKey = isXaxis ? item.xAxisKey : item.yAxisKey;
+          if (axisKey === undefined || axisKey === USED_AXIS_ID) {
+            rep.push(series[seriesType]!.series[seriesId]);
+          }
+        });
       });
-    });
     return rep;
   }, [USED_AXIS_ID, isXaxis, series]);
 

packages/x-charts/src/ChartsTooltip/DefaultChartsAxisTooltipContent.tsx

@@ -2,7 +2,6 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import Typography from '@mui/material/Typography';
-import { ChartSeriesDefaultized } from '../models/seriesType/config';
 import {
   ChartsTooltipCell,
   ChartsTooltipPaper,
@@ -11,6 +10,7 @@ import {
   ChartsTooltipRow,
 } from './ChartsTooltipTable';
 import type { ChartsAxisContentProps } from './ChartsAxisTooltipContent';
+import { isCartesianSeries } from './utils';
 
 function DefaultChartsAxisTooltipContent(props: ChartsAxisContentProps) {
   const { series, axis, dataIndex, axisValue, sx, classes } = props;
@@ -33,8 +33,9 @@ function DefaultChartsAxisTooltipContent(props: ChartsAxisContentProps) {
         )}
 
         <tbody>
-          {series.map(({ color, id, label, valueFormatter, data }: ChartSeriesDefaultized<any>) => {
-            const formattedValue = valueFormatter(data[dataIndex]);
+          {series.filter(isCartesianSeries).map(({ color, id, label, valueFormatter, data }) => {
+            // @ts-ignore
+            const formattedValue = valueFormatter(data[dataIndex] ?? null);
             if (formattedValue == null) {
               return null;
             }

packages/x-charts/src/ChartsTooltip/utils.tsx

@@ -1,7 +1,11 @@
 import * as React from 'react';
 import { AxisInteractionData, ItemInteractionData } from '../context/InteractionProvider';
 import { SVGContext } from '../context/DrawingProvider';
-import { ChartSeriesType } from '../models/seriesType/config';
+import {
+  CartesianChartSeriesType,
+  ChartSeriesDefaultized,
+  ChartSeriesType,
+} from '../models/seriesType/config';
 
 export function generateVirtualElement(mousePosition: { x: number; y: number } | null) {
   if (mousePosition === null) {
@@ -85,3 +89,13 @@ export function getTooltipHasData(
 
   return hasAxisXData || hasAxisYData;
 }
+
+export function isCartesianSeriesType(seriesType: string): seriesType is CartesianChartSeriesType {
+  return ['bar', 'line', 'scatter'].includes(seriesType);
+}
+
+export function isCartesianSeries(
+  series: ChartSeriesDefaultized<ChartSeriesType>,
+): series is ChartSeriesDefaultized<CartesianChartSeriesType> {
+  return isCartesianSeriesType(series.type);
+}

packages/x-charts/src/LineChart/formatter.ts

@@ -83,7 +83,7 @@ const formatter: Formatter<'line'> = (params, dataset) => {
   return {
     seriesOrder,
     stackingGroups,
-    series: defaultizeValueFormatter(completedSeries, (v) => v?.toLocaleString()),
+    series: defaultizeValueFormatter(completedSeries, (v) => (v == null ? '' : v.toLocaleString())),
   };
 };