Chart overflows when URL changes
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 18.3k
- Forks
- 2k
- Avg merge
- 2d 12h
- Merged PRs (30d)
- 28
Description
Hi all,
Firstly, thanks for the amazing product!
I'm using Plotly in a single page application, which means that the URL changes a lot. Some of these changes are made without changing the contents of the page, or at least without changing the charts rendered with Plotly.
However, Plotly uses the entire URL of the page to generate a clip-path attribute in order to deal with overflowing charts. When the URL changes, the clip path isn't valid any more, and the chart breaks. The interesting thing is, it wouldn't have been an issue if the chart had been configured without window.location.href.
Would it be possible to make this setting configurable? The only workarounds I see are to either reload every time the URL changes, or to change the base tag in the HTML <head>, which seems like it would invite a lot of other problems. If you see any others, I'd love to hear about them.
I tried have a reproducible example in Codepen, but I couldn't easily set a URL on their iframe. Instead, I just invalidate the clip-path to show what happens: https://codepen.io/rubenhelsloot/pen/eYWKQyx. The actual bug happens in Chrome, but not in Firefox. I'm pretty sure that's because Firefox doesn't re-evaluate the SVG when the URL changes, and Chrome does.
Thanks in advance!
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the linked CodePen reproduction and confirm the clip-path failure after changing the page URL in Chrome. Trace where Plotly generates the clip-path from window.location.href, then determine how a configurable alternative would behave without breaking chart overflow handling. Done means the chart remains valid after URL changes and the behavior is covered by a reproducible check.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- data-visualization, frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100