CODEWITHSUNDEEP
highchartsshinyshinyappsr-highcharter
Bogaso
Bogaso

Reputation: 3318

Highchart is not occupying entire div in Shiny app

I have below Shiny-app

library(shiny)
library(highcharter)
library(shinycustomloader)

Data1 = structure(list(x = c(39, 15, 21, 71, 39, 34, -47, 67, 5, 1, -41, 
                             41, 6, 52, 84, 10, 67, -53, 15, 21, 51), y = c(0, -7, 75, 100, -67, 
                            52, 100, 100, -200, 0, -100, 28, 19, 100, 35, 39, 24, -73, 100, 
                            29, 81), z = c("a", "b", "c", "d", "e", "f", "g", "h", "i", "j", 
                                           "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u")), row.names = c(NA, 
                            -21L), class = "data.frame")

ui <- fluidPage(
  div(style = "height: 1000px; width: 80%; margin: 0; padding: 0; background-color: rgba(0,0,0,.4)",
      div(style = "height: 100%; width: 100%; margin: 0; padding: 0",
          highchartOutput("Result",  width = "100%", height = "100%") %>% withLoader(type = "html", loader = "loader6")
        ))
)

server = function(input, output) {

output$Result = 
        renderHighchart({

            HighCharts_Plot =
                hchart(Data1, "scatter", hcaes(x, y)) %>%
                    hc_chart(plotBorderWidth = 1, plotBorderColor = '#b4b4b4') %>%
                    hc_annotations(list(labelOptions = list(y = 35, x = 0, backgroundColor = 'rgba(0, 0, 0, 0)', borderColor = "rgba(0,0,0,0)"),
                                        labels = list(list(point = list(x = (max(abs(range(Data1$x))) + 0)/2, y = 0, xAxis = 0, yAxis = 0),
                                                            style = list(color = '#6f6f6f', fontSize = 8),
                                                            useHTML = TRUE,
                                                            text = paste("<span style = '", "padding: 3px; background-color: rgba(0,0,0,.4)", "'>AAA  AAA  AAA  AAA  AAA  </span>", sep = ""))))) %>%
                    hc_tooltip(outside = TRUE) 
            HighCharts_Plot

        })

}

shinyApp(ui = ui, server = server)

As you see here that the highchart is not occupying entire div when height is defined as percentage instead of px. However setting height as % is often required for responsive web-page design.

Is there any way to work with % declaration of height properly?

Upvotes: 0

Views: 414

Answers (1)

raf18seb
raf18seb

Reputation: 2146

Highcharts charts are 400px height by default. You can set chart.height: '100%' https://api.highcharts.com/highcharts/chart.height

hc_chart(plotBorderWidth = 1, plotBorderColor = '#b4b4b4', height = '100%') %>%

The chart will get 100% of the parent container which is shiny-loader-output-container but, for some reason, this shiny-loader-output-container container doesn't get 100% height of the parent.

Upvotes: 1

Related Questions