Use plot title as default filename for "Download plot" button by emilykl · Pull Request #7828 · plotly/plotly.js · GitHub

Addresses #5124

Use layout.title.text as default download filename when neither config.toImageButtonOptions.filename or gd.fn are defined.
- "slugify" title by lowercasing, removing HTML tags, removing most special characters, and replacing whitespace with hyphens
- Ignore MathJax titles entirely, to avoid generating horrible filenames like ihbarfracdpsidt-v-frac-hbar22mnabla2p.png (fall back to subtitle if title is MathJax)
- Add helper function to get title and subtitle from _fullLayout (so that template values are respected) while ignoring the "Click to add title" placeholder
Change fallback filename to plot-image rather than newplot
Change notifier wording for image download slightly, to better match button tooltip (remove references to "snapshot")
Add/modify tests for the above

Steps for testing

Pull this branch and run devtools (npm run start)
Load any plot in the devtools
Click the "Download plot as PNG" button (camera icon) and verify that the downloaded plot filename corresponds to the plot title
Repeat for several more plots, including the below:
a. scatter_marker_line_dash (normal example, filename should match)
b. bar-like_traces_tozero (title is defined in template, filename should match)
c. automargin-small-width (no title, should default to plot-image.png)
d. mathjax (MathJax title, should default to plot-image.png)

…ge rather than newplot

Nice!
What's the expected behavior when title.text is set to a dot?

Plotly.newPlot(gd, [{y: [1, 2]}], {title: {text: "."}});

Right now it returns png.png!

You may also consider adding the subtitle.text if present.

I'm open to that, but I'm having trouble thinking of a real-world example where adding the subtitle would result in a better filename.

I suppose maybe in the case where you have multiple plots with the same title but different subtitles, that could differentiate the filenames.

Do you have any particular examples in mind?

Here is a common example where subtitle could be used to provide the time stamp of the graph.

Plotly.newPlot(gd, [{y: [1, 2]}], {title: {text: "Hourly Temp. (°C) Forecast - Montréal", subtitle: {text: "9 June 2026"}}});

That's a positive example, if we add the subtitle we would get hourly-temp-c-forecast-montreal-9-june-2.png instead of hourly-temp-c-forecast-montreal.png. Though I also think the filename with just the title is fine.

However I also see cases where adding the subtitle gives a worse result, for example this plot in the docs where we would end up with life-expectancy-life-expectancy-by-europ.png rather than life-expectancy.png.

I've updated the logic to fall back to the subtitle in cases where the title is missing or consists of MathJax, which I think might be the best of both worlds.

Nice! What's the expected behavior when title.text is set to a dot?
Plotly.newPlot(gd, [{y: [1, 2]}], {title: {text: "."}});
Right now it returns png.png!

Good catch!! That's a wild edge case, I guess I would have expected it to return ..png, which also isn't a good outcome.

I suppose . should either be treated the same as whitespace characters, or simply removed, I'll make that change.

Nice! What's the expected behavior when title.text is set to a dot?
Plotly.newPlot(gd, [{y: [1, 2]}], {title: {text: "."}});
Right now it returns png.png!
Good catch!! That's a wild edge case, I guess I would have expected it to return ..png, which also isn't a good outcome.

I suppose . should either be treated the same as whitespace characters, or simply removed, I'll make that change.

@archmoj Updated — I added . to the list of forbidden characters, so it will be removed, and therefore a plot with the title . results in a download named plot-image.png.

I'm not sure about lowering the case.

I'm going to keep the lowercasing for now, since it's consistent with the lowercasing in newplot.png and also matches the way most URLs are lowercased. However open to changing it in the future depending on feedback.

Co-authored-by: Cameron DeCoster <cameron.decoster@gmail.com>

…icode classes) from filenames

Looks good. I made one small suggestion, but feel free to ignore it.

Co-authored-by: Cameron DeCoster <cameron.decoster@gmail.com>

emilykl added 4 commits June 8, 2026 15:28

