cssrshinyplotlychoropleth

Plotly choropleth - change width to rectangular

I'm making an R Shiny application that uses a choropleth to display some data. The plotly version works well, but I can't find how to adjust its sizing to make full use of the space.
It always looks square-ish, I'd want a rectangle that's as wide as the div that the plot is made in.

Here is a small example app:

library(shiny)
library(plotly)

country_data <- data.frame(
  country_short = c("DEU", "USA", "BRA", "CAN", "MEX"),
  points = c(10, 20, 30, 40, 50)
)


ui <- fluidPage(
  div(style="width:1400px",
      plotlyOutput("choro")
      )
)

server <- function(input, output, session) {
  output$choro <- renderPlotly({
    plot_ly(country_data, 
             width = 1400,
            type = "choropleth",
            z = ~ points, 
            locations = ~ country_short,
            marker = list(
              line = list(
                color = "white"
              )
            ),
            showscale = F
    ) %>%
      layout(geo = list(
        landcolor = rgb(0.9, 0.9, 0.9),
        countrycolor = "white",
        coastlinecolor = "white",
        showland = T,
        showcountries = T,
        showframe = F,
        projection = list(type = "Mercator"),
        margin = list(l = 0, r = 0)
        )
      )
  }) 
}

shinyApp(ui, server)

I'd expect the plot to be 1400px wide, but when I inspect element it, the width is 670px. How can I change this, either in R with plotly options, or with CSS?

Solution

  • To set the rectangle as wide as the plot's div, you can

    1. set the height:700px & width:1400px in your div - width / height = 2
    2. use plotlyOutput("choro", height = "100%") instead - the height is set to 400px as per default but it needs to be adjusted to 100% in order to use all the space.
    3. add margin = list(l = 0, r = 0, t = 0, b = 0, pad = 0) to the layout to remove all padding and margins
    library(shiny)
library(plotly)
country_data <- data.frame(
  country_short = c("DEU", "USA", "BRA", "CAN", "MEX"),
  points = c(10, 20, 30, 40, 50)
)
ui <- fluidPage(
  div(style="width:1400px; height:700px;", # add height to div
      plotlyOutput("choro", height = "100%")  # Set height to 100%
  )
)
server <- function(input, output, session) {
  output$choro <- renderPlotly({
    plot_ly(country_data, 
            type = "choropleth",
            z = ~ points, 
            locations = ~ country_short,
            marker = list(
              line = list(
                color = "white"
              )
            ),
            showscale = F
    ) %>%
      layout(
        margin = list(l = 0, r = 0, t = 0, b = 0, pad = 0),  # Zero margins at layout level
        geo = list(
          landcolor = rgb(0.9, 0.9, 0.9),
          countrycolor = "white",
          coastlinecolor = "white",
          showland = T,
          showcountries = T,
          showframe = F,
          projection = list(type = "Mercator")
        )
      )
  }) 
}
shinyApp(ui, server)

    giving

    out