2

I have a fluid dashboard with lots of graphs created in ggplot and then rendered as ggplotly objects. The problem is that on smaller screens or minimised windows, sometimes the plot titles are cut off.

Is there a way to dynamically wrap plot titles based on screen width, potentially with str_wrap()?

I've included a reproducible example below:

library(shiny)
library(tidyverse)
library(plotly)

ui <- fluidPage(
  
  fluidRow(
    column(
      width = 4,
      plotlyOutput("plot1")
    ),
    column(
      width = 4,
      plotlyOutput("plot2")
    ),
    column(
      width = 4,
      plotlyOutput("plot3")
    )
  )
)


server <- function(input, output) {

  output$plot1 <- renderPlotly({
    x <- mtcars %>%
      ggplot(
        aes(
          x = cyl,
          y = hp,
          fill = wt
        )
      ) +
      geom_point() +
      labs(title = "My very, very, very long title number 1")
    
    
    ggplotly(x)
  })
  
  output$plot3 <- renderPlotly({
    x <- mtcars %>%
      ggplot(
        aes(
          x = cyl,
          y = hp,
          fill = wt
        )
      ) +
      geom_point() +
      labs(title = "My very, very, very long title number 2")
    
    
    ggplotly(x)
  })
  
  
  output$plot2 <- renderPlotly({
    x <- mtcars %>%
      ggplot(
        aes(
          x = cyl,
          y = hp,
          fill = wt
        )
      ) +
      geom_point() +
      labs(title = "My very, very, very long title number 3")
    
    
    ggplotly(x)
  })
  
}

# Run the application 
shinyApp(ui = ui, server = server)
anorlondo
  • 383
  • 1
  • 9

1 Answers1

1

One approach could be using h4 tag instead of plot title, wrapping both h4 and plotlyOutput with column(fluidRow(...) to make a responsive plot title and align the plot and h4 title nicely.

library(shiny)
library(tidyverse)
library(plotly)

ui <- fluidPage(
  
  fluidRow(
    column(
      width = 4,
      column(
        width = 12,
        fluidRow(
          column(width = 1, HTML("&nbsp;")),
          column(
            width = 11,
            h4("My very, very, very long title number 1")
          )
        ),
        plotlyOutput("plot1")
      )
    ),
    column(
      width = 4,
      column(
        width = 12,
        fluidRow(
          column(width = 1, HTML("&nbsp;")),
          column(
            width = 11,
            h4("My very, very, very long title number 2")
          )
        ),
        plotlyOutput("plot2")
      )
    ),
    column(
      width = 4,
      column(
        width = 12,
        fluidRow(
          column(width = 1, HTML("&nbsp;")),
          column(
            width = 11,
            h4("My very, very, very long title number 3")
          )
        ),
        plotlyOutput("plot3")
      )
    )
  )
)

Then you will have a responsive title, no matter how narrow your screen is.

Server code remains the same.

shafee
  • 15,566
  • 3
  • 19
  • 47
  • Excellent idea, however the renderPlotly() calls in my dashboard render different plots based on the picker input indicator selected - something I did not add in my very simplified example code. Is it possible to render the h4s (or any other html-style tag) in renderPlotly(), without having to do a seperate renderUI? – anorlondo Aug 01 '22 at 10:26
  • So far, the idea of using `renderUI` seems a way to me, couldn't think of another approach right now! @anorlondo – shafee Aug 01 '22 at 10:44