Search code examples
rggplot2plotlyr-plotly

Y axis labels width breaks the alignment between two plots in shiny app

I have the shiny app below in which I want the two plots to be perfectly aligned based on the dates. The issue is that when my dummy$value = runif(365) + seq(-140, 224)^2 / 10000 so the values I get are not long the alignment works but if for example value = runif(365) + seq(-140, 224)^2 / 10 which are my actual values then value includes longer numbers in y axis. Maybe turning 6000 to 6k would solve the issue.

library(shiny)
library(shinydashboard)
library(ggplot2)
library(dplyr)
library(plotly)
# Dummy data
data <- data.frame(
  day = as.Date("2017-06-14") - 0:364,
  value = runif(365) + seq(-140, 224)^2 / 10
)
ui <- dashboardPage(
  dashboardHeader(),
  dashboardSidebar(),
  dashboardBody(
    column(width = 8,
           fluidRow(
             shinydashboard::box(width = 12,  plotlyOutput(outputId = "detailed_plot_2", height = "600px" ))
           ),
           fluidRow(
             shinydashboard::box(width = 12,  plotlyOutput(outputId = "detailed_plot_22", height = "100px" ))
           )
           
    )
  )
)

server <- function(input, output) {
  output$detailed_plot_2<-renderPlotly({
    # Most basic bubble plot
    
    p <- ggplot(data, aes(x=day, y=value)) +
      geom_line() + 
      xlab("")
    ggplotly(p)
  })
  output$detailed_plot_22<-renderPlotly({
    plot <-data %>%
      ggplot(aes(day,value)) +
      geom_col() +
      labs(y = "", x = "") +
      theme(axis.text.x = element_blank(), axis.text.y = element_blank(), axis.line = element_line(colour = 'black'))
    
    ggplotly(plot)
  })
}

shinyApp(ui, server)
Solution

  • I'd suggest using subplot along with shareX = TRUE to align the x-axes. This also keeps the axes synchronized when the user zooms:

    library(shiny)
library(shinydashboard)
library(ggplot2)
library(dplyr)
library(plotly)

# Dummy data
data <- data.frame(
  day = as.Date("2017-06-14") - 0:364,
  value = runif(365) + seq(-140, 224)^2 / 10
)

ui <- dashboardPage(
  dashboardHeader(),
  dashboardSidebar(),
  dashboardBody(
    column(width = 8,
           fluidRow(
             shinydashboard::box(width = 12,  plotlyOutput(outputId = "detailed_plot_2", height = "800px" ))
           )
           
    )
  )
)

server <- function(input, output) {
  output$detailed_plot_2 <- renderPlotly({
    # Most basic bubble plot
    p_2 <- ggplot(data, aes(x=day, y=value)) +
      geom_line() + 
      xlab("")
    
    p_22 <- data %>%
      ggplot(aes(day,value)) +
      geom_col() +
      labs(y = "", x = "") +
      theme(axis.text.x = element_blank(), axis.text.y = element_blank(), axis.line = element_line(colour = 'black'))
    
    subplot(ggplotly(p_2), ggplotly(p_22), nrows = 2, heights = c(0.84, 0.16), shareX = TRUE)
  })
  
}

shinyApp(ui, server)

    result