use plot title for download filename, and change fallback to plot-ima…

6d907c1

…ge rather than newplot

add tests

5c96fa4

slightly change notifier wording for image download

7cf0e1f

ignore tex titles for filename

1d8668a

emilykl requested a review from camdecoster June 8, 2026 21:15

archmoj reviewed Jun 8, 2026

View reviewed changes

emilykl added 2 commits June 9, 2026 11:32

expand forbidden chars

0a74890

update locales files

6a487f0

archmoj reviewed Jun 9, 2026

View reviewed changes

Comment thread src/lib/slugify.js Outdated

archmoj reviewed Jun 9, 2026

View reviewed changes

camdecoster reviewed Jun 9, 2026

View reviewed changes

Comment thread src/lib/svg_text_utils.js Outdated

Comment thread src/snapshot/download.js Outdated

Comment thread lib/locales/cs.js

emilykl and others added 6 commits June 16, 2026 15:12

also remove = + ; chars from filenames

93599ac

Apply suggestion from @camdecoster

2cfef6d

Co-authored-by: Cameron DeCoster <cameron.decoster@gmail.com>

update translations

7b7753f

fall back to plot subtitle if title is not suitable for filename

fc722c3

exclude ALMOST ALL symbols and punctuation (more aggressive, using Un…

9c1d9a0

…icode classes) from filenames

ignore biome rule

8895c4c

camdecoster approved these changes Jun 17, 2026

View reviewed changes

Comment thread src/lib/svg_text_utils.js Outdated

Update src/lib/svg_text_utils.js

d8e3bf9

Co-authored-by: Cameron DeCoster <cameron.decoster@gmail.com>

emilykl merged commit 7b9c347 into v4.0 Jun 17, 2026
83 checks passed

emilykl deleted the 5124-feature branch June 17, 2026 20:08

emilykl mentioned this pull request Jun 18, 2026

Add missing draftlog for PR 7828 #7851

Merged

+                      .replace(UNICODE_REPLACEMENT_CHAR_REGEX, '')   // Drop Unicode replacement chars left by previous step
+                      .replace(HTML_TAGS_REGEX, ' ')                 // Remove < > tags, such as <br> (replace with space)
+                      .replace(FORBIDDEN_CHARS_REGEX, '')            // Remove forbidden filename characters
+                      .toLowerCase()                                 // Lowercase everything

+                          // so ignore the title entirely if it contains LaTeX markup
+                          if (!svgTextUtils.matchTex(plotTitle)) {
+                              potentialFilename = Lib.slugify(plotTitle, 40);
+                          }

Use plot title as default filename for "Download plot" button by emilykl · Pull Request #7828 · plotly/plotly.js · GitHub

Uh oh!

Uh oh!

Use plot title as default filename for "Download plot" button - #7828

Use plot title as default filename for "Download plot" button#7828emilykl merged 13 commits intov4.0plotly/plotly.js:v4.0from 5124-featureplotly/plotly.js:5124-featureCopy head branch name to clipboard

Conversation

emilykl commented Jun 8, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Steps for testing

Uh oh!

archmoj commented Jun 8, 2026

Uh oh!

archmoj Jun 8, 2026

Choose a reason for hiding this comment

Uh oh!

emilykl Jun 8, 2026

Choose a reason for hiding this comment

Uh oh!

archmoj Jun 9, 2026

Choose a reason for hiding this comment

Uh oh!

emilykl Jun 16, 2026

Choose a reason for hiding this comment

Uh oh!

emilykl commented Jun 8, 2026

Uh oh!

emilykl commented Jun 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

archmoj Jun 9, 2026

Choose a reason for hiding this comment

Uh oh!

emilykl Jun 17, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

camdecoster left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Use plot title as default filename for "Download plot" button#7828
emilykl merged 13 commits into
v4.0from
5124-feature

emilykl commented Jun 8, 2026 •
edited
Loading

emilykl commented Jun 9, 2026 •
edited
Loading