[charts] Relax dataset type (#20294)

bernardobelchior · web-flow · commit 4ebdb7cfcc42 · 2025-11-14T17:25:30.000Z
diff --git a/packages/x-charts/src/BarChart/BarChart.test.tsx b/packages/x-charts/src/BarChart/BarChart.test.tsx
@@ -176,4 +176,52 @@ describe('<BarChart />', () => {
       ]);
     },
   );
+
+  it('should support dataset with missing values', async () => {
+    const dataset = [
+      {
+        version: 'data-0',
+        a1: 500,
+        a2: 100,
+        unusedProp: 'test',
+      },
+      {
+        version: 'data-1',
+        a1: 600,
+        a2: 200,
+        unusedProp: ['test'],
+      },
+      {
+        version: 'data-2',
+        // Item with missing x-values
+        // a1: 500,
+        a2: 200,
+        unusedProp: { test: 'value' },
+      },
+      {
+        version: 'data-3',
+        a1: null,
+      },
+      {
+        version: 'data-4',
+        a1: undefined,
+      },
+    ];
+
+    render(
+      <BarChart
+        dataset={dataset}
+        xAxis={[{ dataKey: 'version' }]}
+        series={[{ dataKey: 'a1', label: 'Series A' }]}
+        width={500}
+        height={300}
+      />,
+    );
+
+    const labelX = await screen.findByText('data-3');
+    expect(labelX).toBeVisible();
+
+    const labelY = await screen.findByText('600');
+    expect(labelY).toBeVisible();
+  });
 });
diff --git a/packages/x-charts/src/BarChart/seriesConfig/bar/seriesProcessor.ts b/packages/x-charts/src/BarChart/seriesConfig/bar/seriesProcessor.ts
@@ -35,6 +35,33 @@ const seriesProcessor: SeriesProcessor<'bar'> = (params, dataset) => {
         ].join('\n'),
       );
     }
+
+    if (process.env.NODE_ENV !== 'production') {
+      if (!data && dataset) {
+        const dataKey = series[id].dataKey;
+
+        if (!dataKey) {
+          throw new Error(
+            [
+              `MUI X Charts: bar series with id='${id}' has no data and no dataKey.`,
+              'You must provide a dataKey when using the dataset prop.',
+            ].join('\n'),
+          );
+        }
+
+        dataset.forEach((entry, index) => {
+          const value = entry[dataKey];
+          if (value != null && typeof value !== 'number') {
+            warnOnce(
+              [
+                `MUI X Charts: your dataset key "${dataKey}" is used for plotting bars, but the dataset contains the non-null non-numerical element "${value}" at index ${index}.`,
+                'Bar plots only support numeric and null values.',
+              ].join('\n'),
+            );
+          }
+        });
+      }
+    }
   });
 
   const completedSeries: {
@@ -69,18 +96,8 @@ const seriesProcessor: SeriesProcessor<'bar'> = (params, dataset) => {
         data: dataKey
           ? dataset!.map((data) => {
               const value = data[dataKey];
-              if (typeof value !== 'number') {
-                if (process.env.NODE_ENV !== 'production') {
-                  if (value !== null) {
-                    warnOnce([
-                      `MUI X Charts: your dataset key "${dataKey}" is used for plotting bars, but contains nonnumerical elements.`,
-                      'Bar plots only support numbers and null values.',
-                    ]);
-                  }
-                }
-                return null;
-              }
-              return value;
+
+              return typeof value === 'number' ? value : null;
             })
           : series[id].data!,
         stackedData: stackedSeries[index].map(([a, b]) => [a, b]),
diff --git a/packages/x-charts/src/LineChart/LineChart.test.tsx b/packages/x-charts/src/LineChart/LineChart.test.tsx
@@ -2,6 +2,7 @@ import { createRenderer } from '@mui/internal-test-utils/createRenderer';
 import { describeConformance } from 'test/utils/describeConformance';
 import { LineChart } from '@mui/x-charts/LineChart';
 import { screen } from '@mui/internal-test-utils';
+import * as React from 'react';
 
 describe('<LineChart />', () => {
   const { render } = createRenderer();
@@ -33,4 +34,53 @@ describe('<LineChart />', () => {
 
     expect(screen.getByText('No data to display')).toBeVisible();
   });
+  it('should support dataset with missing values', async () => {
+    const dataset = [
+      {
+        version: 'data-0',
+        a1: 500,
+        a2: 100,
+        unusedProp: 'test',
+      },
+      {
+        version: 'data-1',
+        a1: 600,
+        a2: 200,
+        unusedProp: ['test'],
+      },
+      {
+        version: 'data-2',
+        // Item with missing x-values
+        // a1: 500,
+        a2: 250,
+        unusedProp: { test: 'value' },
+      },
+      {
+        version: 'data-3',
+        a1: null,
+        // Missing y-value,
+      },
+      {
+        version: 'data-4',
+        a1: undefined,
+        a2: null,
+      },
+    ];
+
+    render(
+      <LineChart
+        dataset={dataset}
+        xAxis={[{ dataKey: 'a1' }]}
+        series={[{ dataKey: 'a2', label: 'Series A' }]}
+        width={500}
+        height={300}
+      />,
+    );
+
+    const labelX = await screen.findByText('500');
+    expect(labelX).toBeVisible();
+
+    const labelY = await screen.findByText('250');
+    expect(labelY).toBeVisible();
+  });
 });
diff --git a/packages/x-charts/src/LineChart/seriesConfig/seriesProcessor.ts b/packages/x-charts/src/LineChart/seriesConfig/seriesProcessor.ts
@@ -7,7 +7,6 @@ import { defaultizeValueFormatter } from '../../internals/defaultizeValueFormatt
 import { SeriesId } from '../../models/seriesType/common';
 import { SeriesProcessor } from '../../internals/plugins/models';
 
-// For now it's a copy past of bar charts formatter, but maybe will diverge later
 const seriesProcessor: SeriesProcessor<'line'> = (params, dataset) => {
   const { seriesOrder, series } = params;
   const stackingGroups = getStackingGroups({ ...params, defaultStrategy: { stackOffset: 'none' } });
@@ -32,6 +31,33 @@ const seriesProcessor: SeriesProcessor<'line'> = (params, dataset) => {
         ].join('\n'),
       );
     }
+
+    if (process.env.NODE_ENV !== 'production') {
+      if (!data && dataset) {
+        const dataKey = series[id].dataKey;
+
+        if (!dataKey) {
+          throw new Error(
+            [
+              `MUI X Charts: line series with id='${id}' has no data and no dataKey.`,
+              'You must provide a dataKey when using the dataset prop.',
+            ].join('\n'),
+          );
+        }
+
+        dataset.forEach((entry, index) => {
+          const value = entry[dataKey];
+          if (value != null && typeof value !== 'number') {
+            warnOnce(
+              [
+                `MUI X Charts: your dataset key "${dataKey}" is used for plotting lines, but the dataset contains the non-null non-numerical element "${value}" at index ${index}.`,
+                'Line plots only support numeric and null values.',
+              ].join('\n'),
+            );
+          }
+        });
+      }
+    }
   });
 
   const completedSeries: Record<
