How to change plotly graph size in rmarkdown inline?

Question

I would like to see bigger plotly graphs while doing EDA in R Markdown. If I change the graph size through plotly functions like ggplotly or plot_ly, RStudio creates scroll bars and wouldn't show more than 800px width.

Here is my code:

gg1 <- cars |> 
  ggplot(aes(speed, dist)) +
  geom_point() 

gg1 |> 
  plotly::ggplotly(width = 1000, height = 800)

This is what I see:

Things I tried but didn't do anything...

1. out.width
2. fig.width
3. RStudio Tools > Global Options > R Markdown > Visual > Editor content width (I don't know if this does anything)

Now, if I output to console instead of inline or knit to html, then the code prints out bigger graphic without any error. But I would like to see bigger graphics while in RStudio R Markdown interactive session inline.

Answer 1

I couldn't find a way that works as a setting in R or R Markdown. However, I can tell you how to set this temporarily.

You will use:

• RStudio's developer tools (standard part of RStudio)
• two sets of function calls written in Javascript

This is temporary . To reset the chunk outputs back to normal:

• collapse the chunk
• rerun the chunk
• restart RStudio

If you add chunks after you run the functions, they will not inherit these changes. If want them to change, rerun the functions.

The first line of each set of functions is variable initialization. Skip that first line of code if you run the functions a second time (or more).

Here's what to do:

Anywhere in RStudio, right-click, select "Inspect Element"

This will open developer tools. In the developer tools window, open the console drawer. You can select the three dots on the top right and use the menu to do this.

In the console drawer, you will paste the functions I've provided. However, the calls for the variables can only be done one time. So the first time you run this in the same session of RStudio you will include that line, after that, do not. When you restart RStudio, this resets. You will need to include that line again. (If you restart developer tools, this will not reset these variables.)

The console is at the bottom of developer tools.

Here is the before...

Here's an example of a copy and paste, first time in the RStudio session.

You will immediately see that the width has changed for any chunks with output.

However, you may notice that the overflow is hidden. That's next.

You will enter the second function into the console drawer to fix change that.

It won't look different this time!

When you look at the chunk output, it will still look like content is hidden.

From here you have to drag the panes , to force resizing. Make it bigger, smaller, or even return to the size you had to begin with. The overflow will be shown.

Last, but certainly not least--the Javascript functions.

The first:

//declare variables separately for reuse without duplicate initialization errors
var allOf, sAdd, styler, i, n;

allOf = document.querySelectorAll('[data-ordinal]'); //find them all
if (allOf==undefined || allOf==null) {
  allOf = document.querySelector('[data-ordinal]');  // if there is only one
}

sAdd = "max-width: none;"                       // create style to add

try{
  for(i = 0, n = allOf.length; i < n; i++){     //loop through them all
    styler = allOf[i].getAttribute("style");
    if (styler==undefined || styler==null) {    // if there are no HTML styles set
      styler = "";  
      console.log("No style attributes found for ", i)
    }
    if (styler!="width: 100%; max-width: 800px;") {   // if this isn't a chunk output as expected
      continue;
      console.log("Attributes not changed for ", i)
    }
    allOf[i].setAttribute("style",styler+sAdd);       // append style
    console.log("Attributes set for ", i);
}} catch(error) {
    console.error(error);
}

The second:

//declare variables separately for reuse without duplicate initialization errors
var allMore, sAdd2, styler2, j, m

allMore = document.querySelectorAll('.ace_lineWidgetContainer > div'); // first child of class
if (allMore==undefined || allMore==null) {
  allMore = document.querySelector('.ace_lineWidgetContainer > div');  // if there is only one
}

sAdd2 = "overflow: visible;"           // create style to add

try{
  for(j = 0, m = allMore.length; j < m; j++){     //loop through them all
    styler2 = allMore[j].getAttribute("style");
    if (styler2==undefined || styler2==null) {    // if there are no HTML styles set
      styler2 = "";  
      console.log("No styles were found for ", j)
    }
    allMore[j].setAttribute("style",styler2+sAdd2); // append new styles
    allMore[j].style.height = null;                 // remove the height style
    console.log("Attributes set for ", j); 
}} catch(error) {
    console.error(error);
}

You do not have to use these in a specific order. However, other than that first line (variable initialization), you need to run all of the lines together if you run them at all.

If something goes wrong or RStudio becomes some mutant version of itself, just restart RStudio to reset back to the original sizing.