Brush Chart example error

[phoward38]

Really been enjoying this package as it keeps maturing, so just wanted to say thanks first!

I've created a minimal Shiny app with the Brush Chart example on your package's github.io, but the 2nd chart (w/ brush: enabled=TRUE) doesn't show up until I open the browser's devtools. When I open it in Chrome, I'm getting the error TypeError: Cannot read property 'w' of undefined.

Reprex:

global.R

library(shiny)
library(apexcharter)
data("economics", package = "ggplot2")

server.R

server <- function(input, output, session) {
output$brush_1 <- renderApexchart({
    apex(
      data = economics,
      mapping = aes(x = date, y = psavert),
      type = "line"
    ) %>%
      ax_chart(
        id = "target-chart", # <-- define target id here
        toolbar = list(
          autoSelected = "pan",
          show = FALSE
        )
      )
  })

  output$brush_2 <- renderApexchart({
    apex(
      data = economics,
      mapping = aes(x = date, y = psavert),
      type = "line",
      height = "130px"
    ) %>%
      ax_chart(
        brush = list(
          target = "target-chart", # <-- use target id here
          enabled = TRUE
        ),
        offsetY = -20,
        selection = list(
          enabled = TRUE, # <-- enable selection and define starting range
          xaxis = list(
            min = format_date(economics$date[1]),
            max = format_date(economics$date[100])
          )
        )
      ) %>%
      ax_xaxis(labels = list(show = FALSE)) %>%
      ax_yaxis(labels = list(show = FALSE))
  })

}

ui.R

ui <- fluidPage(
  fluidRow(
    column(
      12,
      apexchartOutput("brush_1"),
      apexchartOutput("brush_2")
    )
  )
)

Oddly enough, the exact same chart works locally in another app of mine, but then once it's deployed to shinyapps.io or a GCP VM Instance, the same console error occurs.

Here's my session info (GithubSHA1: bd179f978b27fb34e9ac5b8a206339fdb5465bbf):

R version 3.6.3 (2020-02-29)
Platform: x86_64-apple-darwin15.6.0 (64-bit)
Running under: macOS Catalina 10.15.5

Matrix products: default
BLAS:   /System/Library/Frameworks/Accelerate.framework/Versions/A/Frameworks/vecLib.framework/Versions/A/libBLAS.dylib
LAPACK: /Library/Frameworks/R.framework/Versions/3.6/Resources/lib/libRlapack.dylib

locale:
[1] en_US.UTF-8/en_US.UTF-8/en_US.UTF-8/C/en_US.UTF-8/en_US.UTF-8

attached base packages:
character(0)

other attached packages:
[1] apexcharter_0.1.5

loaded via a namespace (and not attached):
 [1] Rcpp_1.0.5        pillar_1.4.6      compiler_3.6.3    later_1.1.0.1     methods_3.6.3     utils_3.6.3      
 [7] tools_3.6.3       grDevices_3.6.3   digest_0.6.25     packrat_0.5.0     jsonlite_1.7.0    lifecycle_0.2.0  
[13] tibble_3.0.3      gtable_0.3.0      pkgconfig_2.0.3   rlang_0.4.7       shiny_1.5.0       cli_2.0.2        
[19] rstudioapi_0.11   yaml_2.2.1        fastmap_1.0.1     withr_2.2.0       dplyr_1.0.0       generics_0.0.2   
[25] graphics_3.6.3    vctrs_0.3.2       htmlwidgets_1.5.1 datasets_3.6.3    stats_3.6.3       grid_3.6.3       
[31] tidyselect_1.1.0  glue_1.4.1        base_3.6.3        R6_2.4.1          fansi_0.4.1       ggplot2_3.3.2    
[37] purrr_0.3.4       magrittr_1.5      scales_1.1.1      promises_1.1.1    ellipsis_0.3.1    htmltools_0.5.0  
[43] assertthat_0.2.1  mime_0.9          xtable_1.8-4      colorspace_1.4-1  httpuv_1.5.4      munsell_0.5.0    
[49] crayon_1.3.4  

[henningsway]

I also currently have trouble recreating a brushed chart in Shiny. The code works, when I use it in Rmarkdown. But if I move the code to two apexchartOutputs, than the smaller plot used for filtering blanks out.

[pvictor]

Hello,

There's indeed a bug in shiny, unfortunately I haven't found a solution yet.

But here's an alternative using custom input and proxy to get the same result :

Live demo: https://dreamrs.shinyapps.io/example-brush-proxy/

library(shiny)
library(apexcharter)
data("economics", package = "ggplot2")

ui <- fluidPage(
  fluidRow(
    column(
      width = 8, offset = 2,
      tags$h2("Apexchart brush example (alternative) in Shiny", class = "text-center"),
      apexchartOutput("brush_1"),
      apexchartOutput("brush_2", height = "130px")
    )
  )
)

server <- function(input, output, session) {
  
  output$brush_1 <- renderApexchart({
    apex(
      data = economics,
      mapping = aes(x = date, y = psavert),
      type = "line"
    ) %>%
      ax_chart(
        toolbar = list(
          autoSelected = "pan",
          show = FALSE
        )
      )
  })
  
  output$brush_2 <- renderApexchart({
    apex(
      data = economics,
      mapping = aes(x = date, y = psavert),
      type = "line"
    ) %>%
      ax_chart(
        brush = list(
          enabled = TRUE
        ),
        offsetY = -20,
        selection = list(
          enabled = TRUE
        )
      ) %>%
      ax_xaxis(labels = list(show = FALSE)) %>%
      ax_yaxis(labels = list(show = FALSE)) %>% 
      set_input_selection(
        inputId = "brush", 
        xmin = format_date(economics$date[1]),
        xmax = format_date(economics$date[100])
      )
  })
  
  observeEvent(input$brush, {
    apexchartProxy("brush_1") %>% 
      ax_proxy_options(list(
        xaxis = list(
          min = as.numeric(input$brush$x$min) * 1000,
          max = as.numeric(input$brush$x$max) * 1000
        )
      ))
  })
  
}

shinyApp(ui, server)

Victor