[charts] Support module augmentation for slots by sai6855 · Pull Request #22519 · mui/mui-x

sai6855 · 2026-05-19T13:40:17Z

preview: https://deploy-preview-22519--material-ui-x.netlify.app/x/react-charts/components/#custom-slot-props-with-typescript

Add module augmentation support for all slots in Charts

Mirrors the data-grid pattern: every slot exposes an empty ${SlotName}PropsOverrides interface that consumers extend via declare module '...'.

Augmented props flow through PropsFromSlot<ChartSlots['name']> without casts.

Coverage

Tier	Component(s)	Slots covered
Community	All charts (base material)	`baseButton`, `baseIconButton`, `baseToggleButton`, `baseToggleButtonGroup`
Community	All cartesian charts	`axisLine`, `axisTick`, `axisTickLabel`, `axisLabel`, `xAxis`, `yAxis`
Community	`BarChart`	`bar`, `barLabel`
Community	`LineChart`	`line`, `area`, `mark`, `lineHighlight`
Community	`PieChart`	`pieArc`, `pieArcLabel`
Community	`ScatterChart`	`scatter`, `marker`
Community	All charts	`tooltip`, `legend`, `toolbar`, `loadingOverlay`, `noDataOverlay`
Pro	All Pro charts (base material + icons)	`baseDivider`, `baseMenuItem`, `baseMenuList`, `basePopper`, `baseTooltip`, `zoomInIcon`, `zoomOutIcon`, `exportIcon`
Pro	`Heatmap`	`cell`
Pro	`FunnelChart`	`funnelSection`, `funnelSectionLabel`
Premium	`RadialLineChart`	`radialLineHighlight`

Where overrides live

packages/x-charts/src/models/chartsSlotsComponentsProps.ts
packages/x-charts-pro/src/models/chartsSlotsComponentsPropsPro.ts
packages/x-charts-premium/src/models/chartsSlotsComponentsPropsPremium.ts

Notes

Augment the package where the interface is declared (not where the chart is imported from).

For example, use:
```
declare module '@mui/x-charts'
```

for shared slots like tooltip, even when using <RadialLineChart />.

Fixed re-declared tooltip slots that silently dropped the override:
- ScatterChart
- ScatterChartPro
- ScatterChartPremium
- Heatmap
Normalized marker and funnelSection* slot props to:
```
Partial<X> & XPropsOverrides
```
for API consistency.

Tests

Type-only *.spec.tsx specs in each package exercise every override via real JSX (slots + slotProps) on a representative chart.

Docs

docs/data/charts/components/components.md gains a "Custom slot props with TypeScript" section with Community / Pro / Premium tabs, mirroring Data Grid.

code-infra-dashboard · 2026-05-19T13:44:53Z

Deploy preview

Bundle size

Bundle	Parsed size	Gzip size
@mui/x-data-grid	0B^(0.00%)	0B^(0.00%)
@mui/x-data-grid-pro	0B^(0.00%)	0B^(0.00%)
@mui/x-data-grid-premium	0B^(0.00%)	0B^(0.00%)
@mui/x-charts	0B^(0.00%)	0B^(0.00%)
@mui/x-charts-pro	0B^(0.00%)	0B^(0.00%)
@mui/x-charts-premium	0B^(0.00%)	0B^(0.00%)
@mui/x-date-pickers	0B^(0.00%)	0B^(0.00%)
@mui/x-date-pickers-pro	0B^(0.00%)	0B^(0.00%)
@mui/x-tree-view	0B^(0.00%)	0B^(0.00%)
@mui/x-tree-view-pro	0B^(0.00%)	0B^(0.00%)
@mui/x-license	0B^(0.00%)	0B^(0.00%)

Details of bundle changes

Performance

Total duration: 934.17 ms +12.41 ms^(+1.3%) | Renders: 30 ⁽⁺⁰⁾ | Paint: 1,304.87 ms +18.41 ms^(+1.4%)

No significant changes — details

Check out the code infra dashboard for more information about this PR.

sai6855 · 2026-05-19T13:58:14Z

@alexfauquette @JCQuintas (Picked this issue from project dashboard)

Before working on other components, i'd like to know, if you are aligned on the direction this PR is taking.

