Heatmap in shiny: chart 'height' is not responsive

[u909090]

Hi,

No matter the value for apex(height = ...), the plot size does not change. Am I using the right argument or there is a bug?

Example:

library(shiny)
library(apexcharter)

data("vaccines", package = "highcharter")
df <- vaccines %>% subset(year <= 1946)

ui <- fluidPage(
  radioButtons("height",
               label = "Heatmap Height",
               choiceNames = c("50px", "400px", "800px", "50%", "100%", "400", "1000"),
               choiceValues = c("50px", "400px", "800px", "50%", "100%", 400, 1000)
  ),
  apexchartOutput("heatmap")
)

server <- function(input, output) {
  output$heatmap <- renderApexchart({
    apex(df,
         aes(year, state, fill = count),
         type = "heatmap",
         height = input$height) %>% 
      ax_chart(animations = list(enabled = FALSE)) %>% 
      ax_dataLabels(enabled = FALSE)
  })
  
}

shinyApp(ui = ui, server = server)

Thanks !

[u909090]

Specifying height in apexchartOutput() works, but in some cases it would be handier to modify the height directly when making the plot.

[pvictor]

This is a common pattern for htmlwidgets, width and height are defined UI side, see example below for a workaround.
Note that using a percentage height won't work as is in CSS.

Use uiOutput \ renderUI to produce chart (will work only in recent version of Shiny):

library(shiny)
library(apexcharter)

data("vaccines", package = "highcharter")
df <- vaccines %>% subset(year <= 1946)

ui <- fluidPage(
  radioButtons("height",
               label = "Heatmap Height",
               choiceNames = c("50px", "400px", "800px", "50%", "100%", "400", "1000"),
               choiceValues = c("50px", "400px", "800px", "50%", "100%", 400, 1000)
  ),
  uiOutput("heatmap")
)

server <- function(input, output) {
  output$heatmap <- renderUI({
    ax <- apex(df,
         aes(year, state, fill = count),
         type = "heatmap",
         height = input$height) %>% 
      ax_chart(animations = list(enabled = FALSE)) %>% 
      ax_dataLabels(enabled = FALSE)
    tags$div(ax)
  })
  
}

shinyApp(ui = ui, server = server)

Victor