Chart resizing weirdly in certain formats (xaringan and quarto presentation)

[oobd]

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

---
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()
```

```{r echo=F}
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")
```

---

```{r, echo=F}
df |>
  e_charts(x) |>
  e_scatter(y, z) |>
  e_visual_map(z, scale = e_scale) |> # scale color
  e_legend(FALSE) # hide legend
```

[JohnCoene]

I cannot reproduce this can you share what browsers you use and whether you still encounter the issue without xaringan and xaringanExtra?

[oobd]

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
gadenbuie/xaringanExtra#197

[JohnCoene]

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

echarts4r/inst/htmlwidgets/echarts4r.js

Line 227 in 57b6410

resize: function(width, height) {

Can you make sure you are on the latest github version of echarts4r?

[oobd]

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)
)



```


```{r, echo=F}

df |>
  e_charts(x) |>
  e_line(z) |>
  e_area(w) |>
  e_title("Line and area charts") 
```

---
```{r, echo=F}
df |>
  e_charts(x) |>
  e_scatter(y, z) |>
  e_visual_map(z, scale = e_scale) |>
  e_legend(FALSE) 


```


<script>
 function resizeAllECharts() {
  var charts = document.querySelectorAll(".echarts4r");
  charts.forEach(function(chart) {
    var instance = echarts.getInstanceByDom(chart);
    if (instance) {
      var width = chart.clientWidth;
      var height = chart.clientHeight;
      instance.resize({
        width: width,
        height: height
      });
    }
  });
}


window.addEventListener('resize', function() {
  setTimeout(resizeAllECharts, 100); // Delay to ensure charts are fully rendered
});

document.addEventListener('DOMContentLoaded', function() {
  setTimeout(resizeAllECharts, 100); // Initial delay to ensure all charts are rendered
});


</script>