26 Control the modebar

By default, the modebar appears in the top right-hand side of a plotly graph on mouse hover, and can lead to poor user-experience on small displays. Fortunately, the modebar can be completely customized via the config() function. The config() function can be helpful for a lot of things: language support (Section 30), enabling mathjax (Section 31), suppressing tip notifications (e.g., showTips), when to scroll on zoom, etc. However, this topic is all about options related to the modebar. To see a complete list of config() options, as well as their description, see the config section of the plotly.js schema().

26.1 Remove the entire modebar

The displayModeBar option makes it quick and easy to remove the entire modebar.

plot_ly() %>%
  config(displayModeBar = FALSE)

26.2 Remove the plotly logo

The displaylogo option makes it quick and easy to remove the entire modebar.

plot_ly() %>%
  config(displaylogo = FALSE)

FIGURE 26.1: Removing the plotly logo from the modebar.

26.3 Remove modebar buttons by name

Any modebar buttons can be removed by name via modeBarButtonsToRemove. The current list of modebar buttons can be found at https://github.com/plotly/plotly.js/blob/master/src/components/modebar/buttons.js

plot_ly() %>%
  config(modeBarButtonsToRemove = c("zoomIn2d", "zoomOut2d"))

FIGURE 26.2: (frefmodeBarButtonsToRemove)

26.4 Add custom modebar buttons

It is possible to supply your own modebar button icon that triggers a custom JavaScript function when clicked. You must provide a name for the icon and either a SVG path (with just the d attribute) or a full SVG element (to svg). Nowadays, there are a number of free websites that allow you to search icons and download their corresponding SVG information. When supplying path, as in Figure 26.3, you can also define an SVG transform to help size and position the icon. To define a JavaScript function to call upon clicking the icon, you can provide a string to htmlwidgets::JS(). The interactive version of Figure 26.3 adds on-graph text everytime the octocat icon is clicked. To learn more about how to leverage JavaScript from R, see Section 18.

data(octocat_svg_path, package = "plotlyBook")

octocat <- list(
  name = "octocat",
  icon = list(
    path = octocat_svg_path,
    transform = 'matrix(1 0 0 1 -2 -2) scale(0.7)'
  ),
  click = htmlwidgets::JS(
    "function(gd) {
       var txt = {x: [1], y: [1], text: 'Octocat!', mode: 'text'};
       Plotly.addTraces(gd, txt);
    }"
  )
)

plot_ly() %>%
  config(modeBarButtonsToAdd = list(octocat))

FIGURE 26.3: Supplying a custom modebar button with custom behavior.

Note that you can also use modeBarButtons to completely specify which buttons to include in the modebar. With this option, you can supply existing button names and/or your own custom buttons:

plot_ly() %>%
  config(modeBarButtons = list(list("zoomIn2d"), list(octocat)))

FIGURE 26.4: Specifying the full list of modebar buttons.

26.5 Control image downloads

By default, the toImage modebar button downloads a png file using the current size and state of the graph. With toImageButtonOptions, one can specify different sizes and filetypes, which is particularly useful for obtaining a static pdf/webp/jpeg/etc image of the plot after components have been directly manipulated, as leveraged in Figure 12.1. Here’s a basic example of configuring the 'toImage' button to download an svg file that’s 200 x 100 pixels:

plot_ly() %>%
  config(
    toImageButtonOptions = list(
      format = "svg",
      width = 200,
      height = 100
    )
  )

After downloading the svg file, you can convert it to pdf using the rsvg_pdf() function from the rsvg package (Ooms 2018).

References

Ooms, Jeroen. 2018. Rsvg: Render Svg Images into Pdf, Png, Postscript, or Bitmap Arrays. https://CRAN.R-project.org/package=rsvg.