Skip to content

[charts-premium] Add the Excel export toolbar entry - #23644

Draft
JCQuintas wants to merge 10 commits into
mui:masterfrom
JCQuintas:charts-excel-toolbar
Draft

JCQuintas wants to merge 10 commits into
mui:masterfrom
JCQuintas:charts-excel-toolbar

Conversation

@JCQuintas

Copy link
Copy Markdown
Member

Part of #14246. Stacked on #23597, which adds the export plugin, so this branch contains that PR's commits too. Review only the last commit, or wait until #23597 merges and this diff shrinks to its own change.

This PR

Puts the Excel export in the toolbar, so it is reachable without apiRef.

<BarChartPremium showToolbar {...props} />

The export menu gains a Download as Excel entry next to Print and the image formats.

{{ demo in docs/data/charts/export/ExportChartAsExcel.tsx }}

Customize it, or remove the entry, through the toolbar slot:

<BarChartPremium
  showToolbar
  slotProps={{ toolbar: { excelExportOptions: { fileName: 'revenue' } } }}
/>

How it is wired

ChartsToolbarPro gains a generic exportMenuItems render prop, about four lines, called with { onClose } at the end of the export menu. No Premium concept enters x-charts-pro, and the alternative was duplicating a 250-line toolbar into Premium.

ChartsToolbarPremium wraps the Pro toolbar and passes that render prop. It is now the default toolbar of the four Premium charts that own their plugin list: BarChartPremium, ScatterChartPremium, HeatmapPremium and CandlestickChart. The radial charts have no default toolbar today, so they are left alone.

ChartsToolbarExcelExportTrigger follows ChartsToolbarImageExportTrigger, with one addition: an optional onExport prop overriding apiRef.current.exportAsExcel. The Data Grid integration needs that, since the chart there is rendered by the Pro components.

Localization: one new key, toolbarExportExcel, defaulting to Download as Excel, matching the Data Grid's string. pnpm l10n adds the usual commented placeholder to the partial locales.

Tests

Three tests render BarChartPremium with showToolbar, open the export menu, and check the entry is listed, that clicking it downloads an .xlsx with the configured name, and that disableToolbarButton hides it.

Full suites pass for x-charts (648), x-charts-pro (228) and x-charts-premium (159), along with typecheck, eslint, prettier and vale.

Generated with pnpm proptypes, pnpm docs:api, pnpm docs:typescript:formatted and pnpm l10n.

Exposes getDataAsExcel and exportAsExcel on top of the internal data
layer. Not registered on any chart yet.
Adds it to the default Premium plugins and to the Bar, Scatter, Heatmap,
Candlestick, RadialLine, RadialBar, radial and geo data provider lists.
Bar and Scatter now own their lists instead of aliasing Pro's.

HeatmapPremium never used its own list: Pro's useHeatmapProps hardcodes
the Pro plugins and types apiRef against them, so both are overridden.

ChartPremiumApi gains keys for scatter, heatmap, ohlc, radialLine and
radialBar, and composition now maps to the Premium defaults.
Covers getDataAsExcel on each Premium chart that registers the plugin
and on a composition, option pass-through, the empty chart, and the
download name for exportAsExcel.
The declaration build could not name the inferred type of the plugin
override (TS4058 on CommonExperimentalFeatures).
DEFAULT_CHART_EXCEL_OPTIONS was the only runtime value exported from a
.types.ts file across the charts packages. It now lives in defaults.ts,
like the Pro export plugin's defaults.
ChartsToolbarPro gains a generic exportMenuItems render prop, so the
Premium toolbar can append to the export menu without duplicating it.

ChartsToolbarPremium wraps it with ChartsToolbarExcelExportTrigger, and
becomes the default toolbar of the Premium charts that register the
export plugin. The trigger takes an onExport override, which the Data
Grid integration will use.

Adds the toolbarExportExcel locale key, the docs section and its demo.
@JCQuintas JCQuintas added type: new feature Expand the scope of the product to solve a new problem. plan: Premium Impact at least one Premium user. feature: Export scope: charts Changes related to the charts. labels Sep 18, 2026
@JCQuintas JCQuintas self-assigned this Sep 18, 2026
@code-infra-dashboard

code-infra-dashboard Bot commented Sep 18, 2026

Copy link
Copy Markdown

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 🔺+39B(+0.01%) 🔺+17B(+0.01%)
@mui/x-charts-pro 🔺+101B(+0.02%) 🔺+30B(+0.02%)
@mui/x-charts-premium 🔺+10.8KB(+1.63%) 🔺+3.28KB(+1.64%)
@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-scheduler 0B(0.00%) 0B(0.00%)
@mui/x-scheduler-premium 0B(0.00%) 0B(0.00%)
@mui/x-chat 0B(0.00%) 0B(0.00%)
@mui/x-license 0B(0.00%) 0B(0.00%)

Details of bundle changes

Performance

Total duration: 1,663.74 ms -167.15 ms(-9.1%) | Renders: 63 (+0) | Paint: 2,282.25 ms -242.58 ms(-9.6%)

Test Duration Renders
RadialLineChart with big data amount 58.50 ms 🔺+26.33 ms(+81.8%) 2 (+0)
Area chart with big data amount (no marks) 43.28 ms 🔺+8.28 ms(+23.7%) 2 (+0)
Heatmap: 100x100 grid 258.14 ms ▼-69.18 ms(-21.1%) 2 (+0)
RangeBarChart with big data amount 51.23 ms ▼-28.35 ms(-35.6%) 2 (+0)
BarChartPro with big data amount 34.40 ms ▼-23.42 ms(-40.5%) 2 (+0)

…and 9 more (+12 within noise) — details

Metric alarms

Test Metric Change
RadialLineChart with big data amount bench:paint 🔺 +36.24 ms

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

feature: Export plan: Premium Impact at least one Premium user. scope: charts Changes related to the charts. type: new feature Expand the scope of the product to solve a new problem.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant