Manually positioning my (htmlwidget) plot in Shiny?

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.


#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)) %>% 
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(
        #This will dictate the app's window size (rather than have it stretch to browser width)
             height: 1500px;
             max-width: 1500px;
             min-width: 1500px;
             margin: auto;
              overflow-x:scroll;}" #Allow horizontal scroll
      box(title = "test", 
          title_side = "top left",
          width = 5,
                 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)

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

             height: 1500px;
             max-width: 1500px;
             min-width: 1500px;
             margin: auto;

        left:-100px; }      
        " )

play around with the left value

1 Like

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!

1 Like

@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!

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

        div .ui.accordion {
            height: 400px;
1 Like


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

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

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

and only style that in the style tag

  #specificbox1{ height:300px; }
1 Like

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!

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.

If you have a query related to it or one of the replies, start a new topic and refer back with a link.