bar-chart misaligned

[ravichowdhury88]

I am trying to use the cellrenderer to create a bar chart with values but the bar chart is misaligned. I have tried various way but could not find a solution to it.

CSS Code

.bar-cell {
  display: flex;
  align-items: center;
}

.number {
  font-size: 13.5px;
  white-space: pre;
}

.bar-chart {
  flex-grow: 1;
  margin-left: 6px;
  height: 22px;
  align-items: left;
}

.bar {
  height: 100%;
}

R Code

reactable(class_tbl, 
          highlight = TRUE,
          striped = TRUE,
         columns = list(
           total_count = colDef(
             name = "Total Count",
             cell = function(value) {
               width <- paste0(value *  100 / sum(class_tbl$total_count), "%")
               value <- format(value, width = 10, justify = "right")
               bar <- div(
                 class = "bar-chart",
                 style = list(marginRight = "6px"),
                 div(
                   class = "bar",
                   style = list(width = width, backgroundColor = "#F15A3F")
                 )
               )
               div(class = "bar-cell", span(class = "number", value), bar)
             }
           )
         )
           )

Output

[glin]

Hi,

You can align the bars by giving each label the same fixed width. There are two examples on how to do that here:

• https://glin.github.io/reactable/articles/building-twitter-followers.html#add-bar-charts
• https://glin.github.io/reactable/articles/cookbook/cookbook.html#units-on-first-row-only

edit: my guess is that you need to use a monospaced font on the numbers.

[ravichowdhury88]

Hi,

You can align the bars by giving each label the same fixed width. There are two examples on how to do that here:

* https://glin.github.io/reactable/articles/building-twitter-followers.html#add-bar-charts

* https://glin.github.io/reactable/articles/cookbook/cookbook.html#units-on-first-row-only

edit: my guess is that you need to use a monospaced font on the numbers.

Adding monospace as font-family worked for me, thank you.