'rAmCharts4' graphics perturbed with 'flexdashboard'

Question

I'm doing a 'flexdashboard' containing some graphics constructed with the rAmCharts4 package. These are 'HTML widgets' implemented with 'React'. On the first page, the graphics are nice:

but not on the second page, however this is exactly the same code here:

Would you have an idea of what is going on? There is the following warning in the browser console:

The deferred DOM Node could not be resolved to a valid node

---
title: "Untitled"
output: 
  flexdashboard::flex_dashboard:
    orientation: columns
    vertical_layout: fill
---

```{r setup, include=FALSE}
library(flexdashboard)
library(rAmCharts4)
```

Page 1
================================================================================

Column {data-width=650}
--------------------------------------------------------------------------------

### Chart A

```{r}
dat <- data.frame(
  country = c("USA", "China", "Japan", "Germany", "UK", "France"),
  visits = c(3025, 1882, 1809, 1322, 1122, 1114)
)

amBarChart(
  data = dat, data2 = dat,
  width = "600px",
  category = "country", values = "visits",
  draggable = TRUE,
  tooltip =
    "[bold font-style:italic #ffff00]{valueY.value.formatNumber('#,###.')}[/]",
  chartTitle =
    amText(text = "Visits per country", fontSize = 22, color = "orangered"),
  xAxis = list(title = amText(text = "Country", color = "maroon")),
  yAxis = list(
    title = amText(text = "Visits", color = "maroon"),
    gridLines = amLine(color = "orange", width = 1, opacity = 0.4)
  ),
  yLimits = c(0, 4000),
  valueFormatter = "#,###.",
  caption = amText(text = "Year 2018", color = "red"),
  theme = "material")
```


Page 2
================================================================================

Column {data-width=650}
--------------------------------------------------------------------------------

### Chart B

```{r}
dat <- data.frame(
  country = c("USA", "China", "Japan", "Germany", "UK", "France"),
  visits = c(3025, 1882, 1809, 1322, 1122, 1114)
)

amBarChart(
  data = dat, data2 = dat,
  width = "600px",
  category = "country", values = "visits",
  draggable = TRUE,
  tooltip =
    "[bold font-style:italic #ffff00]{valueY.value.formatNumber('#,###.')}[/]",
  chartTitle =
    amText(text = "Visits per country", fontSize = 22, color = "orangered"),
  xAxis = list(title = amText(text = "Country", color = "maroon")),
  yAxis = list(
    title = amText(text = "Visits", color = "maroon"),
    gridLines = amLine(color = "orange", width = 1, opacity = 0.4)
  ),
  yLimits = c(0, 4000),
  valueFormatter = "#,###.",
  caption = amText(text = "Year 2018", color = "red"),
  theme = "material")
```

Answer 1

Here is a solution but it has one flaw.

Hide the graphics on pages>1 with CSS:

#page-2 .amChart4, #page-3 .amChart4 {
  display: none;
}

Then, using jQuery, show the graphics when the user clicks on the tab of the page, with a delay:

$(document).ready(function() {
  $("body").on("click", "a", function() {
    var selector = $(this).attr("href") + " .amChart4";
    setTimeout(function() {
      $(selector).show();
    }, 500);
  });
});

There is one flaw though: the 'Reset' button is misplaced.

---
title: "Untitled"
output: 
  flexdashboard::flex_dashboard:
    orientation: columns
    vertical_layout: scroll
---

```{r setup, include=FALSE}
library(flexdashboard)
library(rAmCharts4)
```

```{css}
#page-2 .amChart4, #page-3 .amChart4 {
  display: none;
}
```

```{js}
$(document).ready(function() {
  $("body").on("click", "a", function() {
    var selector = $(this).attr("href") + " .amChart4";
    setTimeout(function() {
      $(selector).show();
    }, 500);
  });
});
```

Page 1
================================================================================

Column {data-width=650}
--------------------------------------------------------------------------------

### Chart A

```{r}
dat <- data.frame(
  country = c("USA", "China", "Japan", "Germany", "UK", "France"),
  visits = c(3025, 1882, 1809, 1322, 1122, 1114)
)

amBarChart(
  data = dat, data2 = dat,
  width = "600px",
  category = "country", values = "visits",
  draggable = TRUE,
  tooltip =
    "[bold font-style:italic #ffff00]{valueY.value.formatNumber('#,###.')}[/]",
  chartTitle =
    amText(text = "Visits per country", fontSize = 22, color = "orangered"),
  xAxis = list(title = amText(text = "Country", color = "maroon")),
  yAxis = list(
    title = amText(text = "Visits", color = "maroon"),
    gridLines = amLine(color = "orange", width = 1, opacity = 0.4)
  ),
  yLimits = c(0, 4000),
  valueFormatter = "#,###.",
  caption = amText(text = "Year 2018", color = "red"),
  theme = "material")
```


Page 2
================================================================================

Column {data-width=650}
--------------------------------------------------------------------------------

### Chart B

```{r}
amBarChart(
  data = dat, data2 = dat,
  width = "600px",
  category = "country", values = "visits",
  draggable = TRUE,
  tooltip =
    "[bold font-style:italic #ffff00]{valueY.value.formatNumber('#,###.')}[/]",
  chartTitle =
    amText(text = "Visits per country", fontSize = 22, color = "orangered"),
  xAxis = list(title = amText(text = "Country", color = "maroon")),
  yAxis = list(
    title = amText(text = "Visits", color = "maroon"),
    gridLines = amLine(color = "orange", width = 1, opacity = 0.4)
  ),
  yLimits = c(0, 4000),
  valueFormatter = "#,###.",
  caption = amText(text = "Year 2018", color = "red"),
  theme = "material")
```

Page 3
================================================================================

Column {data-width=650}
--------------------------------------------------------------------------------

### Chart C

```{r}
amBarChart(
  data = dat, data2 = dat,
  width = "600px",
  category = "country", values = "visits",
  draggable = TRUE,
  tooltip =
    "[bold font-style:italic #ffff00]{valueY.value.formatNumber('#,###.')}[/]",
  chartTitle =
    amText(text = "Visits per country", fontSize = 22, color = "orangered"),
  xAxis = list(title = amText(text = "Country", color = "maroon")),
  yAxis = list(
    title = amText(text = "Visits", color = "maroon"),
    gridLines = amLine(color = "orange", width = 1, opacity = 0.4)
  ),
  yLimits = c(0, 4000),
  valueFormatter = "#,###.",
  caption = amText(text = "Year 2018", color = "red"),
  theme = "material")
```