timelyportfolio/sunburstR

How avoid scroll in sund2b legend

rafacobo opened this issue · 2 comments

I am writting a shiny app using sund2b, but the legend does not show the complete names and you hava a scroll bar that I would like to avoid.

image

@rafacobo thanks for the issue and happy you are using sunburstR. I tried to answer in code and comments below.

library(htmlwidgets)
library(htmltools)
library(treemap)
library(sunburstR)

rhd <- random.hierarchical.data(labels.prefix="really looooooooooooooooooong")

tm <- treemap(
  rhd,
  index = paste0("index", 1:3),
  vSize = "x",
  draw = FALSE
)$tm

sun <- sund2b(
  d3_nest(tm, value_cols = colnames(tm)[-(1:3)]),
  colors = htmlwidgets::JS(
  # yes this is a little different, so please pay attention
  #  "function(d) {return d.color}" will not work
    "function(name, d){return d.color || '#ccc';}"
  ),
  valueField = "vSize",
  width = "100%",
  # set elementId for css approach 2
  elementId = "my-unique-id"
)

# to prevent the scrollbar we will need to do a couple of things in CSS
#   these can be accomplished in a couple different ways
#   see http://www.buildingwidgets.com/blog/2016/9/7/custom-styling-for-htmlwidgets

# add css with tags$style; this will be applied globally
browsable(
  tagList(
    tags$style(
"
.d2b-breadcrumbs-frame {
  overflow: hidden !important;
}

.d2b-sunburst-content {
  max-width: 130px;
  text-overflow: ellipsis;
}

.d2b-sunburst-label {
  max-width: 130px;
}
"
    ),
    sun
  )
)

# only apply to on widget specifically 
htmlwidgets::prependContent(
  sun,
  tags$style(
sprintf(
"
%s .d2b-breadcrumbs-frame {
  overflow: hidden;
}

%s .d2b-sunburst-content {
  max-width: 130px;
  text-overflow: ellipsis;
}

%s .d2b-sunburst-label {
  max-width: 130px;
}
",
"#my-unique-id","#my-unique-id","#my-unique-id"
)
  )
)

closing assuming this is solved with the above response. please reopen if still an issue.