I don't see any issue in CI w.r.t this new test, module augmentation is working fine https://github.com/mui/mui-x/pull/22519/changes#diff-56cd55c5e986a1577a4b59332231607ec9b36bb4346fd931cfd1997b400db60f

alexfauquette

LGTM

alexfauquette · 2026-05-21T06:45:04Z

 import { type ChartsTooltipProps } from './ChartsTooltip';
 import { type TriggerOptions } from './utils';

+export interface TooltipPropsOverrides {}


micht be easier if like in the data grid we define all those XxxPropsOverrides in a dedicated filemodels/chartsSlotsComponentsProps.ts to be sure we don't have duplicated interfaces

Copilot

Pull request overview

This PR adds Data Grid–style module augmentation support for Charts slots across Community/Pro/Premium packages, enabling consumers to extend slot prop types via ${SlotName}PropsOverrides interfaces without casting.

Changes:

Introduces exported empty *PropsOverrides interfaces (Community/Pro/Premium) and threads them through slots / slotProps typings.
Fixes a few charts that re-declared shared slots (notably tooltip) so overrides aren’t dropped.
Adds type-only spec files to exercise override augmentation, and documents the pattern in Charts docs and common concepts.

Reviewed changes

Copilot reviewed 41 out of 41 changed files in this pull request and generated 7 comments.

Show a summary per file

