ggplotly- Plot title overlapping with graph

1
votes

I am plotting a facet_grid plot in Rstudio showing the day wise trend graph. When I use ggplotly the plot header overlaps with the main graph.

names(ss)[1] <- "State_OR_UT"
  state_tr1 <- 'Maharashtra'
  state_tr2 <- 'Delhi' 
  plot_sales_hp <- ggplot(ss, aes(x= Date,y = ValuesTotals,group=1))+
    geom_line(aes(color = State_OR_UT)) + 
    facet_grid(.~TypeOfSales)+
    
    labs(title =  paste0("Trend Graph between ",state_tr1," and ",state_tr2," <br />\n till ",
                         strftime(max(ss$Date), format = "%b/%d/%Y")),
         x = "Date", y = "Number of Sales")+
    theme(
      plot.title = element_text(size = 20,hjust=0.5, face = "bold", color = "darkgreen"),
      axis.text.y=element_blank() )
  
  
  plotly_sales <- ggplotly(plot_sales_hp,tooltip = "text")%>% layout(margin = list(l = 75))
  print(plotly_sales)

The title is overlapping on graph. Things I have tried:

  1. As per Text wrap for plot titles Changes in labs argument:

      paste0(strwrap("Trend Graph between ",state_tr1," and ",state_tr2," <br />\n till ",strftime(max(ss$Date), format = "%b/%d/%Y"),width = 20),collapse = "\n")

  2. adjusting vjust in theme- still title is overlapping on graph

  3. As per Fix plotly ggplotly() Title Overlapping Plot When Title is Split on Two Lines I added
    \n in labs - title argument but didnot work

  4. As per R: ggplot and plotly axis margin won't change I tried to find title in below so that i can adjust it. Still no luck

     str(plotly_sales[['x']][['layout']][['annotations']])

I am using this output in renderPlotly in Shiny R. Is there any other way that the header of the plot and graph auto adjusts when the name is long like (Andaman and Nicobar Island) vs (Dadra and Nagar Haveli and Daman and Diu) in ggplotly

Note: I have formatted the date in xaxis in my original code so Date overlapping is not the issue

Data

 Data:
