How to resize HTML widget using saveWidget in htmlwidgets R (reopened question)?

Question

I would like to re-open a former topic on StackOverflow, concerning a problem I faced today, which I fixed in the same way as described by matheuscburger, by changing the size of the widget.

Topic of rasyidstat - 2018

Are there new options concerning the possibility to change the size of the HTML widget using saveWidget from the library htmlwidgets, in export operation from R?

Below the sample code:

library(ggplot2)
library(ggiraph)
library(patchwork)
library(cowplot)

mtcars <- mtcars
mtcars$tooltip <- rownames(mtcars)

gg1 <- ggplot(mtcars) +
  geom_point_interactive(aes(x = drat, y = wt, color = qsec, 
    tooltip = tooltip, data_id = tooltip ), size = 4) 

gg2 <- ggplot(mtcars) +
  geom_point_interactive(aes(x = qsec, y = disp, color = mpg, 
    tooltip = tooltip, data_id = tooltip ), size = 4)



oggetto <- girafe( ggobj = plot_grid(gg1, gg2), width_svg = 8, height_svg = 4)
oggetto

Below the code for exporting:

library(htmlwidgets)
saveWidget(oggetto, file= "Grafico.html", selfcontained = TRUE, libdir = "libs", knitrOptions = list(width = 1200, height = 500))

With knitrOptions = list(width = 1200, height = 500) uneffective to defining the sizes.

Answer 1

I don't know how to do that when you save it, but you can definitely do that when you create the widget or at any time before you save it.

There are several default sizing mechanisms built into HTML widgets.

You can set the sizes here with pixels, points, percentages, and so on. You can change these after creating the widget like this:

oggetto[["sizingPolicy"]][["defaultWidth"]] <- "50%"

Alternatively, you could just assign a new size to present itself when you render it. I used percentages here, but you could use any HTML/CSS accepted sizing mechanisms. However, I would suggest that you use dynamic sizing because it's HTML (i.e., percentages, em, rem, etc.).

oggetto <- girafe(ggobj = plot_grid(gg1, gg2), 
                  width_svg = 8, height_svg = 4) %>% 
  onRender("
           function(el) {
             el.setAttribute('style', 'height: 50%; width: 50%;');
           }")