File	Description
scripts/x-charts.exports.json	Exposes new Community `*PropsOverrides` interfaces in the package exports metadata.
scripts/x-charts-pro.exports.json	Exposes new Pro `*PropsOverrides` interfaces in the package exports metadata.
scripts/x-charts-premium.exports.json	Exposes new Premium `*PropsOverrides` interfaces in the package exports metadata.
packages/x-charts/src/Toolbar/Toolbar.types.ts	Threads `ToolbarPropsOverrides` into toolbar slot + slotProps typing.
packages/x-charts/src/tests/slotPropsOverrides.spec.tsx	Adds Community type-only specs validating augmentation across representative charts/slots.
packages/x-charts/src/ScatterChart/ScatterPlot.tsx	Adds `ScatterPropsOverrides` to the `scatter` slot typing.
packages/x-charts/src/ScatterChart/ScatterMarker.types.ts	Adds `MarkerPropsOverrides` to the `marker` slot typing.
packages/x-charts/src/ScatterChart/ScatterChart.tsx	Ensures scatter chart tooltip slotProps includes `TooltipPropsOverrides`.
packages/x-charts/src/PieChart/PieArcPlot.tsx	Adds `PieArcPropsOverrides` to the `pieArc` slot typing.
packages/x-charts/src/PieChart/PieArcLabelPlot.tsx	Adds `PieArcLabelPropsOverrides` to the `pieArcLabel` slot typing.
packages/x-charts/src/models/slots/chartsBaseSlots.ts	Adds base-slot override interfaces to base slot component prop types.
packages/x-charts/src/models/index.ts	Re-exports `chartsSlotsComponentsProps` from `@mui/x-charts/models`.
packages/x-charts/src/models/chartsSlotsComponentsProps.ts	Introduces Community `*PropsOverrides` augmentation interfaces.
packages/x-charts/src/models/axis.ts	Adds axis-related override interfaces to axis slot + slotProps typings.
packages/x-charts/src/LineChart/MarkPlot.tsx	Adds `MarkPropsOverrides` to the `mark` slot typing.
packages/x-charts/src/LineChart/LineHighlightPlot.tsx	Adds `LineHighlightPropsOverrides` to the `lineHighlight` slot typing.
packages/x-charts/src/LineChart/LineElement.tsx	Adds `LinePropsOverrides` to the `line` slot typing.
packages/x-charts/src/LineChart/AreaElement.tsx	Adds `AreaPropsOverrides` to the `area` slot typing.
packages/x-charts/src/ChartsTooltip/ChartTooltip.types.ts	Adds `TooltipPropsOverrides` to tooltip slot + slotProps typing.
packages/x-charts/src/ChartsOverlay/ChartsOverlay.tsx	Adds overlay override interfaces to overlay slot + slotProps typing.
packages/x-charts/src/ChartsLegend/chartsLegend.types.ts	Adds `LegendPropsOverrides` to legend slot + slotProps typing.
packages/x-charts/src/BarChart/BarLabel/BarLabelItem.tsx	Adds `BarLabelPropsOverrides` to barLabel slot typing.
packages/x-charts/src/BarChart/BarElement.tsx	Adds `BarPropsOverrides` to bar slot typing.
packages/x-charts-pro/src/tests/slotPropsOverrides.spec.tsx	Adds Pro type-only specs validating Pro-only overrides and shared overrides usage.
packages/x-charts-pro/src/ScatterChartPro/ScatterChartPro.tsx	Ensures tooltip slotProps includes `TooltipPropsOverrides` for ScatterChartPro.
packages/x-charts-pro/src/models/index.ts	Re-exports Pro override interfaces from `@mui/x-charts-pro/models`.
packages/x-charts-pro/src/models/chartsSlotsComponentsPropsPro.ts	Introduces Pro-only `*PropsOverrides` augmentation interfaces.
packages/x-charts-pro/src/internals/slots/chartsIconSlots.ts	Adds override interfaces to Pro toolbar icon slot prop types.
packages/x-charts-pro/src/internals/slots/chartsBaseSlots.ts	Adds override interfaces to Pro base slot prop types.
packages/x-charts-pro/src/Heatmap/HeatmapTooltip/HeatmapTooltip.types.ts	Adds `TooltipPropsOverrides` to Heatmap tooltip slot typing.
packages/x-charts-pro/src/Heatmap/HeatmapItem.tsx	Adds `CellPropsOverrides` to Heatmap cell slot typing and usage.
packages/x-charts-pro/src/Heatmap/Heatmap.tsx	Adds `TooltipPropsOverrides` to Heatmap tooltip slot typing.
packages/x-charts-pro/src/FunnelChart/funnelPlotSlots.types.ts	Adds override interfaces to funnel section/label slot typings.
packages/x-charts-pro/src/ChartsToolbarPro/Toolbar.types.ts	Threads shared `ToolbarPropsOverrides` into pro toolbar slot typings.
packages/x-charts-premium/src/tests/slotPropsOverrides.spec.tsx	Adds Premium type-only specs validating Premium-only and shared override usage.
packages/x-charts-premium/src/ScatterChartPremium/ScatterChartPremium.tsx	Ensures tooltip slotProps includes `TooltipPropsOverrides` for ScatterChartPremium.
packages/x-charts-premium/src/RadialLineChart/RadialLineHighlightPlot.tsx	Adds `RadialLineHighlightPropsOverrides` to the premium slot typing.
packages/x-charts-premium/src/models/index.ts	Re-exports Premium override interfaces from `@mui/x-charts-premium/models`.
packages/x-charts-premium/src/models/chartsSlotsComponentsPropsPremium.ts	Introduces Premium-only `RadialLineHighlightPropsOverrides` interface.
docs/data/common-concepts/custom-components/custom-components.md	Updates common “custom components” docs to include Charts module augmentation usage.
docs/data/charts/components/components.md	Adds a “Custom slot props with TypeScript” section documenting the override pattern.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

 import { ChartsSurface } from '@mui/x-charts/ChartsSurface';
 import { ChartsAxisHighlight } from '@mui/x-charts/ChartsAxisHighlight';
 import { ChartsTooltip, type ChartsTooltipProps } from '@mui/x-charts/ChartsTooltip';
+import type { TooltipPropsOverrides } from '@mui/x-charts/models';


  type XAxis,
  type YAxis,
 } from '@mui/x-charts/internals';
+import type { TooltipPropsOverrides } from '@mui/x-charts/models';


  type ChartsTooltipContainerProps,
  type ChartsTooltipClasses,
 } from '@mui/x-charts/ChartsTooltip';
+import type { TooltipPropsOverrides } from '@mui/x-charts/models';


@@ -1,16 +1,17 @@
 import type * as React from 'react';
+import type { ToolbarPropsOverrides } from '@mui/x-charts/models';


 import { ChartsAxisHighlight } from '@mui/x-charts/ChartsAxisHighlight';
 import { ChartsLegend } from '@mui/x-charts/ChartsLegend';
 import { ChartsTooltip, type ChartsTooltipProps } from '@mui/x-charts/ChartsTooltip';
+import type { TooltipPropsOverrides } from '@mui/x-charts/models';


