Black Lives Matter. Please consider donating to Black Girls Code today.

How to force a proportionate resizing of plotly chart in any container/browser/viewer?


I’m fighting with logic to persuade it that my coord_equal() statement in ggplot2 chart is actually an extremely important statement especially when it comes to drawing equal hexagons. It means that x scale must equate to y scale, i.e. the chart can only be resized proportionately.
I managed to partially achieve the desired result in browser and in Rstudio viewer by setting

my_plotly_object$sizingPolicy$browser$fill <- FALSE
my_plotly_object>$sizingPolicy$viewer$fill <- FALSE

However, apparently the internal viewer on site is considered neither “browser” nor “viewer” but some other rendering container (undocumented), and my online chart is still resized to fill all available width space, turning my beautiful equal hexagons into awful squeezed ones.

Is there a way to either globally prohibit a disproportionate resizing of a plotly chart on any device or at least to set a proper sizingPolicy for viewer?

you can write it yourself by giving properties to the layout object

an example with angular’s JQlite
layout.width = angular.element( document.getElementsByClassName(‘myClass’))[0].clientWidth;
layout.height = layout.width*height2WidthRatio;

in this example the html has a div container to the graph with a class named 'myClass’
and in the controller i get the container object and get its width
than i use the container width to set the height and width of graph