Center plot_ly gauge in rmarkdown

Question

Can someone help me center my plotly gauges in r markdown? Whenever I knit my flexdashboard and open up the HTML file, the plotly gauge values seem to shift while the dial remains centered... how can I make these stagnant/all centered?

gauges

EDIT: here is one of the gauge codes:

plot_ly(
    type = "indicator",
    mode = "gauge+number",
    align = "center",
    value = round(100*data_open,1),
    number = list(suffix = "%", valueformat = "center", textAlign= 'center'),
    gauge = list(
      font = list(color = "black", family = "Open Sans", size = 16),
        axis = list(
            range = list(0,100),
            tickvals = list(0,20,40,60,80,90,100),
            tickwidth = 1, 
            tickcolor = "black"),
        bar = list(color = "lightgrey", thickness = .20,
                   line = list(width = 4)), 
        borderwidth = 2,
        bordercolor = "lightgrey",
        steps = list(
            list(range = c(0,20), color = "#490f52"),
            list(range = c(20,40), color = "#5d2a65"),
            list(range = c(40,60), color = "#87618d"),
            list(range = c(60,80), color = "#b198b4"),
            list(range = c(80,90), color = "#c6b3c8"),
            list(range = c(90,100), color = "#d7cad9")),         
        threshold = list(
            line = list(color = "darkgrey", width = 4),
            thickness = 0.75,
            value = round(100*data_open,1))),
    height  = 200) %>% 
    layout(margin = list(autoexpand =FALSE, l = 30, r = 45, t = 20, b = 55),
        font = list(color = "black", family = "Open Sans", textAlign= 'center', size = 15)) %>% 
  config(displayModeBar = F)

Answer 1

Your code works nice.

Try to find a problem somewhere on your side (update the packages first of all).

Also you can check the c3 package -> https://rdrr.io/cran/c3/ It supports gauges too.

```{r}
library(plotly)

plot_ly(
    type = "indicator",
    mode = "gauge+number",
    align = "center",
    value = 50,
    number = list(suffix = "%", valueformat = "center", textAlign= 'center'),
    gauge = list(
      font = list(color = "black", family = "Open Sans", size = 16),
        axis = list(
            range = list(0,100),
            tickvals = list(0,20,40,60,80,90,100),
            tickwidth = 1, 
            tickcolor = "black"),
        bar = list(color = "lightgrey", thickness = .20,
                   line = list(width = 4)), 
        borderwidth = 2,
        bordercolor = "lightgrey",
        steps = list(
            list(range = c(0,20), color = "#490f52"),
            list(range = c(20,40), color = "#5d2a65"),
            list(range = c(40,60), color = "#87618d"),
            list(range = c(60,80), color = "#b198b4"),
            list(range = c(80,90), color = "#c6b3c8"),
            list(range = c(90,100), color = "#d7cad9")),         
        threshold = list(
            line = list(color = "darkgrey", width = 4),
            thickness = 0.75,
            value = 50)),
    height  = 200) %>% 
    layout(margin = list(autoexpand =FALSE, l = 30, r = 45, t = 20, b = 55),
        font = list(color = "black", family = "Open Sans", textAlign= 'center', size = 15)) %>% 
  config(displayModeBar = F)
```