How to adjust div containing plotly to plot dimensions so it does not overlap document

user_12814748 0
Viewed 223

I am using plotly to produce a plot in RMarkdown. However, as it is embedded in a div, it overlaps with the following text. I think it's because of a conflict between the plotly size and div.

  ---
    title: "TITLE"
    author: "AUTHOR"
    date: "1/1/2000"
    output:
      html_document
    ---
    
    ```{r setup, include=FALSE}
    knitr::opts_chunk$set(
      warning = FALSE,
      message = FALSE,
      echo = FALSE  # show R code
    )
    
    ```
    ## scatter 1
    
    ```{r, echo=FALSE, eval=TRUE,out.width="100%",out.height="100%",fig.align='center'}
    library(plotly)
    library(htmltools)
    mtcars$am[which(mtcars$am == 0)] <- 'Automatic'
    mtcars$am[which(mtcars$am == 1)] <- 'Manual'
    mtcars$am <- as.factor(mtcars$am)
    
    fig <- plot_ly(mtcars, x = ~wt, y = ~hp, z = ~qsec, color = ~am, colors = c('#BF382A', '#0C4B8E'))
    fig <- fig %>% add_markers()
    fig <- fig %>% layout(scene = list(xaxis = list(title = 'Weight'),
                         yaxis = list(title = 'Gross horsepower'),
                         zaxis = list(title = '1/4 mile time')))
    
    
    fig %>% layout(autosize = F, width = 1000, height = 800,paper_bgcolor = 'rgb(243, 243, 243)', margin = list(r = 10,t = 25,b = 40,l = 110)) -> p
    
    div(p,align='center')
    ```
# HEADING
    
asdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasda

enter image description here

As you see the text is hidden. How to tweak the div properties to make it visible?

r-plotly r-markdown plotly r html
1 Answers

Remove out.height="100%" from the chunk options.

Also, set the width and the height in the plotly function, not in layout.

---
title: "TITLE"
author: "AUTHOR"
date: "1/1/2000"
output: html_document
---

```{r setup, include=FALSE}
knitr::opts_chunk$set(
warning = FALSE,
message = FALSE,
echo = FALSE  # show R code
)

```
## scatter 1

```{r, echo=FALSE, eval=TRUE, out.width="100%", fig.align='center'}
library(plotly)
library(htmltools)
mtcars$am[which(mtcars$am == 0)] <- 'Automatic'
mtcars$am[which(mtcars$am == 1)] <- 'Manual'
mtcars$am <- as.factor(mtcars$am)

fig <- plot_ly(
    mtcars,
    x = ~ wt,
    y = ~ hp,
    z = ~ qsec,
    color = ~ am,
    colors = c('#BF382A', '#0C4B8E'),
    width = 1000,
    height = 800
  )
fig <- fig %>% add_markers()
fig <- fig %>% layout(scene = list(xaxis = list(title = 'Weight'),
yaxis = list(title = 'Gross horsepower'),
zaxis = list(title = '1/4 mile time')))


fig %>% layout(
  autosize = F,
  paper_bgcolor = 'rgb(243, 243, 243)',
  margin = list(
    r = 10,
    t = 25,
    b = 40,
    l = 110
  )
) -> p

div(p, align='center')
```

# HEADING

asdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasda
user_11001070
Related