structure(list(ï..State_OR_UT = c("Delhi", "Delhi", "Delhi", 
"Delhi", "Delhi", "Delhi", "Delhi", "Delhi", "Delhi", "Delhi", 
"Delhi", "Delhi", "Delhi", "Delhi", "Delhi", "Delhi", "Delhi", 
"Delhi", "Delhi", "Delhi", "Delhi", "Delhi", "Delhi", "Delhi", 
"Delhi", "Delhi", "Delhi", "Delhi", "Delhi", "Delhi", "Delhi", 
"Delhi", "Delhi", "Delhi", "Delhi", "Delhi", "Delhi", "Delhi", 
"Delhi", "Delhi", "Delhi", "Delhi", "Delhi", "Delhi", "Delhi", 
"Delhi", "Delhi", "Delhi", "Delhi", "Delhi", "Delhi", "Delhi", 
"Delhi", "Delhi", "Delhi", "Delhi", "Delhi", "Delhi", "Delhi", 
"Delhi", "Delhi", "Delhi", "Delhi", "Delhi", "Maharashtra", "Maharashtra", 
"Maharashtra", "Maharashtra", "Maharashtra", "Maharashtra", "Maharashtra", 
"Maharashtra", "Maharashtra", "Maharashtra", "Maharashtra", "Maharashtra", 
"Maharashtra", "Maharashtra", "Maharashtra", "Maharashtra", "Maharashtra", 
"Maharashtra", "Maharashtra", "Maharashtra", "Maharashtra", "Maharashtra", 
"Maharashtra", "Maharashtra", "Maharashtra", "Maharashtra", "Maharashtra", 
"Maharashtra", "Maharashtra", "Maharashtra", "Maharashtra", "Maharashtra", 
"Maharashtra", "Maharashtra", "Maharashtra", "Maharashtra", "Maharashtra", 
"Maharashtra", "Maharashtra", "Maharashtra", "Maharashtra", "Maharashtra", 
"Maharashtra", "Maharashtra", "Maharashtra", "Maharashtra", "Maharashtra", 
"Maharashtra", "Maharashtra", "Maharashtra", "Maharashtra", "Maharashtra", 
"Maharashtra", "Maharashtra", "Maharashtra", "Maharashtra", "Maharashtra", 
"Maharashtra", "Maharashtra", "Maharashtra", "Maharashtra", "Maharashtra", 
"Maharashtra", "Maharashtra"), Date = c("6/24/2020", "6/24/2020", 
"6/24/2020", "6/24/2020", "6/25/2020", "6/25/2020", "6/25/2020", 
"6/25/2020", "6/26/2020", "6/26/2020", "6/26/2020", "6/26/2020", 
"6/27/2020", "6/27/2020", "6/27/2020", "6/27/2020", "6/28/2020", 
"6/28/2020", "6/28/2020", "6/28/2020", "6/29/2020", "6/29/2020", 
"6/29/2020", "6/29/2020", "6/30/2020", "6/30/2020", "6/30/2020", 
"6/30/2020", "7/1/2020", "7/1/2020", "7/1/2020", "7/1/2020", 
"7/2/2020", "7/2/2020", "7/2/2020", "7/2/2020", "7/3/2020", "7/3/2020", 
"7/3/2020", "7/3/2020", "7/4/2020", "7/4/2020", "7/4/2020", "7/4/2020", 
"7/5/2020", "7/5/2020", "7/5/2020", "7/5/2020", "7/6/2020", "7/6/2020", 
"7/6/2020", "7/6/2020", "7/7/2020", "7/7/2020", "7/7/2020", "7/7/2020", 
"7/8/2020", "7/8/2020", "7/8/2020", "7/8/2020", "7/9/2020", "7/9/2020", 
"7/9/2020", "7/9/2020", "6/24/2020", "6/24/2020", "6/24/2020", 
"6/24/2020", "6/25/2020", "6/25/2020", "6/25/2020", "6/25/2020", 
"6/26/2020", "6/26/2020", "6/26/2020", "6/26/2020", "6/27/2020", 
"6/27/2020", "6/27/2020", "6/27/2020", "6/28/2020", "6/28/2020", 
"6/28/2020", "6/28/2020", "6/29/2020", "6/29/2020", "6/29/2020", 
"6/29/2020", "6/30/2020", "6/30/2020", "6/30/2020", "6/30/2020", 
"7/1/2020", "7/1/2020", "7/1/2020", "7/1/2020", "7/2/2020", "7/2/2020", 
"7/2/2020", "7/2/2020", "7/3/2020", "7/3/2020", "7/3/2020", "7/3/2020", 
"7/4/2020", "7/4/2020", "7/4/2020", "7/4/2020", "7/5/2020", "7/5/2020", 
"7/5/2020", "7/5/2020", "7/6/2020", "7/6/2020", "7/6/2020", "7/6/2020", 
"7/7/2020", "7/7/2020", "7/7/2020", "7/7/2020", "7/8/2020", "7/8/2020", 
"7/8/2020", "7/8/2020", "7/9/2020", "7/9/2020", "7/9/2020", "7/9/2020"
), TypeOfSales = c("Trend - A", "Trend - C", "Trend - D", "Trend - Caf", 
"Trend - A", "Trend - C", "Trend - D", "Trend - Caf", "Trend - A", 
"Trend - C", "Trend - D", "Trend - Caf", "Trend - A", "Trend - C", 
"Trend - D", "Trend - Caf", "Trend - A", "Trend - C", "Trend - D", 
"Trend - Caf", "Trend - A", "Trend - C", "Trend - D", "Trend - Caf", 
"Trend - A", "Trend - C", "Trend - D", "Trend - Caf", "Trend - A", 
"Trend - C", "Trend - D", "Trend - Caf", "Trend - A", "Trend - C", 
"Trend - D", "Trend - Caf", "Trend - A", "Trend - C", "Trend - D", 
"Trend - Caf", "Trend - A", "Trend - C", "Trend - D", "Trend - Caf", 
"Trend - A", "Trend - C", "Trend - D", "Trend - Caf", "Trend - A", 
"Trend - C", "Trend - D", "Trend - Caf", "Trend - A", "Trend - C", 
"Trend - D", "Trend - Caf", "Trend - A", "Trend - C", "Trend - D", 
"Trend - Caf", "Trend - A", "Trend - C", "Trend - D", "Trend - Caf", 
"Trend - A", "Trend - C", "Trend - D", "Trend - Caf", "Trend - A", 
"Trend - C", "Trend - D", "Trend - Caf", "Trend - A", "Trend - C", 
"Trend - D", "Trend - Caf", "Trend - A", "Trend - C", "Trend - D", 
"Trend - Caf", "Trend - A", "Trend - C", "Trend - D", "Trend - Caf", 
"Trend - A", "Trend - C", "Trend - D", "Trend - Caf", "Trend - A", 
"Trend - C", "Trend - D", "Trend - Caf", "Trend - A", "Trend - C", 
"Trend - D", "Trend - Caf", "Trend - A", "Trend - C", "Trend - D", 
"Trend - Caf", "Trend - A", "Trend - C", "Trend - D", "Trend - Caf", 
"Trend - A", "Trend - C", "Trend - D", "Trend - Caf", "Trend - A", 
"Trend - C", "Trend - D", "Trend - Caf", "Trend - A", "Trend - C", 
"Trend - D", "Trend - Caf", "Trend - A", "Trend - C", "Trend - D", 
"Trend - Caf", "Trend - A", "Trend - C", "Trend - D", "Trend - Caf", 
"Trend - A", "Trend - C", "Trend - D", "Trend - Caf"), ValuesTotals = c(24988L, 
39313L, 2301L, 66602L, 26588L, 41437L, 2365L, 70390L, 26586L, 
44765L, 2429L, 73780L, 28329L, 49301L, 2558L, 80188L, 28329L, 
49301L, 2558L, 80188L, 26246L, 56235L, 2680L, 85161L, 26270L, 
58348L, 2742L, 87360L, 27007L, 59992L, 2803L, 89802L, 26304L, 
63007L, 2864L, 92175L, 26148L, 65624L, 2923L, 94695L, 25940L, 
68256L, 3004L, 97200L, 25038L, 71339L, 3067L, 99444L, 25620L, 
72088L, 3115L, 100823L, 25449L, 74217L, 3165L, 102831L, 23452L, 
78199L, 3213L, 104864L, 21567L, 82226L, 3258L, 107051L, 62848L, 
69631L, 6531L, 139010L, 62369L, 73792L, 6739L, 142900L, 63357L, 
77453L, 6931L, 147741L, 67615L, 84245L, 7273L, 159133L, 67615L, 
84245L, 7273L, 159133L, 73313L, 88960L, 7610L, 169883L, 75995L, 
90911L, 7855L, 174761L, 79091L, 93154L, 8053L, 180298L, 77276L, 
101172L, 8178L, 186626L, 79927L, 104687L, 8376L, 192990L, 83311L, 
108082L, 8671L, 200064L, 86057L, 111740L, 8822L, 206619L, 87699L, 
115262L, 9026L, 211987L, 89313L, 118558L, 9250L, 217121L, 91084L, 
123192L, 9448L, 223724L, 93673L, 127259L, 9667L, 230599L)), class = "data.frame", row.names = c(NA, 
-128L))

ggplotly Sales graph

1
rggplot2ggplotly

1 Answers

0
votes

One way to achieve this is by increasing the margin at the top and to position the title near the top via layout like so:

ggplotly(plot_sales_hp, tooltip = "text") %>% 
  layout(title = list(y = .95, xref = "plot"),
    margin = list(l = 75, t = 150)
  )

enter image description here