Height of charts keeps increasing in Shiny

[merlinoa]

Hi thanks for the excellent package. I am very excited about using these charts in more of my Shiny apps.

For some odd reason my charts keep increasing in height. Please see a minimal examples below. Whenever I open the pickerInput() the chart increases in height a little bit. I found this possibly related issue in apexcharts: apexcharts/apexcharts.js#460 . But I was not able to use the fix from that issue to resolve the issue in Shiny.

library(shiny)
library(apexcharter)


ui <- fluidPage(
  fluidRow(
    column(
      12,
      shinyWidgets::pickerInput(
        "open_me",
        "Open Me",
        choices = c("choice A")
      )
    )
  ),
  fluidRow(
    column(
      12,
      apexchartOutput("apex_chart")
    )
  )
)

data("mpg", package = "ggplot2")
n_manufac <- dplyr::count(mpg, manufacturer)

server <- function(input, output, session) {


  output$apex_chart <- renderApexchart({
    apex(data = n_manufac, type = "bar", mapping = aes(x = manufacturer, y = n))
  })

}

shinyApp(ui, server)

The issue is occurring with both the CRAN version 0.1.1 and the development version from GitHub. Below is my sessionInfo using the CRAN version.

R version 3.6.1 (2019-07-05)
Platform: x86_64-apple-darwin15.6.0 (64-bit)
Running under: macOS High Sierra 10.13.6

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:
[1] stats     graphics  grDevices utils     datasets  methods   base     

other attached packages:
[1] apexcharter_0.1.1 shiny_1.3.2      

loaded via a namespace (and not attached):
 [1] Rcpp_1.0.2         rstudioapi_0.10    magrittr_1.5      
 [4] tidyselect_0.2.5   munsell_0.5.0      colorspace_1.4-1  
 [7] xtable_1.8-4       R6_2.4.0           rlang_0.4.0       
[10] dplyr_0.8.3        shinyWidgets_0.4.8 tools_3.6.1       
[13] grid_3.6.1         packrat_0.5.0      gtable_0.3.0      
[16] htmltools_0.3.6    yaml_2.2.0         assertthat_0.2.1  
[19] lazyeval_0.2.2     digest_0.6.20      tibble_2.1.3      
[22] crayon_1.3.4       purrr_0.3.2        ggplot2_3.2.1     
[25] later_0.8.0        htmlwidgets_1.3    promises_1.0.1    
[28] glue_1.3.1         mime_0.7           compiler_3.6.1    
[31] pillar_1.4.2       scales_1.0.0       jsonlite_1.6      
[34] httpuv_1.5.1       pkgconfig_2.0.2  

[pvictor]

Hi Andy,

Thanks, and thanks for reporting that. The issue seem also linked to Bootstrap's dropdown used by pickerInput, it works fine with selectize.js.
I haven't a proper explanation for the issue, but this is linked to the container around the chart itself, if you remove it, the issue disappear. Try in renderApexchart :

apex(data = n_manufac, type = "bar", mapping = aes(x = manufacturer, y = n)) %>% 
  ax_chart(parentHeightOffset = 0)

I think I'll make this the default, otherwise there are margins added to the chart, so if you set a height of 400px, the real height will be 430px...

Victor

[merlinoa]

Awesome thanks for the fix!