[charts-pro] Add chart title and caption to export demo #19524

bernardobelchior · 2025-09-10T14:30:18Z

Add a demo that shows how to export the chart title and caption. These aren't part of the chart per se, so they aren't exported by default. This demo is meant as a guide for users looking to customize their export.

Exported PNG:

mui-bot · 2025-09-10T14:32:01Z

Deploy preview: https://deploy-preview-19524--material-ui-x.netlify.app/

Updated pages:

docs/data/charts/export/export.md

Bundle size report

Bundle	Parsed size	Gzip size
@mui/x-data-grid	0B^(0.00%)	0B^(0.00%)
@mui/x-data-grid-pro	0B^(0.00%)	▼-1B^(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	🔺+213B^(+0.05%)	🔺+113B^(+0.09%)
@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%)

Details of bundle changes

Generated by 🚫 dangerJS against fe6672a

codspeed-hq · 2025-09-10T14:44:29Z

CodSpeed Performance Report

Merging #19524 will not alter performance

_{Comparing bernardobelchior:charts-add-title-and-caption (fe6672a) with master (844f100)¹}

Summary

✅ 10 untouched

No successful run was found on master (69a4e2b) during the generation of this report, so 844f100 was used instead as the comparison base. There might be some changes unrelated to this pull request in this report. ↩

alexfauquette

The feature looks good. I'm wondering if a better apporach for the user would be to use composition with different order.

<DataProvider>
  <Toolbar />
  <div ref={chartRef}>
    <p>The Title</p>
    <ChartSurface>{...}</ChartSurface>
    <p>caption</p>
  </div>
</DataProvider>

alexfauquette · 2025-09-11T14:27:01Z

docs/data/charts/export/ExportChartOnBeforeExport.tsx

-    `.${legendClasses.root}`,
-  ) as HTMLElement | null;
+    const stack = document.createElement('div');
+    const chart = document.body.firstElementChild!;

-  if (legend) {
-    legend.style.display = 'flex';
-  }
+    stack.style.display = 'flex';
+    stack.style.flexDirection = 'column';
+    stack.style.width = 'fit-content';
+    stack.style.margin = 'auto';
+
+    document.body.appendChild(stack);
+
+    const title = titleRef.current;
+    if (title) {
+      const titleClone = title.cloneNode(true) as HTMLSpanElement;
+      stack.appendChild(titleClone);
+    }
+
+    document.body.removeChild(chart);
+    stack.appendChild(chart);
+


Might worth some comments like:

Create a parent stack div to glue organize elements

Move the title in the stack

Move the chart as a next child

Move the caption as a next child

bernardobelchior · 2025-09-11T16:57:46Z

The feature looks good. I'm wondering if a better apporach for the user would be to use composition with different order.
<DataProvider>
  <Toolbar />
  <div ref={chartRef}>
    <p>The Title</p>
    <ChartSurface>{...}</ChartSurface>
    <p>caption</p>
  </div>
</DataProvider>

So in the demo we should render the chart using composition instead of the normal way?

alexfauquette · 2025-09-12T06:58:53Z

So in the demo we should render the chart using composition instead of the normal way?

Not really, because with composition you don't need to modify the onBefore.
I just think we shoudl enphasis that with coposition most of those workaround are not needed.

What about adding a "Downloaded from mui.com" bellow the chart that appears only at export, and mofiy the sentence as follow

Instead of "For example, you can add the title and caption to the exported chart, as shown below:"

In the following demo, the onBeforeExport() is used to:

Add the title and caption to the exported chart.

Add an extra text "Downloaded from mui.com" bellow the chart

If you're using composition you might not need the onBeforeExport() for to add the title and caption to the exported chart.

bernardobelchior · 2025-09-12T07:27:37Z

Not really, because with composition you don't need to modify the onBefore. I just think we shoudl enphasis that with coposition most of those workaround are not needed.

