Manually positioning my (htmlwidget) plot in Shiny?

[cwright1]

I've got a Shiny dashboard which uses some HTML to have the entire window fixed (aka the boxes/plots will not stretch when you maximize the browser window). This works fine for all my ggplots, but not for my chord diagram, which I think is an htmlwidget.

Here's a screen shot from my app, and one from the minimal reprex I've produced below to illustrate the problem:

How can I manually position my plot to fit inside the box? I need to keep the size of the plot, as simply re-sizing will not work - it just makes the plot much too small.

library(shiny)
library(shiny.semantic)
library(semantic.dashboard)
library(chorddiag)
library(dplyr)

#First we just generate a matrix to be used for our plot (this just comes straight from chorddiag's vignette example)
titanic_tbl <- tibble::as_tibble(Titanic)
titanic_tbl <- titanic_tbl %>%
  mutate(across(where(is.character), as.factor))
  by_class_survival <- titanic_tbl %>%
  group_by(Class, Survived) %>%
  summarise(Count = sum(n)) %>% 
  ungroup()
titanic.mat <- matrix(by_class_survival$Count, nrow = 4, ncol = 2, byrow = TRUE)
dimnames(titanic.mat ) <- list(Class = levels(titanic_tbl$Class),
                               Survival = levels(titanic_tbl$Survived))
groupColors <- c("#2171b5", "#6baed6", "#bdd7e7", "#bababa", "#d7191c", "#1a9641")



#Make ui
ui <- dashboardPage(
      dashboardHeader(),
      dashboardSidebar(sidebarMenu()),
      dashboardBody(
        
        #This will dictate the app's window size (rather than have it stretch to browser width)
        tags$head(
          tags$style(
            "body{
             height: 1500px;
             max-width: 1500px;
             min-width: 1500px;
             margin: auto;
              overflow-x:scroll;}" #Allow horizontal scroll
          )
        ),
    
      fluidRow(
      box(title = "test", 
          title_side = "top left",
          width = 5,
          column(6,
                 chorddiagOutput("chordtest", height="450px", width="500px")) ))))
      

#Make server
server <- function(input, output) {
    
          output$chordtest <- renderChorddiag({
          chorddiag(titanic.mat, type = "bipartite", 
                    groupColors = groupColors,
                    tickInterval = 50, categoryNames = c("",""))
  })}

#Run app
shinyApp(ui, server)

[nirgrahamuk]

@cwright1

 tags$style(
            "body{
             height: 1500px;
             max-width: 1500px;
             min-width: 1500px;
             margin: auto;
              overflow-x:scroll;}" #Allow horizontal scroll
          )

you can similarly add style rules to the chordtest named object.

      tags$style(
        "body{
             height: 1500px;
             max-width: 1500px;
             min-width: 1500px;
             margin: auto;
              overflow-x:scroll;}

        #chordtest{
        position:relative;
        left:-100px; }      
        " )
  

play around with the left value

[cwright1]

I really spent a couple of days trying to find out where exactly to add the HTML which would enable only that plot to be moved without everything else.

This worked beautifully - thanks a ton!

[cwright1]

@nirgrahamuk just curious about something on this topic...

I've followed your example and happy to say I got the positioning down!

But unfortunately the height of my dashboard box is now increased and is longer than all other boxes. Is there a way to force the height of the box to be shorter without affecting the chord diagram plot size?

Thanks again!

[nirgrahamuk]

The box can be controlled like this I think. (in the style "")

        div .ui.accordion {
            height: 400px;
        }

[cwright1]

@nirgrahamuk

You are clearly super knowledgeable about this! I searched various sources but nothing I tried really worked. Your solution modified the height of the boxes thank you! I hate to ask a follow up, but it seems that no matter where I stick this:

tags$head(tags$style("div .ui.accordion {height: 400px;}"))

It modifies the height of all boxes. If I put it at the beginning of the dashboard, or in any given box, every box on every tab is affected. Can I constrain this to just adjust the box I'm interested in?

Many thanks again

[nirgrahamuk]

if you want to control styling of a specific semantic dashboard box then give the box an id

box(title = "test", 
          id="specificbox1",
          title_side = "top left",

and only style that in the style tag

  #specificbox1{ height:300px; }

[cwright1]

Thank you so much! I was doing this thinking the title would be enough, I didn't know providing id was allowed.

I hope to get to your level of knowledge some day. Thanks again!