@@ -62,18 +88,8 @@ const seriesProcessor: SeriesProcessor<'line'> = (params, dataset) => {
         data: dataKey
           ? dataset!.map((data) => {
               const value = data[dataKey];
-              if (typeof value !== 'number') {
-                if (process.env.NODE_ENV !== 'production') {
-                  if (value !== null) {
-                    warnOnce([
-                      `MUI X Charts: Your dataset key "${dataKey}" is used for plotting line, but contains nonnumerical elements.`,
-                      'Line plots only support numbers and null values.',
-                    ]);
-                  }
-                }
-                return null;
-              }
-              return value;
+
+              return typeof value === 'number' ? value : null;
             })
           : series[id].data!,
         stackedData: stackedSeries[index].map(([a, b]) => [a, b]),
diff --git a/packages/x-charts/src/ScatterChart/ScatterChart.test.tsx b/packages/x-charts/src/ScatterChart/ScatterChart.test.tsx
@@ -132,7 +132,7 @@ describe('<ScatterChart />', () => {
     expect([...cells].map((cell) => cell.textContent)).to.deep.equal(['', '(5, 5)']);
   });
 
-  it.skipIf(isJSDOM)('should support dataset with missing values', async () => {
+  it('should support dataset with missing values', async () => {
     // x from 500 to 600
     // y from 100 to 200
     const dataset = [
diff --git a/packages/x-charts/src/ScatterChart/seriesConfig/seriesProcessor.ts b/packages/x-charts/src/ScatterChart/seriesConfig/seriesProcessor.ts
@@ -1,3 +1,4 @@
+import { warnOnce } from '@mui/x-internals/warning';
 import { ScatterValueType } from '../../models';
 import { SeriesProcessor } from '../../internals/plugins/models';
 
@@ -19,6 +20,38 @@ const seriesProcessor: SeriesProcessor<'scatter'> = ({ series, seriesOrder }, da
         );
       }
 
+      if (process.env.NODE_ENV !== 'production') {
+        if (!seriesData.data && dataset) {
+          // If these keys are not present, an error is thrown above
+          const xDataKey = series[seriesId].datasetKeys!.x;
+          const yDataKey = series[seriesId].datasetKeys!.y;
+
+          dataset.forEach((entry, index) => {
+            const x = entry[xDataKey];
+
+            if (x != null && typeof x !== 'number') {
+              warnOnce(
+                [
+                  `MUI X Charts: your dataset key "${xDataKey}" is used for a scatter plot, but the dataset contains the non-null non-numerical element "${x}" at index ${index}.`,
+                  'Scatter plots only support numeric and null values.',
+                ].join('\n'),
+              );
+            }
+
+            const y = entry[yDataKey];
+
+            if (y != null && typeof y !== 'number') {
+              warnOnce(
+                [
+                  `MUI X Charts: your dataset key "${yDataKey}" is used for a scatter plot, but the dataset contains the non-null non-numerical element "${y}" at index ${index}.`,
+                  'Scatter plots only support numeric and null values.',
+                ].join('\n'),
+              );
+            }
+          });
+        }
+      }
+
       const data = !datasetKeys
         ? (seriesData.data ?? [])
         : (dataset?.map((d) => {
diff --git a/packages/x-charts/src/models/seriesType/config.ts b/packages/x-charts/src/models/seriesType/config.ts
@@ -123,6 +123,6 @@ export type ChartItemIdentifierWithData<T extends ChartSeriesType> =
   ChartsSeriesConfig[T]['itemIdentifierWithData'];
 
 export type DatasetElementType<T> = {
-  [key: string]: Readonly<T>;
+  [key: string]: T;
 };
-export type DatasetType<T = number | string | Date | null | undefined> = DatasetElementType<T>[];
+export type DatasetType<T = unknown> = DatasetElementType<T>[];
