plotly
Chart overflows when URL changes
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!
Oh that's an exciting one... thanks @rubenhelsloot .
We add the full URL to the clip path references only when there's a <base> tag - which it sounds like you have, and in fact precisely because we use the full URL in this case, modifying the base tag will not affect this either for better or worse.
Seems like what we really want is to listen to changes in the page URL and update our internal references to match. Note that it's not just clip paths though those are the most common and noticeable. Also gradients and the new pattern fills.
Plotly folks probably won't have time to work on this anytime soon unless someone is able to sponsor it, but we'd be glad to review a PR if anyone feels up to contributing. For reference, here's where we interrogate the <base> tag:
https://github.com/plotly/plotly.js/blob/d0c2fac449bca4adbc9fb393cee03e11b7a603ef/src/plot_api/plot_api.js#L431-L433
And here's where we use it:
https://github.com/plotly/plotly.js/blob/d0c2fac449bca4adbc9fb393cee03e11b7a603ef/src/components/drawing/index.js#L1308-L1316
I ran into this issue as well. However, this is only an issue in Chrome. Firefox doesn't reproduce this behavior, and clips correctly.
In my case, I have plotly running under a Tomcat application, so I have no choice really but to use the base tag.
I just grabbed the unminified version, and edited line 109796 to force it to the localId only.
s.attr('clip-path', 'url(#' + localId + ')');
I might submit a PR to fix this properly if I have time.
I have also ran into this issue and I would really like to contribute to getting it fixed.
