带有ggplotly的shiny仪表板中的响应式plot标题

Question

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)

Answer 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.