R shiny datable with styleColorBar not aligning the data on the left hand side

Question

I have the following code and my goal is to add styleColorBar to the WGT column, aligning the yellow bars on the left hand side of the column.

df = data.frame(WGT=c(10, 10, 15, 5, 30, 8, 2, 5, 1, 4, 10),
                  STATE=c("NY","NJ","OH","TX","CA","NC","MA","FL","AL","PA","AZ"), stringsAsFactors = F)
  
  dft <- datatable(df, rownames= T,
                   options = list(scrollX = T
                                  , lengthChange = F
                                  , paging =F    # this completely hides  the Next, Previous and Page number at the bottom of the table
                                  , autoWidth = F
                                  , pageLength = 20 # this determines how many rows we want to see per page
                                  , info = F #  this will hide the "Showing 1 of 2..." at the bottom of the table -->  https://stackoverflow.com/questions/51730816/remove-showing-1-to-n-of-n-entries-shiny-dt
                                  , searching = F  # this removes the search box  ->  https://stackoverflow.com/questions/35624413/remove-search-option-but-leave-search-columns-option
                   ))
  
  dft <- dft %>%  formatStyle('WGT',
                              background = styleColorBar(df[,'WGT'], 'yellow'),
                              backgroundSize = '100% 80%',
                              backgroundRepeat = 'no-repeat',
                              backgroundPosition = 'left')

As you can see, the horizontal yellow bars are instead aligned on the right hand side of the WGT column and I can't figure out why. I checked other similar posts here but I couldn't find an answer to this probably simple question. Thanks

Answer 1

How about the angle parameter in styleColorBar function?

Try this:

dft <- dft %>%  formatStyle('WGT', 
                            background = styleColorBar(df[,'WGT'], 'yellow', angle = -90),
                            backgroundSize = '100% 80%',
                            backgroundRepeat = 'no-repeat',
                            backgroundPosition = 'center')

Output :