gadenbuie / xaringanExtra

:ferris_wheel: A playground of enhancements and extensions for xaringan slides.
https://pkg.garrickadenbuie.com/xaringanExtra
Other
448 stars 36 forks source link

Plotly sizing with panelset in distill article #64

Closed mfherman closed 3 years ago

mfherman commented 4 years ago

Hi and thanks for all your amazing work! Just discovering panelset and it is exactly what I was looking for.

I'm working with the distill::distill_article R Markdown format and I'm getting some slightly puzzling output when I add Plotly charts to panels. The chart in the panel is the correct size (i.e. it fills the container), but the charts in the second and third panels don't fill the container. Interestingly, if you resize the browser window while the second or third panel is active, the Plotly chart resizes to fill the entire container. I have no clue if this is an issue with xaringanExtra, distill, or plotly (or some interaction of the three), so any tips or thoughts you have would be appreciated!

Here is a reprex and screenshot of the output I'm seeing:

---
title: "Distill, panelset, and plotly"
date: "`r Sys.Date()`"
output: distill::distill_article
---

```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = FALSE, fig.height = 3)

library(plotly)
xaringanExtra::use_panelset()
::::: {.panelset} ::: {.panel} ## Panel 1 {.panel-name} ```{r layout="l-page"} plot_ly(economics, x = ~date, y = ~pop, color = I("blue")) ``` ::: ::: {.panel} ## Panel 2 {.panel-name} ```{r layout="l-page"} plot_ly(economics, x = ~date, y = ~pop, color = I("red")) ``` ::: ::: {.panel} ## Panel 3 {.panel-name} ```{r layout="l-page"} plot_ly(economics, x = ~date, y = ~pop, color = I("green")) ``` ::: ::::: ```` ![image](https://user-images.githubusercontent.com/24945757/94630317-68679900-0293-11eb-8482-f92cb2c0d309.png) ![image](https://user-images.githubusercontent.com/24945757/94630298-5b4aaa00-0293-11eb-8d21-518f2236b6f4.png)
gadenbuie commented 3 years ago

Thanks for submitting the issue with such an easy to use reprex!

I just pushed an update so that, whenever the tab is changed, htmlwidgets are tricked into thinking that the window was resized and they update to fit in the current space. This should work for most widgets, but most importantly it works for plotly!

mfherman commented 3 years ago

Working a charm -- thanks so much!