ggplotly drops bold axis text from ggplot

Question

I have created a geom_line plot, p , in ggplot2. y-axis is temperature values and x-axis is year. As part of the styling I want these axis texts (not labels) to be in bold. I can get this like so

theme(
text = element_text(size = 15, family = "arial", face="bold", color = "black"))

and when I run it as ggplot it's all fine. Now when I want to pass the plot to ggplotly(p) the bold axis styling is removed. Is there a fix for this or alternatively is there a way to make this correction in plotly layout directly, eg

fig <- ggplotly(p) %>% layout(...) 

I cannot find the solution either way. Thanks!

My df and plot are the following

> df
   year average    min    max
1  2000  0.6972 0.4173 1.1620
2  2001  0.7808 0.4412 1.2114
3  2002  0.8009 0.4835 1.2186
4  2003  0.8002 0.4288 1.2706
5  2004  0.8030 0.4096 1.3339
6  2005  0.7698 0.3131 1.2612
7  2006  0.8121 0.3186 1.3345
8  2007  0.8459 0.4138 1.3167
9  2008  0.8658 0.5506 1.3773
10 2009  0.8686 0.3732 1.4662
11 2010  0.8898 0.4290 1.4977
12 2011  0.9353 0.3621 1.5208
13 2012  0.9634 0.4418 1.5706
14 2013  0.9994 0.5963 1.5991
15 2014  1.0136 0.4835 1.6712
16 2015  1.0421 0.5250 1.7437
17 2016  1.0572 0.5073 1.7448
18 2017  1.1001 0.7276 1.7810
19 2018  1.1704 0.8069 1.8729
20 2019  1.1900 0.7383 1.8708

p <- ggplot(df) + 
  geom_line(aes(y = average, x = year), colour = "#8B572A") +
  geom_ribbon(aes(ymin = min, 
                  ymax = max, x = year), fill = "#8B572A", alpha = 0.3) +
  theme(plot.background = element_rect(fill = '#F4F4F4'),
        panel.background = element_rect(fill = '#F4F4F4'),
        panel.grid.major.y = element_line(color = '#E7E7E7', size = 1),
        panel.grid.major.x = element_blank(),
        axis.title=element_blank(),
        text = element_text(size = 15, face="bold")) 

this seems to be fine, both the temperature on y-axis and years on x-axis are in bold in ggplot but passing this to ggplotly removes the bold text in both axis.

fig <- ggplotly(p) 
fig  

If there is a solution either in ggplot or plotly that would be great. Thanks!

Answer 1

When @Quniten asked you for dput , you added data, but it was not the output of dput . You'll find that you tend to get answers a lot faster when you use tools like that.

Either way, I don't know of a native Plotly method of making the text bold. However, using htmlwidgets::onRender , you can make this happen.

In case you are not aware, I set this to bold . Alternatively, you can use normal | bold | bolder | lighter | <number> normal | bold | bolder | lighter | <number> normal | bold | bolder | lighter | <number> . For a number, I think 900 is equivalent to bold, but I'd ask Google first, if you go that route.

Here's the updated code:

ggplotly(p) %>%
  htmlwidgets::onRender("function(el, x){
    gimme = document.querySelectorAll('g.xtick text');     /* el's x-tick labels */
    gimmeMore = document.querySelectorAll('g.ytick text'); /* el's y-tick labels */
    for(i = 0; i < gimme.length; i++) {
      gimme[i].setAttribute('font-weight', 'bold');      /* make the x labels bold */
    }
    for(j = 0; j < gimmeMore.length; j++){
      gimmeMore[j].setAttribute('font-weight', 'bold');  /* make the y labels bold */
    }
  }")