Closed oobd closed 4 weeks ago
I cannot reproduce this can you share what browsers you use and whether you still encounter the issue without xaringan
and xaringanExtra
?
i'm seeing the issue on chrome and it does seem like the issue is not present when using normal rmarkdown
Attached video of what it looks like when using xaringan https://github.com/JohnCoene/echarts4r/assets/115593238/be4fbf8d-c3c7-49c2-bf26-7dd15c3207ee
I did think it was maybe a xaringan or xaringanExtra issue but was told changes would likely need to be dealt with on echarts side https://github.com/gadenbuie/xaringanExtra/issues/197
I'm sorry but I genuinely cannot reproduce this, resizing the browser works perfectly fine on my end.
The code to resize echarts4r is perfectly standard
Can you make sure you are on the latest github version of echarts4r?
Hi John, thanks for looking into it!
Works fine in normal rmd docs as well on my end so the issue seems to be something specific to xaringan.
I've solved it using JavaScript that calls resize with original height / width when browser refrehsed. Not sure why just resize() doesn't work... but oh well this seems to work.
---
output:
xaringan::moon_reader:
lib_dir: libs
nature:
highlightStyle: github
highlightLines: true
countIncrementalSlides: false
self_contained: true
---
```{r, include=F}
library(dplyr)
library(xaringan)
library(xaringanExtra)
library(echarts4r)
xaringanExtra::use_panelset()
df <- data.frame(
x = seq(50),
y = rnorm(50, 10, 3),
z = rnorm(50, 11, 2),
w = rnorm(50, 9, 2)
)
df |>
e_charts(x) |>
e_line(z) |>
e_area(w) |>
e_title("Line and area charts")
df |>
e_charts(x) |>
e_scatter(y, z) |>
e_visual_map(z, scale = e_scale) |>
e_legend(FALSE)
When using echarts4r charts in a xaringan or quarto presentation, it seems like initial charts look fine but as soon as i resize the browser, some charts are scaled weirdly.
In the reprex at the end, the line + area chart on page 1 breaks when user resizes browser while the scatter plot on page 2 dynamically resizes properly when browser is resized.
For example, if browser is fully maximized and changed to half size then changed again to fully maximized, chart on page 1 breaks like the second image. The sizing for page 1 can be fixed when the page is refreshed but breaks again as soon as browser is refreshed.
Is there any way the size can be fixed without full refresh of browser? I've done some dodgy work around where I insert some javascript that refreshes page when browser is resized but this has become pretty annoying as my file is large and takes ages to reload.
Chart looks fine on first load
Breaks when browser size changed
Reprex below