Tooltip offset when using highcharter

[royfrancis]

When using the highcharter interactive graphics in xaringan, the hover tooltip seems to be offset from the cursor position. See demonstration below.

If I knit the RMarkdown file in RStudio using the Knit button, the rendered preview in the RStudio browser seems to work fine. When I render the RMarkdown to HTML using rmarkdown::render(), the tooltips are offset. Issue is seen in both browsers tested: Firefox and Chrome. The tooltips also work fine when rendered to regular RMarkdown (html_document()).

The RMarkdown document I use is here:

---
title: "Highcharter test"
output:
  xaringan::moon_reader
---

```{r,echo=FALSE,warning=FALSE,message=FALSE}
library(highcharter)

h <- iris %>%
  hchart("scatter",hcaes(x="Sepal.Length",y="Sepal.Width",group="Species")) %>%
  hc_xAxis(title=list(text="Sepal Length"),crosshair=TRUE) %>%
 hc_yAxis(title=list(text="Sepal Width"),crosshair=TRUE) %>%
  hc_chart(zoomType="xy",inverted=FALSE) %>%
  hc_legend(verticalAlign="top",align="right") %>% hc_size(height=350)

htmltools::tagList(list(h))
```

R version 3.5.0 (2018-04-23)
Platform: x86_64-w64-mingw32/x64 (64-bit)
Running under: Windows >= 8 x64 (build 9200)
highcharter_0.5.0
xaringan_0.7

Perhaps this is related to #98

[yihui]

Yes, I think it is the same issue as #98, and it is currently beyond my expertise.

[bevalle]

A workaround who works well with ggplotly, ggiraph and now highcharter (just tested) :

1. save the htmlwidget
2. call it inside an

I spotted it in this really nice talk wombat::gganimate

Try this :

---
title: "Highcharter test"
output:
  xaringan::moon_reader
---

```{r, echo = FALSE, warning = FALSE, message = FALSE}
library(highcharter)

h <- iris %>%
  hchart("scatter",hcaes(x="Sepal.Length",y="Sepal.Width",group="Species")) %>%
  hc_xAxis(title=list(text="Sepal Length"),crosshair=TRUE) %>%
  hc_yAxis(title=list(text="Sepal Width"),crosshair=TRUE) %>%
  hc_chart(zoomType="xy",inverted=FALSE) %>%
  hc_legend(verticalAlign="top",align="right") %>% hc_size(height=350)

htmlwidgets::saveWidget(h, "highchrt_ex.html")
```

<iframe src="highchrt_ex.html" width = "900px", height = "600px" frameBorder="0"></iframe>