Chart values have been multiplied by 100 when tickformat=% was added

Question

I have the stacked bar below in which everything works fine except from the values in the axes and the hovertext which seem to have been multiplied by 100. I tried to to trick it by dividing my initial values with 100 but then I was taking rounded values back (20 instead of 19.8). I think that happened after I added tickformat=%

# data
Category<-c("First dose","Full vaccination")
`Uptake first dose`<-c(19.8,0)
`Uptake full vaccination`<-c(0,7.6)
`Not vaccinated`<-c(80.2,92.4)
ch5<-data.frame(Category,`Uptake first dose`,`Uptake full vaccination`,`Not vaccinated`)

# transform data
data.long <- ch5 %>%
  pivot_longer(cols = -Category,
               names_to = "vac",
               values_to = "percent") %>%
  mutate(vac = str_replace_all(vac, "\\.", " "),
         vac = fct_rev(factor(vac))) 

# add plot
plot_ly(data.long) %>%
  add_bars(y = ~Category,
           x = ~percent,
           color = ~vac,
           text = ~vac,
           colors = c("#458d35", "#63bb47", "#e6e7e8"),
           hovertemplate = paste('<b>%{y}</b>',
                                 '<br>%{text}: %{x} ',
                                 '<extra></extra>')) %>%
  layout(font = list(color = '#a2a2a2'),barmode = "stack",
         bargap = 0.7,
         yaxis = list(fixedrange = TRUE,autorange="reversed",
                      title = "",
                      showticklabels = FALSE,
                      showgrid = FALSE,
                      showline = FALSE,
                      zeroline = FALSE),
         xaxis = list(fixedrange = TRUE,title = "",
                      tickformat = "%",
                      
                      zeroline = FALSE,
                      showgrid = FALSE),
         
         hoverlabel = list(bgcolor = "black",
                           bordercolor = "black",
                           font = list(color = "white")),
         shapes = list(type = "line",
                       y0 = 0, y1 = 1, yref = "paper",
                       x0 = 70, x1 = 70),
         annotations = list(text = "Target (70%)",
                            showarrow = FALSE,
                            x = 70,
                            y = 1.05,
                            yref = "paper"),
         legend = list(orientation = 'h'))

Answer 1

Use ticksuffix = '%'.

library(plotly)

plot_ly(data.long) %>%
  add_bars(y = ~Category,
           x = ~percent,
           color = ~vac,
           text = ~vac,
           colors = c("#458d35", "#63bb47", "#e6e7e8"),
           hovertemplate = paste('<b>%{y}</b>',
                                 '<br>%{text}: %{x} ',
                                 '<extra></extra>')) %>%
  layout(font = list(color = '#a2a2a2'),barmode = "stack",
         bargap = 0.7,
         yaxis = list(fixedrange = TRUE,autorange="reversed",
                      title = "",
                      showticklabels = FALSE,
                      showgrid = FALSE,
                      showline = FALSE,
                      zeroline = FALSE),
         xaxis = list(fixedrange = TRUE,title = "",ticksuffix = '%',
                      zeroline = FALSE,
                      showgrid = FALSE),
         
         hoverlabel = list(bgcolor = "black",
                           bordercolor = "black",
                           font = list(color = "white")),
         shapes = list(type = "line",
                       y0 = 0, y1 = 1, yref = "paper",
                       x0 = 70, x1 = 70),
         annotations = list(text = "Target (70%)",
                            showarrow = FALSE,
                            x = 70,
                            y = 1.05,
                            yref = "paper"),
         legend = list(orientation = 'h'))