It's quite a bit late, as you asked this a while ago. However I've got an answer for you.

This uses an R chunk with engine='js' which enables you to write JS into the document. This chunk can go anywhere in the document.

I coded this to resize the plot if the callout is expanded, collapsed or the browser window is resized.

In the JS, I've used myChart as the plot id. In the plot, I've added the argument elementId = 'myChart'. These names have to match. If you change one, you've got to change the other.

Additionally, in the quarto document, The plot is in the second callout box, so the js calls for index 1 (0 = 1st, 1 = 2nd, and so on). If the plot is no longer the 2d callout, this will have to be changed. (Look for tellMe[1], that's the value that would need to change.

Here's the source code for the Quarto as I've used it. (Most of your content is unchanged.) There are comments for any code I've added. If you have any questions, please let me know.

---
title: "Reprex Report"
format: 
  html:
    page-layout: full
editor: visual
---

```{r, message=FALSE, echo=FALSE, include=FALSE}

library(tidyverse)
library(echarts4r)

df <- data.frame (Month  = c("Apr-23", "May-23", "Jun-23", "Jul-23", "Aug-23", "Sep-23", "Oct-23", "Nov-23",
                             "Dec-23", "Jan-24", "Feb-24", "Mar-24"),
                  a = c(18,44,70,45,69,68,52,54,NA,NA,NA,NA),
                  b = c(527,751,721,633,696,675,775,732,NA,NA,NA,NA),
                  c = c(14,23,28,4,2,14,18,30,NA,NA,NA,NA))
```

## **Activity**

::: callout-tip
## Description

Blah blah blah
:::

<!---- Loooook! I'm new --------->

```{r sigh, engine='js', echo=F}

setTimeout(function() {
          /* get chart */
  e = echarts.getInstanceById(myChart.getAttribute('_echarts_instance_'));
          /* on resize, resize to fit container */
  window.onresize = () => {
    w = document.getElementById('myChart').offsetWidth;
    h = document.getElementById('myChart').offsetHeight;
    e.resize({width: w, height: h});  /* fit in your hole */
  }
         /* on collapse, expand, resize to fit container */
  tellMe = document.getElementsByClassName('callout-header');
    /* since there are 2 callouts and the plot's in the second one */
       /* it's index 1, because the first is index 0 */
  tellMe[1].onclick = () => {
    w = document.getElementById('myChart').offsetWidth;
    h = document.getElementById('myChart').offsetHeight;
    e.resize({width: w, height: h});  /* fit in your hole */
  }
  
}, 200) /* give it a sec to load...sheesh */

```


::: {.callout-caution collapse="true"} 
### Plot

```{r, echo=FALSE}

df %>%
  e_chart(Month, elementId = 'myChart') %>%   # <---- I'm new!!!
  e_bar(a, stack = "groups", color = "green") %>%
  e_bar(b, stack = "groups", color = "red") %>%
  e_bar(c, stack = "groups", color = "blue") %>%
  e_labels(position = "inside", fontSize = 16) %>% 
  e_y_axis(name = "Activity", nameLocation ="middle", 
           nameTextStyle = list(padding = c(0,0,30,0))) %>%
  e_x_axis(type = "category", name = "Month",
           nameLocation ="middle", nameTextStyle = list(padding = c(20,0,0,0))) %>% 
  e_tooltip(axisPointer = list(type = "shadow"), 
            trigger = "axis",
            backgroundColor = "rgba(40, 40, 40, 0.75)", 
            borderColor = "rgba(0, 0, 0, 0)", textStyle = list(color = "#fcfcff")) %>% 
  e_grid(right = "2%", left = "8%", bottom = "10%", top = "5%")

```
:::