Add viewbox attibute to make plot scale

[jcubic]

This is upstream form plotly/plotly.R#1065 request for viewBox attribute, I've made the change in this PR in my own repo jcubic/plotly.js#1 not sure how to edit css.

[alexcjohnson]

Thanks for the issue and proactive PR @jcubic! Before we get into the PR though, I'd like to understand a little better the issue you're trying to solve - can you make a codepen or similar that shows what the current behavior is that you'd like to change?

Note: there are also some known issues with scaling plots that I'm afraid we'll run into here, see #888, #1988, #1902

[jcubic]

So the issue I'm having is in Shiny R application, I have application where I originally have ggplot and when window get resized I was calculating height based on width of the window and rendered ggplot. But when we added plotly there is no need to calculate the width and rerender plotly because we can render it once and then make it resize because it's svg so it should scale. I set initial width of 1300 and height get calculated for it.

My PR have issue though because I now have empty space below plot because it have fixed height but if one of svg had position: static (original value) and container didn't have height it should scale correctly.

I've created codepen with copy paste of svg generated by plotly R package, it would be hard to recreate it using plotly.js.

https://codepen.io/jcubic/pen/vryQmr

if you resize the window the plot scale so it should work the same when you have plotly running with same svg output, this is not how plotly works becasue it have hard coded width in pixels.

there are two attributes on svg (same as the one added by my PR) and css that overwrite width of the container. Not sure how to edit css because when I look at inspector there is this inline css (<style> tag):

.js-plotly-plot .plotly .main-svg {
    position: absolute;
    top: 0px;
    left: 0px;
    pointer-events: none;
}

only the first svg should have this css but I'm not sure from where it came from.

I will use this version of plotly in my code but I thought that you may be interested with the change.

[jcubic]

One more concern about my change is tooltip not sure if the position is correct after resize.

[alexcjohnson]

I see, thanks for the extra info. You're right to be concerned about tooltips - that's #888 and probably applies here as well. Anyway we would probably need to make it a config option to allow plots to scale this way, I'm fairly certain some users would consider this a breaking change.

[etpinard]

Anyway we would probably need to make it a config option to allow plots to scale this way, I'm fairly certain some users would consider this a breaking change.

No probably here, I'd say this is 100% necessary.

[jcubic]

I need to merge the PR and will not work on this because we need more changes to plotly.js (disabling clicking on legend).

[alexcjohnson]

disabling clicking on legend

As of v1.37 and #2581:
gd.on('plotly_legendclick', function() { return false; });

[etpinard]

Closing. Probably obsolete.

[patrickmatte]

The viewBox attribute is neccessary on svg elements, without it, it is impossible to scale it.

[antoinerg]

@patrickmatte If you save the image to SVG using Plotly.toimage, it will set a viewBox attribute:

plotly.js/src/snapshot/tosvg.js

Lines 146 to 150 in 03b7e09

	if(format === 'svg' && scale) {
	svg.attr('width', scale * width);
	svg.attr('height', scale * height);
	svg.attr('viewBox', '0 0 ' + width + ' ' + height);
	}

However, it is true that it doesn't appear otherwise:
.
I think we would have to test whether that all the interactive parts of plotly.js (like hover) still work properly when resizing an SVG with viewbox.

In the meantime, the recommended/battle tested way to resize figures is to call Plotly.relayout or use responsive: true to react to window events.

[patrickmatte]

Thanks @antoinerg I can confirm that the position of the hover elements is off when the svg is scaled, but in my specific case, I've set hovermode to false because I don't need hover events. I've added the viewBox atttribute manually with setAttribute("viewBox", "0 0 773 188") and now everything scales fine. I also had to override the size of the plotly div containers like this.
.plot-container.plotly, .svg-container, .main-svg {
width: 100% !important;
height: 100% !important;
}

[jcubic]

It's not that easy to just add viewbox (we need this so it don't rerender each time the window change size), as I remember correctly every part of the library use pixels to calculate position and other dimensions, just adding viewbox broken the library, I've tried to update the code but it was too much work. And since ploty is not compatible with ggplot we couldn't use the library because we have lots of bugs in our plots (we use lots of features of ggplot) and it was impossible to fix with ploty.

Our solution was to use svglite with ggplot (svg renderer) and since we only needed tooltips on plots we created them in JS/CSS with help from R. I think that we will publish this R package as Open Source if it will be accepted by our company.