ggplotly- Plot title overlapping with graph

Question

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:

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")

adjusting vjust in theme- still title is overlapping on graph
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
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))

stefan · Accepted Answer · 2020-07-10 07:32:19Z

2

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)
  )

answered Jul 10, 2020 at 7:32

stefan

130k6 gold badges42 silver badges84 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

ggplotly- Plot title overlapping with graph

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related