Black Lives Matter. Please consider donating to Black Girls Code today.
Learn how to use COVID-19 data in open source Dash apps. Register for the Sept 23rd webinar with IQT!

Left Align Source Annotation or Axis Title for Source Below X-Axis

Is it possible to create a text box with a "Source: " left-aligned below the x-axis title? I saw the discussion for manipulating x-axis titles at https://help.plot.ly/adding-HTML-and-links-to-charts/, but that does not allow for left alignment (I tried <div align:left> and nothing happened).

Below is an MWE of what I was able to do, but I would like my source annotation left aligned below the x-axis title

df <- data.frame(x = 1:10, y = 1:10)
plot_ly(data = df, x = ~x, y = ~y, type = 'scatter', mode = 'lines') %>%
  layout(title = 'Sample Chart',
         margin = list(l = 50, r = 50, t = 60, b = 60),
         annotations = list(text = 'Source: U.S. Census Bureau.',
                            font = list(size = 12),
                            showarrow = FALSE,
                            xref = 'paper', x = -0.03,
                            yref = 'paper', y = -0.2))

I have also posted this question on StackOverflow, but if I get an answer here, I will be sure to update my answer there so people are not wasting their time.

I think you just need to add more to the bottom margin? This will left-align the annotation with-respect-to the y-axis (is that what you want?)

df <- data.frame(x = 1:10, y = 1:10)
plot_ly(data = df, x = ~x, y = ~y, height = 400, width = 600) %>%
    add_lines() %>%
    layout(title = 'Sample Chart',
           margin = list(l = 50, r = 50, t = 60, b = 100),
           annotations = list(text = 'Source: U.S. Census Bureau.',
                              font = list(size = 12),
                              showarrow = FALSE,
                              xref = 'paper', x = 0,
                              yref = 'paper', y = -0.3))

PS. when using normalized (i.e., paper) coordinates, it’s a good idea to explicitly set the height/width, so the result is always the same, no matter the printing context.

Thanks Carson! That did the trick. However, this is very sensitive to the font size of the x-axis title. When I increase the font size of the x-axis title, it generates a lot of dead space and I have to push the annotation down farther and increase my margins. Do you know if there’s a way to fix this? MWE below:

plot_ly(data = df, x = ~x, y = ~y, height = 400, width = 600) %>%
    add_lines() %>%
    layout(title = 'Sample Chart',
           xaxis = list(title = 'Title', titlefont = list(size = 25)),
           margin = list(l = 50, r = 50, t = 60, b = 100),
           annotations = list(text = 'Source: U.S. Census Bureau.',
                              font = list(size = 12),
                              showarrow = FALSE,
                              xref = 'paper', x = 0,
                              yref = 'paper', y = -0.3))