How to adjust height of dash plotly figures in R?

user_16070191 0
Viewed 120

I have 3 figures of scatter plots I make using ggplotly and dash. I then plot the 3 figures in tabs using Dash, but the height of the figures looks squished and I can't figure out how to increase their height.

I make 3 plotly figures using this code like this 3 times:

p1 <- ggplot(data, aes(x=col1, y=col1))
plotlyp1 <- ggplotly(p1)

I'm then coding the dash plot with 3 tabs, a tab per figure, with:

app <- Dash$new()

app$layout(htmlDiv(list(
  htmlH1('3 plots'),
  dccTabs(id="tabs-example", value='tab-1-example', children=list(
    dccTab(label='plot1', value='tab-1-example'),
    dccTab(label='plot2', value='tab-2-example'),
    dccTab(label='plot3', value='tab-3-example')
  )),
  htmlDiv(id='tabs-plots')
)))

app$callback(
  output = list(id='tabs-plots', property = 'children'),
  params = list(input(id = 'tabs-example', property = 'value')),
  function(tab){
    if(tab == 'tab-1-example'){
      return(htmlDiv(list(
        htmlH3(''),
        dccGraph(
          id='graph-1-tabs',
          figure=plotlyp1
        )
      )))
    }
    
    else if(tab == 'tab-2-example'){
      return(htmlDiv(list(
        htmlH3(''),
        dccGraph(
          id='graph-2-tabs',
          figure=plotlyp2
        )
      )))
    }
    
    else if(tab == 'tab-3-example'){
      return(htmlDiv(list(
        htmlH3(''),
        dccGraph(
          id='graph-3-tabs',
          figure=plotlyp3,
           style = list(
            height ='100%'),
        )
      )))
    }
  }
  
  
  
)

app$run_server()

Currently to try to get more height I'm trying style = list(height ='100%') in dccGraph() but this doesn't seem to do anything and I can't find any examples/resources in R that show how to change plot height.

For reference the dash code above gives this:

enter image description here

Each tab has a plot like this and I just want to make them bigger by height.

plotly-dash plotly ggplot2 r
1 Answers

style = list(height = "100%") will add the CSS height:100% to the div containing the plot. This will scale the plot to 100% height of the parent div, generated by htmlDiv(). You may enlarge the parent:

if(tab == 'tab-1-example'){
  return(htmlDiv(
           style = list(height = '750px'), # <=
           list(
             htmlH3(''),
             dccGraph(
             id = 'graph-1-tabs',
             figure = plotlyp1,
             style = list(height = '100%')
            )
          )))
        }
user_38341390
Related