plotly / plotly.js

Open-source JavaScript charting library behind Plotly and Dash
https://plotly.com/javascript/
MIT License
16.86k stars 1.85k forks source link

Use viewbox for svg elements #7064

Open sprig opened 1 month ago

sprig commented 1 month ago

Currently plotly uses a fixed width/height layout for the svg elements. Even when using a responsive layout, the svg gets sized to fixed width/height box according to the outer div. This means that any css styling, and in particular @media print do not get applied. Is there any reason not to use a layout that is actually use controllable / customizable by setting viewbox parameters instead of fixed pixel sizes for the plots containers?

gvwilson commented 1 month ago

@alexcjohnson what's the reasoning here? thx

alexcjohnson commented 1 month ago

I don’t know all the implications of what’s being proposed here, but the primary goal is to ensure we always draw the SVG elements in a space where 1 unit is 1 pixel exactly. If we lose that, lots of things will start to look terrible, like lines for which we’ve disabled antialiasing via crisp rendering occasionally disappearing if they end up sub-pixel in width.

If we can accomplish that goal in a different way that’s more responsive then great! The current system was created long ago when we needed to support a lot of browsers that are no longer relevant today, so I’m sure there are modern features we aren’t taking advantage of. Any change we make will need very thorough enumeration of cases we currently support (there are more than you might think!), to ensure they still behave the same.