plotly and highcharter not showing in revealjs pres on multiple computers

[zac-garland]

hi all,

last week, all of my revealjs presentations were working great. but at some point (around Friday evening), all of my JS dependent charts (i.e. plotly & highcharter) stopped showing up in the rendered HTML doc.

I reproduced the issue with both single plots (one plot per chunk) and multiple plots (split dataframe, or chart type and mapped to a div). I tested this on both work and personal laptops and the issue remains.

Could someone kindly look into this? Happy to help anyway I can. I appreciate your help in advance.

Rmarkdown reprex

Rendered HTML

My version info:

R version 3.5.0 (2018-04-23)
Platform: x86_64-w64-mingw32/x64 (64-bit)
Running under: Windows 10 x64 (build 18362)

Matrix products: default

locale:
[1] LC_COLLATE=English_United States.1252  LC_CTYPE=English_United States.1252   
[3] LC_MONETARY=English_United States.1252 LC_NUMERIC=C                          
[5] LC_TIME=English_United States.1252    

attached base packages:
[1] stats     graphics  grDevices utils     datasets  methods   base     

other attached packages:
 [1] plotly_4.9.1      highcharter_0.7.0 shiny_1.4.0       forcats_0.4.0     stringr_1.4.0    
 [6] dplyr_0.8.3       purrr_0.3.3       readr_1.3.1       tidyr_1.0.0       tibble_2.1.3     
[11] ggplot2_3.2.1     tidyverse_1.2.1  

loaded via a namespace (and not attached):
 [1] Rcpp_1.0.3        lubridate_1.7.4   lattice_0.20-35   zoo_1.8-6         revealjs_0.9     
 [6] assertthat_0.2.1  zeallot_0.1.0     digest_0.6.23     packrat_0.5.0     mime_0.7         
[11] R6_2.4.1          cellranger_1.1.0  backports_1.1.5   evaluate_0.14     httr_1.4.1       
[16] pillar_1.4.2      rlang_0.4.2       curl_4.3          lazyeval_0.2.2    readxl_1.3.1     
[21] rstudioapi_0.10   data.table_1.12.0 whisker_0.4       TTR_0.23-5        rmarkdown_2.0    
[26] htmlwidgets_1.5.1 igraph_1.2.4      munsell_0.5.0     broom_0.5.1       compiler_3.5.0   
[31] httpuv_1.5.2.9000 modelr_0.1.4      xfun_0.11         pkgconfig_2.0.3   htmltools_0.4.0  
[36] tidyselect_0.2.5  fansi_0.4.0       viridisLite_0.3.0 crayon_1.3.4      withr_2.1.2      
[41] later_1.0.0       grid_3.5.0        nlme_3.1-137      jsonlite_1.6      xtable_1.8-4     
[46] gtable_0.3.0      lifecycle_0.1.0   magrittr_1.5      scales_1.1.0      rlist_0.4.6.1    
[51] quantmod_0.4-15   cli_2.0.0         stringi_1.4.3     promises_1.1.0    xml2_1.2.2       
[56] xts_0.11-2        generics_0.0.2    vctrs_0.2.0       tools_3.5.0       glue_1.3.1       
[61] crosstalk_1.0.0   hms_0.5.2         rsconnect_0.8.13  fastmap_1.0.0     yaml_2.2.0       
[66] colorspace_1.4-1  rvest_0.3.2       knitr_1.26        haven_2.1.0   

[cderv]

Thanks for the report and sorry for the delay.

With a simpler example this is working ok with both highcharter and plotly.

---
title: "Untitled"
output: revealjs::revealjs_presentation
---

```{r setup, include=FALSE}
library(highcharter)
library(plotly)

highcharter

x <- c(rnorm(10000), rnorm(1000, 4, 0.5))

hchart(x, name = "data") 

plotly single test

mtcars %>% 
  plot_ly(x = ~mpg,
          y = ~cyl)

This means that it could be caused by specific component with those JS library that will / could conflict with reveal.js library. 

We'll look into it. 

[cderv]

In fact, more information:

It seems like a conflict between plotly and highcharter

• Using 1 HC + 1 Plotly + several plotly = Working!

---
title: "Untitled"
output: revealjs::revealjs_presentation
---

```{r setup, include=FALSE}
library(highcharter)
library(plotly)
library(tidyverse)
library(htmltools)

highcharter

x <- c(rnorm(10000), rnorm(1000, 4, 0.5))

hchart(x, name = "data") 

plotly single test

mtcars %>% 
  plot_ly(x = ~mpg,
          y = ~cyl)

plotly multiple test

mtcars %>% 
  as_tibble() %>% 
  split(.$carb) %>% 
  map(~{

    .x %>% 
      plot_ly(x = ~mpg,
              y = ~hp)

  }) %>% 
  map(div,style="width:100%;display:inline-block") %>% 
  div()

* Adding one slide with several highcharter = Plotly no more working !

````markdown
---
title: "Untitled"
output: revealjs::revealjs_presentation
---

```{r setup, include=FALSE}
library(highcharter)
library(plotly)
library(tidyverse)
library(htmltools)

highcharter

x <- c(rnorm(10000), rnorm(1000, 4, 0.5))

hchart(x, name = "data") 

highcharter multiple plot test

n <- 5
set.seed(123)
colors <- c("#d35400", "#2980b9", "#2ecc71", "#f1c40f", "#2c3e50", "#7f8c8d")
colors2 <- c("#000004", "#3B0F70", "#8C2981", "#DE4968", "#FE9F6D", "#FCFDBF")
df <- data.frame(x = seq_len(n) - 1) %>% 
  mutate(
    y = 10 + x + 10 * sin(x),
    y = round(y, 1),
    z = (x*y) - median(x*y),
    e = 10 * abs(rnorm(length(x))) + 2,
    e = round(e, 1),
    low = y - e,
    high = y + e,
    value = y,
    name = sample(fruit[str_length(fruit) <= 5], size = n),
    color = rep(colors, length.out = n),
    segmentColor = rep(colors2, length.out = n)
  )

create_hc <- function(t) {

  dont_rm_high_and_low <- c("arearange", "areasplinerange",
                            "columnrange", "errorbar")

  is_polar <- str_detect(t, "polar")

  t <- str_replace(t, "polar", "")

  if(!t %in% dont_rm_high_and_low) df <- df %>% select(-e, -low, -high)

  highchart() %>%
    hc_title(text = paste(ifelse(is_polar, "polar ", ""), t),
             style = list(fontSize = "15px")) %>% 
    hc_chart(type = t,
             polar = is_polar) %>% 
    hc_xAxis(categories = df$name) %>% 
    hc_add_series(df, name = "Fruit Consumption", showInLegend = FALSE) 

}

c("line", "spline",  "area", "areaspline",
  "column", "bar", "waterfall" , "funnel", "pyramid",
  "pie" , "treemap", "scatter", "bubble",
  "arearange", "areasplinerange", "columnrange", "errorbar",
  "polygon", "polarline", "polarcolumn", "polarcolumnrange",
  "coloredarea", "coloredline")  %>% 
  map(create_hc) %>% 
  div()

plotly single test

mtcars %>% 
  plot_ly(x = ~mpg,
          y = ~cyl)

plotly multiple test

mtcars %>% 
  as_tibble() %>% 
  split(.$carb) %>% 
  map(~{

    .x %>% 
      plot_ly(x = ~mpg,
              y = ~hp)

  }) %>% 
  map(div,style="width:100%;display:inline-block") %>% 
  div()

Interesting ! but maybe not directly related to reveal.js 🤔 

HTMLwidget compatibility is always difficult due to potential JS lib conflict