+declare module '@mui/x-charts/models' {
+  interface TooltipPropsOverrides {
+    heatmapTooltipExtra?: string;
+  }
+}
+
+declare module '@mui/x-charts-pro/models' {
+  // Pro base slots
+  interface BaseDividerPropsOverrides {


+declare module '@mui/x-charts/models' {
+  interface TooltipPropsOverrides {
+    scatterPremiumTooltipExtra?: string;
+  }
+}
+
+declare module '@mui/x-charts-premium/models' {
+  interface RadialLineHighlightPropsOverrides {
+    customRadialLineHighlightProp?: string;


…into charts-custom-slots

Copilot

Pull request overview

Copilot reviewed 41 out of 41 changed files in this pull request and generated 1 comment.

sai6855 · 2026-05-21T13:24:27Z

  /**
   * Note: MUI's `ToggleButton` has an incompatible `href` prop, so it must be cast:
   * `ToggleButton as unknown as React.ComponentType<ChartBaseToggleButtonProps>`.
   */


fixed here 100da90

Copilot

Pull request overview

Copilot reviewed 41 out of 41 changed files in this pull request and generated 7 comments.

 }
 export interface BarElementSlotProps {
-  bar?: SlotComponentPropsFromProps<BarProps, {}, BarElementOwnerState>;
+  bar?: SlotComponentPropsFromProps<BarProps & BarPropsOverrides, {}, BarElementOwnerState>;


+    BarLabelProps & BarLabelPropsOverrides,
+    {},


+    AnimatedLineProps & LinePropsOverrides,
+    {},


+    AnimatedAreaProps & AreaPropsOverrides,
+    {},


+    LineHighlightElementProps & LineHighlightPropsOverrides,
+    {},


+    CommonOverlayProps & LoadingOverlayPropsOverrides,
+    {},
+    {}
+  >;
+  noDataOverlay?: SlotComponentPropsFromProps<
+    CommonOverlayProps & NoDataOverlayPropsOverrides,
+    {},


+    RadialLineHighlightElementProps & RadialLineHighlightPropsOverrides,
+    {},


Copilot

Pull request overview

Copilot reviewed 41 out of 41 changed files in this pull request and generated no new comments.

alexfauquette

Over all look nice. I will give a deeper look tomorow

alexfauquette · 2026-05-21T13:43:33Z

+:::success
+This section focuses on module augmentation.
+
+See [Custom slots and subcomponents—Usage with TypeScript](/x/common-concepts/custom-components/#usage-with-typescript) if you don't want to use this approach.


I don't get this comment. It feels like this page is a workaround. Whereas it's just the same content but for charts specificly

By the way make me wonder if we should also export a PropsFromSlot generic helper

By the way make me wonder if we should also export a PropsFromSlot generic helper

I think it's already exported here 🤔
https://github.com/mui/mui-x/blob/master/packages/x-charts/src/models/index.ts#L22

I don't get this comment. It feels like this page is a workaround. Whereas it's just the same content but for charts specificly

Removed, also removed block from this suggestion #22519 (comment)

alexfauquette · 2026-05-21T13:48:43Z

+
+```ts
+declare module '@mui/x-charts' {
+  interface TooltipPropsOverrides {
+    label: string;
+  }
+}
+```
+
+```tsx
+function CustomTooltip({ label }: PropsFromSlot<LineChartSlots['tooltip']>) {
+  return <div>{label}</div>;
+}
+
+function MyApp() {
+  return (
+    <LineChart
+      series={[{ data: [1, 2, 3] }]}
+      slots={{ tooltip: CustomTooltip }}
+      slotProps={{ tooltip: { label: 'Value' } }}
+    />
+  );
+}
+```
+
+See [Data Grid - Custom slots and subcomponents—Custom slot props with TypeScript](/x/react-data-grid/components/#custom-slot-props-with-typescript) or [Charts - Custom slot props with TypeScript](/x/react-charts/components/#custom-slot-props-with-typescript) for more details.


Not sure it's usefull to have a code sample per library

Suggested change

```ts

declare module '@mui/x-charts' {

interface TooltipPropsOverrides {

label: string;

}

}

```

```tsx

function CustomTooltip({ label }: PropsFromSlot<LineChartSlots['tooltip']>) {

return <div>{label}</div>;

}

function MyApp() {

return (

<LineChart

series={[{ data: [1, 2, 3] }]}

slots={{ tooltip: CustomTooltip }}

slotProps={{ tooltip: { label: 'Value' } }}

/>

);

}

```

See [Data Grid - Custom slots and subcomponents—Custom slot props with TypeScript](/x/react-data-grid/components/#custom-slot-props-with-typescript) or [Charts - Custom slot props with TypeScript](/x/react-charts/components/#custom-slot-props-with-typescript) for more details.

For more details, see:

- [Data Grid - Custom slots and subcomponents—Custom slot props with TypeScript](/x/react-data-grid/components/#custom-slot-props-with-typescript)

- [Charts - Custom slot props with TypeScript](/x/react-charts/components/#custom-slot-props-with-typescript) for more details.

sai6855 added 3 commits May 19, 2026 19:06

[charts][wip] Support module augmentation for slots

0e58cca

fix ts

3cbd218

fix ts

75cd061

sai6855 added typescript scope: charts Changes related to the charts. type: enhancement It’s an improvement, but we can’t make up our mind whether it's a bug fix or a new feature. labels May 19, 2026

alexfauquette approved these changes May 21, 2026

View reviewed changes

sai6855 and others added 6 commits May 21, 2026 17:23

add more types

c40d164

add for premium slots

b709b78

fix types

6c3c0c3

prettier

f46faab

fix docs

6e7b5c6

docs

b771db8

sai6855 marked this pull request as ready for review May 21, 2026 12:44

sai6855 requested a review from JCQuintas as a code owner May 21, 2026 12:44

Copilot AI review requested due to automatic review settings May 21, 2026 12:44

sai6855 changed the title ~~[charts][wip] Support module augmentation for slots~~ [charts] Support module augmentation for slots May 21, 2026

Copilot started reviewing on behalf of sai6855 May 21, 2026 12:44 View session

Copilot AI reviewed May 21, 2026

View reviewed changes

sai6855 added 2 commits May 21, 2026 18:29

fix copoilot review

6a09f9a

Merge branch 'charts-custom-slots' of https://github.com/sai6855/mui-x …

ba32445

…into charts-custom-slots

sai6855 requested a review from Copilot May 21, 2026 13:00

Copilot started reviewing on behalf of sai6855 May 21, 2026 13:00 View session

Copilot AI reviewed May 21, 2026

View reviewed changes

sai6855 added 2 commits May 21, 2026 18:40

fix

facbc70

fix tests

06b4c3b

sai6855 requested a review from Copilot May 21, 2026 13:22

Copilot started reviewing on behalf of sai6855 May 21, 2026 13:23 View session

fix copoilot comment

100da90

Copilot AI reviewed May 21, 2026

View reviewed changes

fix copoilot comment

6b4ecbb

sai6855 requested a review from Copilot May 21, 2026 13:45

Copilot AI reviewed May 21, 2026

View reviewed changes

alexfauquette reviewed May 21, 2026

View reviewed changes

sai6855 and others added 3 commits May 21, 2026 19:30

fix review, clean up docs

ed95c74

prettier

b524628

docs:api

4845bdb

		@@ -1,16 +1,17 @@
		import type * as React from 'react';
		import type { ToolbarPropsOverrides } from '@mui/x-charts/models';

		RadialLineHighlightElementProps & RadialLineHighlightPropsOverrides,
		{},

Uh oh!

Conversation

sai6855 commented May 19, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Add module augmentation support for all slots in Charts

Coverage

Where overrides live

Notes

Tests

Docs

Uh oh!

code-infra-dashboard Bot commented May 19, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Deploy preview

Bundle size

Performance

Uh oh!

sai6855 commented May 19, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

alexfauquette left a comment

Choose a reason for hiding this comment

Uh oh!

alexfauquette May 21, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

sai6855 May 21, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

alexfauquette left a comment

Choose a reason for hiding this comment

Uh oh!

alexfauquette May 21, 2026

Choose a reason for hiding this comment

Uh oh!

alexfauquette May 21, 2026

Choose a reason for hiding this comment

Uh oh!

sai6855 May 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

alexfauquette May 21, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

sai6855 commented May 19, 2026 •

edited

Loading

code-infra-dashboard Bot commented May 19, 2026 •

edited

Loading

sai6855 commented May 19, 2026 •

edited

Loading

sai6855 May 21, 2026 •

edited

Loading