That makes sense, but does it make sense to specify that in the onBeforeExport section?

We have a composition section for the export. What about updating that example with a title and a caption and mentioning in the onBeforeExport that we don't need to do it when using composition and link to the composition section?

alexfauquette · 2025-09-12T14:39:44Z

We have a composition section for the export. What about updating that example with a title and a caption and mentioning in the onBeforeExport that we don't need to do it when using composition and link to the composition section?

Looks good 👍

bernardobelchior · 2025-09-12T15:13:11Z

We have a composition section for the export. What about updating that example with a title and a caption and mentioning in the onBeforeExport that we don't need to do it when using composition and link to the composition section?

Looks good 👍

Done 👍

bernardobelchior added 4 commits September 10, 2025 12:26

[charts-pro] Add demo with title and caption

d73862a

Gen

f66de70

Make chart export responsive to changes

8bfeda5

Fix chart being left aligned

37b8a3a

bernardobelchior added type: enhancement It’s an improvement, but we can’t make up our mind whether it's a bug fix or a new feature. scope: charts Changes related to the charts. labels Sep 10, 2025

Fix breaking changes

b4ab616

bernardobelchior force-pushed the charts-add-title-and-caption branch from ec092cd to b4ab616 Compare September 10, 2025 14:36

bernardobelchior added 2 commits September 10, 2025 15:45

Fix types

f1eca69

Fix failing visuals

efd5d94

bernardobelchior force-pushed the charts-add-title-and-caption branch from 2e0429b to efd5d94 Compare September 10, 2025 17:17

bernardobelchior marked this pull request as ready for review September 11, 2025 08:32

bernardobelchior requested review from JCQuintas and alexfauquette as code owners September 11, 2025 08:32

alexfauquette approved these changes Sep 11, 2025

View reviewed changes

Add comments

9fd1bf1

Update docs

fe6672a

bernardobelchior merged commit 92e4dc2 into mui:master Sep 15, 2025
22 checks passed

bernardobelchior deleted the charts-add-title-and-caption branch September 15, 2025 16:12

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

[charts-pro] Add chart title and caption to export demo #19524

[charts-pro] Add chart title and caption to export demo #19524

Uh oh!

bernardobelchior commented Sep 10, 2025

Uh oh!

mui-bot commented Sep 10, 2025 •

edited

Loading

Uh oh!

codspeed-hq bot commented Sep 10, 2025 •

edited

Loading

Uh oh!

alexfauquette left a comment

Uh oh!

alexfauquette Sep 11, 2025

Uh oh!

bernardobelchior commented Sep 11, 2025

Uh oh!

alexfauquette commented Sep 12, 2025

Uh oh!

bernardobelchior commented Sep 12, 2025

Uh oh!

alexfauquette commented Sep 12, 2025

Uh oh!

bernardobelchior commented Sep 12, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Uh oh!

[charts-pro] Add chart title and caption to export demo #19524

[charts-pro] Add chart title and caption to export demo #19524

Uh oh!

Conversation

bernardobelchior commented Sep 10, 2025

Uh oh!

mui-bot commented Sep 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Bundle size report

Uh oh!

codspeed-hq bot commented Sep 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

CodSpeed Performance Report

Merging #19524 will not alter performance

Summary

Footnotes

Uh oh!

alexfauquette left a comment

Choose a reason for hiding this comment

Uh oh!

alexfauquette Sep 11, 2025

Choose a reason for hiding this comment

Uh oh!

bernardobelchior commented Sep 11, 2025

Uh oh!

alexfauquette commented Sep 12, 2025

Uh oh!

bernardobelchior commented Sep 12, 2025

Uh oh!

alexfauquette commented Sep 12, 2025

Uh oh!

bernardobelchior commented Sep 12, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

mui-bot commented Sep 10, 2025 •

edited

Loading

codspeed-hq bot commented Sep 10, 2025 •

edited

Loading