Plotly may ignore you regardless of what you do because it looks like you are asking for almost 300 tick labels on the x-axis. However, when you use ggplotly
, date fields become character fields. (I don't know if this is from ggplot
or if it's a Plotly-ism.)
After rendering the ggplotly
object, you can replace the x
in each trace and replace the majority of the arguments for layout.xaxis
. Alternatively, you may find it to be a lot easier if you create this in Plotly, to begin with.
I've added the data I used because your question is not reproducible. It looks like you're new to SO; welcome to the community! If you want great answers quickly, it's best to make all questions reproducible. For example, sample data from the output of dput()
or reprex::reprex()
. Check it out: making R reproducible questions.
In the following code, the only parts you need to create the plot without the aesthetics are the first two piped: plot_ly()
and add_lines()
.
I added comments to explain what different aspects of this code is doing. Additionally, I've broken down some of this a bit further after the code and plot image.
library(tidyverse)
library(plotly)
# Periode <- as.Date(website$Datum) # data not provided
# Index <- website$KonSens
set.seed(353)
website <- data.frame(
Periode = sample(seq(as.Date("1998-03-31"), as.Date("2022-06-30"), by = "week"), 50),
Index = sample(runif(100, -4.5, 2.5), 50)) %>%
arrange(Periode)
plot_ly(type = "scatter", mode = "markers",
marker = list(color = "#7AA489", size = 8,
line = list(width = 2, color = "#003478")),
data = website, x = ~Periode, y = ~Index) %>%
add_lines(line = list(width = 5, color = "#7AA489")) %>%
layout(xaxis = list(dtick = "M18", # every 18 months
tickformat = "%b %Y"), # Abbrev Month, 4-digit year
yaxis = list(range = c(-6, 3), # show this range
zeroline = F, # remove horizontal line at 0
showline = T), # vertical line along y-axis
showlegend = F) %>% # no legend
htmlwidgets::onRender("function(el, x){. # make the axis titles BOLD
gimmeX = document.querySelector('g.infolayer g.g-xtitle text');
gimmeY = document.querySelector('g.infolayer g.g-ytitle text');
gimmeX.style.fontWeight = 'bold';
gimmeY.style.fontWeight = 'bold';
}") %>%
rangeslider(borderwidth = 1)

Specifying the Range on the y-axis
In Plotly, you won't need to set breaks and labels. You just need to define the range. If that's all you designated in the layout
, it would like something like this.
layout(yaxis = list(range = c(-6, 3))
Non-Dynamic Date x-axis Tick Text Formatting
Labels on the x-axis can be specified to be labeled by month. However, like a commenter mentioned, you loose the dynamic date scaling done when you zoom. You can actually set the scaling date format for zooming ranges, as well. (I won't go into that in this answer, though.)
To specify the labels on the x-axis as every month by month, you would use layout.xaxis.dtick = "M1"
, every 18 months is M18
, and so on. If you wanted to specify the appearance as the month and year, you can use the same formatting as used in as.Date
, where %b
is an abbreviated month name, and %Y
is a four-digit year. If this was all you needed to set in the layout
, it would look like this.
layout(xaxis = list(dtick = "M18", # every 18 months
tickformat = "%b %Y")) # Abbrev Month, 4-digit year
Bold Axis Labels
Additionally, there isn't a parameter you can set to make the axis labels bold. It doesn't really matter if it's ggplotly
or plot_ly
.
However, you can use htmlwidgets::onRender
to make this happen.
htmlwidgets::onRender("function(el, x){
gimmeX = document.querySelector('g.infolayer g.g-xtitle text');
gimmeY = document.querySelector('g.infolayer g.g-ytitle text');
gimmeX.style.fontWeight = 'bold';
gimmeY.style.fontWeight = 'bold';
}")