Ggiraph 图表在 Shiny 上调整太多

Question

I am trying to figure out how to better visualize ggiraph charts on Shiny apps. Here is the problem: the charts look awesome on desktop and mobile but they leave too much space underneath them when on mobile.

On desktop

Here is what I see on mobile:

Vertical mess

This is the layout of the app:

# Define UI for application
ui <- fixedPage(
  tags$style(HTML("
         body {
        background-color: white;
        color: black;
        font-family: 'Garamond'
      }
      h2 {
        font-family: 'Garamond';
      }
      .shiny-input-container {
        color: #474747;
      }")),
  fluidRow(girafeOutput('ggplot'),
           selectInput(
             inputId = 'Country',
             label = 'Countries and territories',
             choices = c(unique(speed_data$location)),
             multiple = FALSE,
             selected = 'Europe'
             
           )),
  fluidRow(style='height:40vh')
)

# Define server logic required to draw a histogram
server <- function(input, output,session) {
  
  dat = reactive({
    speed_data %>% 
      filter(location == input$Country)
  })
  
  map = reactive({
    subset(world, !(is.na(world$value)))
  })
  
  
  output$ggplot <- renderGirafe({gg = ggplot(dat(), aes(
    x = date, y = value)) + 
    geom_line_interactive(aes(group = location, y = value, tooltip = location, color = location)) +
    scale_y_continuous(labels = scales::comma) +
    scale_color_brewer(palette = 'Set1') + 
    picci + theme(legend.title = element_blank(),
                  axis.text.x = element_text(angle = 90, vjust = 0.5, hjust=1),
                  legend.position = 'none') +
    labs(title = paste("Pandemic's speed |", c(dat()$location)),
         subtitle = 'Daily new cases difference (rolling average, 20 days)',
         caption = 'SOURCE: Our world in data',
         x = '',
         y = '')
  ggiraph(code = print(gg),
          options =  list(
            opts_hover(css = "stroke:#5eba7d88;cursor:pointer;")))
  })
}
# Run the application 
shinyApp(ui = ui, server = server)

Answer 1

THe solution for this problem is to put

girafeOutput('myggiraphplot',height = '75%')

And it works just fine.