4  Sizing

4.1 ggiraph and its aspect ratio

The width and height of the graphics region are defined in inches with arguments width_svg and height_svg. The default values are 6 and 5 inches. The ratio width/height defines the aspect ratio of the graphic. It is used to define viewbox attribute of the SVG result and to produce the original SVG file.

4.1.1 Resizing with a fixed aspect ratio

The displayed graphics can be resized only in relation to the width and inside the HTML container. Once the graphic is produced, two options are available, allow resizing or freeze the size of the displayed graphic to its exact size.

If you want to change the aspect ratio, it has to be be done in the girafe() function call using the width_svg and height_svg arguments.

If you use girafe() in an ‘R Markdown’ document, we recommend to let these arguments unset; the knitr options fig.width and fig.height are used instead.

4.2 Adjusting the width or not

By default the size of the graph is automatically adjusted to 100% of the width of the web page containing it. Graphic will be resized if its container is resized.

This behavior can be controlled by using the opts_sizing() function:

  • The percentage of the width to be used can be defined with the width parameter which takes a value between 0 and 1.
  • The resizing can also be cancelled using argument rescale=FALSE. In this case, the use of width will have no effect.

We will use the following graphic to illustrate opts_sizing():

library(tidyverse)
mtcars_db <- rownames_to_column(mtcars, var = "carname")

gg_scatter <- ggplot(
  data = mtcars_db,
  mapping = aes(
    x = disp, y = qsec, color = wt,
    # here we add iteractive aesthetics
    tooltip = carname, data_id = carname
  )
) +
  geom_point_interactive(
    size = 3, hover_nearest = TRUE
  )
girafe(
  ggobj = gg_scatter,
  options = list(opts_sizing(rescale = TRUE, width = .5))
)
girafe(
  ggobj = gg_scatter,
  options = list(opts_sizing(rescale = FALSE))
)

4.3 The flexdashboard case

‘ggiraph’ and its aspect ratio are causing headaches for users who have chosen to integrate it into a ‘flexdashboard’.

It most often can be solved by defining an aspect ratio close to the one of its container.

If not perfect solution, that is the only we can recommand. ‘ggiraph’ was not designed to fit in height and width to its HTML container. This is a limitation to consider and you should not expect any change in behavior in this direction soon.