How can I change the date header in the x unified hovermode

Question

I created a plot in plotly(R) with a secondary y-axis. I use the hoverfunction x unified, but I would love to change the dateformat in the header. The data is weekly data, so now you see in the hoover: 1 jan 2022, but what I want to see is: 1 jan (week 01) or 1 jan - 8 jan 22. I tried some things with tickprefix, but then also the ticks are changing and not only the hover.

My demo code now is:

library(plotly)
# dummy data
df_data1 = data.frame(date_input = seq(as.Date('2022/01/01'), as.Date('2022/07/01'), by="week")
                     , value=1:26)
df_data2 = data.frame(date_input = seq(as.Date('2022/01/01'), as.Date('2022/07/01'), by="week")
                      , value2=3:28)
                  
plot1 <- plot_ly()
    
plot1 <- plot1 %>% 
        add_trace(data = df_data1, x = ~date_input, y = ~value
                  , type = 'scatter', mode = "lines", yaxis = "y", line = list(color = '#E64B35FF', opacity = 0.8)
                  , showlegend = FALSE
                  , hovertemplate = ~paste('# Value1: %{y:.0f}')) %>% 
        add_trace(data = df_data2, x = ~date_input, y = ~value2
                  , type = 'scatter', mode = "lines", yaxis = "y2", line = list(color = '#4DBBD5FF', opacity = 0.8)
                  , showlegend = FALSE
                  , hovertemplate = ~paste('# Value2: %{y:.0f}'))
    
plot1 %>% 
      layout(
        font = list(size = 10),
        xaxis = list(title = list(text = 'Date', font = list(size = 12))
                     , fixedrange = T, showgrid = FALSE, ticks = 'inside', type = 'date'
                     #, tickprefix = "Week of ", tickformat = '%d %b %y', ticktext = 'test'
                     ),
        yaxis = list(title = list(text = 'Number of value1', font = list(size = 12, color = '#E64B35FF'))
                     , fixedrange = T
                     , rangemode = 'tozero', showgrid = FALSE, showline = T, ticks = 'inside'),
        yaxis2 = list(overlaying = 'y', side = 'right', fixedrange = T, rangemode = 'tozero', showgrid = FALSE, showline = T, ticks = 'inside'
                      , title = list(text = 'Number of value2', font = list(size = 12, color = '#4DBBD5FF'))),
        margin = list(t = 50, r = 50),
        hovermode = "x unified"
      )

The output now looks like this:

So I want to change the date format from the black circled part (and not the ticks)

user_5329073 · Answer

You need to define the layout.xaxis.hoverformat.

Check it out.

plot1 %>% 
  layout(
    font = list(size = 10),
    xaxis = list(title = list(text = 'Date', font = list(size = 12)),
                 fixedrange = T, showgrid = FALSE, ticks = 'inside', 
                 type = 'date', hoverformat = "Week of %d %b %y"),   # <---- I'm new!
    yaxis = list(title = list(text = 'Number of value1',
                              font = list(size = 12, color = '#E64B35FF')),
                 fixedrange = T, rangemode = 'tozero', showgrid = FALSE, 
                 showline = T, ticks = 'inside'),
    yaxis2 = list(overlaying = 'y', side = 'right', fixedrange = T,
                  rangemode = 'tozero', showgrid = FALSE, showline = T, ticks = 'inside',
                  title = list(text = 'Number of value2', 
                  font = list(size = 12, color = '#4DBBD5FF'))),
    margin = list(t = 50, r = 50),
    hovermode = "x unified")

How can I change the date header in the x unified hovermode

1 Answers