Flexdashboard / plotly interaction results in odd scrollbar behavior

Question

I have a strange and very unpleasant problem. When I build graphic graphics inside the storyboard (from the flexdashboard package), in my legend I get a very annoying and completely unnecessary scroll bar. When someone tries to click one of the points on or off, the scroll bar twitches and it is almost impossible to click it. This scrollbar appears only when the tab with the graph of the graph is not immediately displayed during page loading - that is, if the page is loaded with another tab selected.

I can make the same chart without a storyboard, without problems in RStudio, or save it as htmlwidget and load it in Chrome. But when I load my storyboard, either in RStudio or in Chrome, I get this annoying scrollbar. A scroll bar exists, whether it be a vertical or horizontal legend.

Ggplotly objects do not have this problem.

Here is an example of an unnecessary scrollbar. The ggplotly graph is accurate, and the graph has a scroll bar.

--- title: "Untitled" output: flexdashboard::flex_dashboard: storyboard: true --- ```{r setup, include=FALSE} library(flexdashboard) ``` ### ggplot ```{r} library(plotly) carggplot <- ggplot(mtcars, aes(hp, mpg, fill = as.factor(carb))) + geom_point() + theme_bw() ggplotly(carggplot) ``` ### plotly ```{r} carsplot <- plot_ly( data = mtcars, x = ~hp, y = ~mpg, color = ~as.factor(carb), type = "scatter", mode = "markers" ) carsplot ``` 

I was not able to find documentation on this issue, although I found a similar issue posted by someone using the python interface to plot.

I am looking for a way to completely disable the scroll bar (while saving the legend) or some explanation of the behavior of the scroll bar.

flexdashboard - 0.5, plotly - 4.7.1, R - 64 bit 3.4.1, Windows 7.

Answer 1

There are many moving parts to answer your question. I will not describe them in detail, but touch on them only briefly.

Background

• The plotly.js diagram behaves as it was planned, when the length of the legend increases longer, it automatically inserts the scroll bar.

• This does not happen with the ggplotly diagram, because all visual styles come from the ggplot object.

• flexdashboard is the culprit in this case due to the way it dynamically adjusts the available space and tells plotly.js on how to render. It is worth noting that this looks like SVG in the original html.

• Then the solution should manipulate the DOM to hide / remove / modify the problematic element.

Potential solution

So the solution that I propose below is a bit of a hack. A more permanent solution may be the problem with good people in RStudio to find out if any changes can be made to the package that solves your problem.

If you add runtime: shiny to your YAML header, you can use the excellent Dean Attali shinyjs package. Although I am not an expert in this space, I have added a few lines to your MRE that remove the <rect> elements from the SVG class=scrollbar . It is important to note that you may need to change the javascript that I propose to be more specific and not delete the elements that you might want to keep.

Upgrade to MRE

Here is the Rmd code with comments where I made the changes.

 --- title: "Untitled" output: flexdashboard::flex_dashboard: storyboard: true runtime: shiny --- ```{r setup, include=FALSE} library(shinyjs) # add package, note runtime option above in YAML useShinyjs(rmd = TRUE) # function needs to initialise js library(flexdashboard) library(plotly) ``` ### ggplot ```{r} library(plotly) carggplot <- ggplot(mtcars, aes(hp, mpg, fill = as.factor(carb))) + geom_point() + theme_bw() ggplotly(carggplot) ``` ### plotly ```{r} carsplot <- plot_ly( data = mtcars, x = ~hp, y = ~mpg, color = ~as.factor(carb), type = "scatter", mode = "markers" ) carsplot runjs("$svg.selectAll('rect[class=scrollbar]').remove();") # run plain js to remove elements ``` 

NB As I publish this, I have had unreliable results and it will delve further.

Answer 2

An old question, but if others have the same problem, I would like to get my solution there ...

I had the same problem and solved this with this approach:

 ggplotly(carggplot, height = 500) 

I had a mini-scrollbar in my legend and adjusting the height as mentioned above when calling ggplotly() allowed me to adjust to the correct height needed for everything to work.