How to put two plotly graphs in one row? - r

Question

I have multiple pie graphs from plotly in my Shiny app and I cannot seem to move them so that they fit in the same row. I can move them around either by changing the position in a .css file or using absolutePanel() but either option leaves me with a giant chunk of empty white space at the bottom. I cannot post code from my app so I made a smaller example in which i tried moving with column() function to no avail. Any help would be appreciated. In my actual app I have about 5 graphs so the amount of white space is VERY big and i wish to resolve it. It might be an easy answer but bear with me guys Im a newb...
library(shiny)
library(plotly)
ui = fluidPage(
plotlyOutput("graph1",width="40%",height="350px"),
column(width=12,offset=4,plotlyOutput("graph2",width="40%",height="350px"))
)
server = function(input, output,session) {
output$graph1<-renderPlotly({
USPersonalExpenditure <- data.frame("Categorie"=rownames(USPersonalExpenditure), USPersonalExpenditure)
data <- USPersonalExpenditure[,c('Categorie', 'X1960')]
p <- plot_ly(data, labels = ~Categorie, values = ~X1960, type = 'pie') %>%
layout(title = 'Graph 1',
xaxis = list(showgrid = FALSE, zeroline = FALSE, showticklabels = FALSE),
yaxis = list(showgrid = FALSE, zeroline = FALSE, showticklabels = FALSE))
})
output$graph2<-renderPlotly({
USPersonalExpenditure <- data.frame("Categorie" = rownames(USPersonalExpenditure), USPersonalExpenditure)
data <- USPersonalExpenditure[, c('Categorie', 'X1960')]
colors <- c('rgb(211,94,96)', 'rgb(128,133,133)', 'rgb(144,103,167)', 'rgb(171,104,87)', 'rgb(114,147,203)')
p <- plot_ly(data, labels = ~Categorie, values = ~X1960, type = 'pie',
textposition = 'inside',
textinfo = 'label+percent',
insidetextfont = list(color = '#FFFFFF'),
hoverinfo = 'text',
text = ~paste('$', X1960, ' billions'),
marker = list(colors = colors,
line = list(color = '#FFFFFF', width = 1)),
#The 'pull' attribute can also be used to create space between the sectors
showlegend = FALSE) %>%
layout(title = 'Graph 2',
xaxis = list(showgrid = FALSE, zeroline = FALSE, showticklabels = FALSE),
yaxis = list(showgrid = FALSE, zeroline = FALSE, showticklabels = FALSE))
})
}
# Run the application
shinyApp(ui = ui, server = server)

Answer 1

You could try using a fluidRow and segment that by columns as in below. The columns space is base 12, so two column(6,..) calls within one fluidRow will split you into two. The example below splits into 4. I'm not clear on what the "white space at the bottom" issue is that you describe, so this may not be the fix you're after.
ui = fluidPage(
fluidRow(
column(3,
plotlyOutput("graph1")
),
column(3,
plotlyOutput("graph2")
),
column(3,
plotlyOutput("graph3")
),
column(3,
plotlyOutput("graph4")
)
)
)