Plotly - change range of x-axis (date)

Question

I managed to change the range in the ggplot, but when passing that plot to plotly it totaly disregarded this.

Goal

I want to pass a long serie from 1996 onwards to plotly, it want the plotly to have all the date in it, but ONLY show a set of the series which I decide (about last 18 months) - but the user should be able to zoom-out and see the entire serie if one want that. -> How can I achieve this?

I have the limits already created as values called maxdate and mindate so these are available to call-upon. NOTE however that these changes, so dates can not be passed manually in the code here. There is a col. in my df that has the date in date-format, which can be called upon if my variables can't be used.

> str(maxdate)
 Date[1:1], format: "2023-01-01"
> str(mindate)
 Date[1:1], format: "2021-07-01"

EDIT1

str of df_konj

> str(df_konj)
'data.frame':   1950 obs. of  3 variables:
 $ Indikator: Factor w/ 6 levels "Barometerindikatorn",..: 1 1 1 1 1 1 1 1 1 1 ...
 $ Period   : Date, format: "1996-01-01" "1996-02-01" "1996-03-01" "1996-04-01" ...
 $ value    : num  NA NA NA NA NA NA 85.6 88 88.9 91 ...

code for ggplot:

df_konj_dia <- ggplot(df_konj, aes(x = Period, y = value, group=Indikator, color=Indikator, 
                    linetype=Indikator, linewidth = Indikator)) +
  geom_point(size=2) + 
  geom_line() +
  ylim(50, 150)
  scale_x_date(limits=(c(mindate, maxdate)))

the plotly code:

df_konj_plotly <- ggplotly(df_konj_dia, tooltip = c("x","y","colour")) %>%
  layout(title = list(text = paste0('Konjunkturbarometern - månadsbarometern, flera indikatorer',
                                    '<br>',
                                    '<sup>',
                                    'Sverige, säsongsrensat','</sup>')),
        legend = list(x = 100, y = 0.5),
      xaxis = list(rangeslider = list(visible = T)))
         

df_konj_plotly

dput-output of df: "df_konj", yr filtered from 2018 though

structure(list(Indikator = structure(c(1L, 1L, 1L, 1L, 1L, 1L, 
1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 
1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 
1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 
1L, 1L, 1L, 1L, 1L, 1L, 1L, 5L, 5L, 5L, 5L, 5L, 5L, 5L, 5L, 5L, 
5L, 5L, 5L, 5L, 5L, 5L, 5L, 5L, 5L, 5L, 5L, 5L, 5L, 5L, 5L, 5L, 
5L, 5L, 5L, 5L, 5L, 5L, 5L, 5L, 5L, 5L, 5L, 5L, 5L, 5L, 5L, 5L, 
5L, 5L, 5L, 5L, 5L, 5L, 5L, 5L, 5L, 5L, 5L, 5L, 5L, 5L, 5L, 5L, 
5L, 5L, 5L, 5L, 3L, 3L, 3L, 3L, 3L, 3L, 3L, 3L, 3L, 3L, 3L, 3L, 
3L, 3L, 3L, 3L, 3L, 3L, 3L, 3L, 3L, 3L, 3L, 3L, 3L, 3L, 3L, 3L, 
3L, 3L, 3L, 3L, 3L, 3L, 3L, 3L, 3L, 3L, 3L, 3L, 3L, 3L, 3L, 3L, 
3L, 3L, 3L, 3L, 3L, 3L, 3L, 3L, 3L, 3L, 3L, 3L, 3L, 3L, 3L, 3L, 
3L, 2L, 2L, 2L, 2L, 2L, 2L, 2L, 2L, 2L, 2L, 2L, 2L, 2L, 2L, 2L, 
2L, 2L, 2L, 2L, 2L, 2L, 2L, 2L, 2L, 2L, 2L, 2L, 2L, 2L, 2L, 2L, 
2L, 2L, 2L, 2L, 2L, 2L, 2L, 2L, 2L, 2L, 2L, 2L, 2L, 2L, 2L, 2L, 
2L, 2L, 2L, 2L, 2L, 2L, 2L, 2L, 2L, 2L, 2L, 2L, 2L, 2L, 6L, 6L, 
6L, 6L, 6L, 6L, 6L, 6L, 6L, 6L, 6L, 6L, 6L, 6L, 6L, 6L, 6L, 6L, 
6L, 6L, 6L, 6L, 6L, 6L, 6L, 6L, 6L, 6L, 6L, 6L, 6L, 6L, 6L, 6L, 
6L, 6L, 6L, 6L, 6L, 6L, 6L, 6L, 6L, 6L, 6L, 6L, 6L, 6L, 6L, 6L, 
6L, 6L, 6L, 6L, 6L, 6L, 6L, 6L, 6L, 6L, 6L, 4L, 4L, 4L, 4L, 4L, 
4L, 4L, 4L, 4L, 4L, 4L, 4L, 4L, 4L, 4L, 4L, 4L, 4L, 4L, 4L, 4L, 
4L, 4L, 4L, 4L, 4L, 4L, 4L, 4L, 4L, 4L, 4L, 4L, 4L, 4L, 4L, 4L, 
4L, 4L, 4L, 4L, 4L, 4L, 4L, 4L, 4L, 4L, 4L, 4L, 4L, 4L, 4L, 4L, 
4L, 4L, 4L, 4L, 4L, 4L, 4L, 4L), levels = c("Barometerindikatorn", 
"\tDetaljhandel", "Bygg & anläggning", "Hushåll", "Tillverkningsindustri", 
"Tjänstesektorn"), class = "factor"), Period = structure(c(17532, 
17563, 17591, 17622, 17652, 17683, 17713, 17744, 17775, 17805, 
17836, 17866, 17897, 17928, 17956, 17987, 18017, 18048, 18078, 
18109, 18140, 18170, 18201, 18231, 18262, 18293, 18322, 18353, 
18383, 18414, 18444, 18475, 18506, 18536, 18567, 18597, 18628, 
18659, 18687, 18718, 18748, 18779, 18809, 18840, 18871, 18901, 
18932, 18962, 18993, 19024, 19052, 19083, 19113, 19144, 19174, 
19205, 19236, 19266, 19297, 19327, 19358, 17532, 17563, 17591, 
17622, 17652, 17683, 17713, 17744, 17775, 17805, 17836, 17866, 
17897, 17928, 17956, 17987, 18017, 18048, 18078, 18109, 18140, 
18170, 18201, 18231, 18262, 18293, 18322, 18353, 18383, 18414, 
18444, 18475, 18506, 18536, 18567, 18597, 18628, 18659, 18687, 
18718, 18748, 18779, 18809, 18840, 18871, 18901, 18932, 18962, 
18993, 19024, 19052, 19083, 19113, 19144, 19174, 19205, 19236, 
19266, 19297, 19327, 19358, 17532, 17563, 17591, 17622, 17652, 
17683, 17713, 17744, 17775, 17805, 17836, 17866, 17897, 17928, 
17956, 17987, 18017, 18048, 18078, 18109, 18140, 18170, 18201, 
18231, 18262, 18293, 18322, 18353, 18383, 18414, 18444, 18475, 
18506, 18536, 18567, 18597, 18628, 18659, 18687, 18718, 18748, 
18779, 18809, 18840, 18871, 18901, 18932, 18962, 18993, 19024, 
19052, 19083, 19113, 19144, 19174, 19205, 19236, 19266, 19297, 
19327, 19358, 17532, 17563, 17591, 17622, 17652, 17683, 17713, 
17744, 17775, 17805, 17836, 17866, 17897, 17928, 17956, 17987, 
18017, 18048, 18078, 18109, 18140, 18170, 18201, 18231, 18262, 
18293, 18322, 18353, 18383, 18414, 18444, 18475, 18506, 18536, 
18567, 18597, 18628, 18659, 18687, 18718, 18748, 18779, 18809, 
18840, 18871, 18901, 18932, 18962, 18993, 19024, 19052, 19083, 
19113, 19144, 19174, 19205, 19236, 19266, 19297, 19327, 19358, 
17532, 17563, 17591, 17622, 17652, 17683, 17713, 17744, 17775, 
17805, 17836, 17866, 17897, 17928, 17956, 17987, 18017, 18048, 
18078, 18109, 18140, 18170, 18201, 18231, 18262, 18293, 18322, 
18353, 18383, 18414, 18444, 18475, 18506, 18536, 18567, 18597, 
18628, 18659, 18687, 18718, 18748, 18779, 18809, 18840, 18871, 
18901, 18932, 18962, 18993, 19024, 19052, 19083, 19113, 19144, 
19174, 19205, 19236, 19266, 19297, 19327, 19358, 17532, 17563, 
17591, 17622, 17652, 17683, 17713, 17744, 17775, 17805, 17836, 
17866, 17897, 17928, 17956, 17987, 18017, 18048, 18078, 18109, 
18140, 18170, 18201, 18231, 18262, 18293, 18322, 18353, 18383, 
18414, 18444, 18475, 18506, 18536, 18567, 18597, 18628, 18659, 
18687, 18718, 18748, 18779, 18809, 18840, 18871, 18901, 18932, 
18962, 18993, 19024, 19052, 19083, 19113, 19144, 19174, 19205, 
19236, 19266, 19297, 19327, 19358), class = "Date"), value = c(108.2, 
108.3, 108.8, 110.1, 109.8, 109.8, 109.5, 110, 109.6, 106.1, 
104.7, 104.8, 100.7, 101.8, 102.4, 104.4, 101.8, 100.4, 98.2, 
95, 93.3, 92.9, 93.7, 93, 95.9, 98.6, 93.4, 60.9, 64.9, 76.4, 
84.4, 87, 93.7, 94.3, 95.8, 95.1, 100.5, 103.7, 105.3, 112.2, 
117.4, 118.1, 120.3, 118.9, 118.6, 120, 117.7, 116.9, 110.9, 
114, 112.2, 110.3, 110.8, 106.1, 102.4, 97.7, 91.8, 85.6, 85.6, 
85, 82.3, 108.8, 109.1, 112.3, 114.8, 114.9, 113.6, 114.5, 116.5, 
112.8, 111.3, 111.6, 112.5, 106.8, 109, 104.9, 107.4, 102.6, 
100.8, 97, 93.6, 94.8, 94.6, 94.2, 93.5, 98.4, 101.3, 99.1, 72.2, 
77.2, 90.4, 95.9, 97.1, 103.9, 103.1, 106.4, 104.6, 111.2, 111.7, 
114.5, 117.2, 121.8, 121.2, 124.4, 124.3, 123.3, 126.2, 124, 
124.8, 120.9, 123.6, 124.3, 120.5, 124.6, 119.5, 118.9, 115.3, 
109.8, 104.8, 104.5, 103.7, 99.5, 111.6, 107, 111.3, 114.1, 107.8, 
107.1, 106.4, 107.1, 106.6, 102.1, 99.9, 101.3, 102.1, 101.6, 
101.9, 102.8, 102.8, 100.9, 102.2, 101.1, 102.5, 102.8, 102.8, 
102.6, 101.4, 100.7, 98.7, 92.7, 88.6, 88.7, 91.7, 93.3, 89.2, 
92.3, 94.2, 96, 95.2, 95.7, 96.8, 101.3, 107.2, 108.9, 106.1, 
107.5, 109.7, 110.1, 108.5, 107, 108.9, 108, 107.1, 108, 105.6, 
106.6, 106.9, 107.4, 105.2, 102.7, 101.5, 101.2, 96.1, 103.8, 
105.9, 104.5, 101.6, 103.4, 105.3, 98, 102, 103.8, 101.1, 101.6, 
100.9, 99.5, 98.6, 98.3, 104.2, 106.6, 102.2, 101.2, 101.7, 101.1, 
101.2, 104.2, 107.8, 107.7, 109.5, 104.4, 73.7, 77.1, 85, 94.2, 
97.6, 102, 105.1, 96.3, 96.8, 96.6, 98.4, 96.5, 111, 108.2, 113, 
116.7, 109.2, 113.7, 116.9, 116.8, 112.8, 103.4, 119.2, 111.1, 
109.5, 110.3, 102.8, 92.2, 91.2, 82.1, 76.2, 76.7, 75.1, 78.6, 
104.5, 105.6, 103.5, 103.6, 103.3, 105.8, 104.9, 101.7, 104.5, 
101, 98.2, 98.4, 95.9, 96.3, 101.1, 101.5, 101.8, 101.1, 98.6, 
97, 92.9, 90.8, 93.2, 91.7, 93.4, 94.2, 88.2, 52.3, 55.1, 63.8, 
74.2, 79.2, 86.1, 86.5, 88, 86.7, 91, 96.7, 96.9, 106, 109.1, 
112.3, 114, 111.5, 111.2, 112.5, 111.4, 110, 104.2, 107.4, 109.1, 
109.6, 108.5, 105.9, 103.7, 97.1, 94.4, 88.5, 86, 87.5, 85.8, 
106, 104.7, 103.1, 102.9, 103.3, 101.3, 101.8, 104.1, 104.9, 
100.8, 99.9, 97.6, 96.3, 96.4, 99.1, 100.1, 97.6, 98.2, 100.9, 
97.2, 94.2, 96.4, 96.1, 96.2, 96, 99.7, 94.1, 81.4, 83.7, 88.6, 
90.3, 89.7, 92.3, 94.1, 92.7, 94.9, 97, 99.4, 100.4, 104.2, 110.4, 
107.7, 107.6, 107.5, 107.2, 104, 101, 99.5, 93.8, 92.7, 82.1, 
81.3, 77.1, 73.7, 64.9, 64.1, 57.2, 53.6, 58.6, 55.4, 56.3)), row.names = c(NA, 
-366L), class = "data.frame")

EDIT2:

Wow, awesome - thanks Sam! This works although my chart get's very small in my preview:

What's going on? I've tried to understand this margin list you fetch (in plotly), but don't really understand it, it's moving the chart (in pixels) based on some position that you also can change? What does the pad indicate?

I didn't know I cut of the series but not using the coord_cartesian, great to know. Since my series is all the way back to 1996, date still overlap - there's no way to get some autoscaling get going? Else I'll have to shorten the serie, maybe to 2018 as the data you got, or 2020. Being able to go more than 12m back is just a nice feature - it's not required.

Thanks again!

This sounds possible but it's hard to advise with a [reproducible example](https://stackoverflow.com/questions/5963269/how-to-make-a-great-r-reproducible-example). Can you post some minimal sample data, code to create a `ggplot2` plot, and then the code you are using to create the `plotly` object? — SamR, Feb 23 '23 at 11:56
Great, I tried pulling together what you asked for in EDIT1 in original post. =) — Christian, Feb 23 '23 at 12:10

SamR · Accepted Answer · 2023-02-23T12:36:56.180

1

You have two problems. Your main one is that you are actually cutting off the parts of the plot you are interested in when you set your axis limits. You should use coord_cartesian():

The Cartesian coordinate system... will not change the underlying data like setting limits on a scale will.

df_konj_dia <- ggplot(df_konj, aes(x = Period, y = value, group=Indikator, color=Indikator, 
                    linetype=Indikator, linewidth = Indikator)) +
  geom_point(size=2) + 
  geom_line() +
  coord_cartesian(x=(c(mindate, maxdate)), y = c(50, 150))

Secondly you need to supply plotly with axis breaks and labels. Otherwise, when you scroll backwards in time, you will not see any axis labels. You can create them like this:

x_axis_breaks  <- seq(
            from = min(df_konj$Period), 
            to = max(df_konj$Period),
            by = "6 months"
        )   

tickvals  <- as.integer(x_axis_breaks)
ticktext  <- format(x_axis_breaks, "%Y-%m")

Then supply them to plotly as follows (I've also changed the margins as they overlapped):

df_konj_plotly <- ggplotly(df_konj_dia, tooltip = c("x","y","colour")) %>%
  layout(title = list(text = paste0('Konjunkturbarometern - månadsbarometern, flera indikatorer',
                                    '<br>',
                                    '<sup>',
                                    'Sverige, säsongsrensat','</sup>')),
        legend = list(x = 100, y = 0.5),
      xaxis = list(
        rangeslider = list(visible = T),
        ticktext = ticktext,
        tickvals = tickvals,
        tickmode = "array"
    ),
    autosize = F, margin = list(
  l = 50,
  r = 20,
  b = 20,
  t = 100,
  pad = 4
)
)

This will allow you to move your window backwards in time and still see date labels on the x-axis:

edited Feb 23 '23 at 12:36

answered Feb 23 '23 at 12:29

SamR

8,826
3
11
33

Many thanks Sam! See my reply in **EDIT2** in original post. – Christian Feb 23 '23 at 13:03
1

Great glad it helped. I don't use Rstudio so not exactly sure what's happening but you can read about the margins [here](https://plotly.com/r/setting-graph-size/). I would just play around with the different values until you get what you want - or even remove the margins list if there was no problem initially. What exactly is overlapping with dates? If it's the labels you can space them more, e.g. change `by = "6 months"` to `by = "1 year"`. In terms of automatically labelling the dates, you could try removing that part and see if it does, but for me on `plotly 4.10.1` it does not. – SamR Feb 23 '23 at 13:07
1

Actually [this](https://plotly.com/r/reference/layout/#layout-margin) is a better reference for the meaning of the `pad` parameter. – SamR Feb 23 '23 at 13:11
That first site to refered to I've been visiting, but I don't think it explain anything except saying that there's some parameters here to play around with xD. Just setting autosize = T, filled the preview as wanted. Exactly labels are overlapping. Removing it, I get same as you, it shows date for the x-axis as specified in the ggplot, but nothing else - moving backwards in time generates to x-axis labels. Anyway I might settle with cutting the series at 2018 or 2020 because then no issue. Having yrs probably won't help if from 1996. – Christian Feb 23 '23 at 13:19
The second is better, but they should have had pictures - since English isn't my native language I don't understand every wording. Anyways this will suffice for now, thanks. If someone in the future get some auto-scaling going - let me know! – Christian Feb 23 '23 at 13:22
1

I'll keep an eye on it - autoscaling is great in in `plotly` when it works but when it doesn't it's a pain. With date labels, you could have them further apart if further back in time, e.g. `breaks_one <- seq(from = as.Date("1996-01-01"), to = date_cutoff, by = "3 years"); breaks_two <- seq(from = date_cutoff, to = max(df_konj$Period), by = "1 year"); x_axis_breaks <- c(breaks_one, breaks_two)` – SamR Feb 23 '23 at 13:27
1

Awesome, that's useful. I used that from 2018, with 1yrs, 6 months and 3 months as steps. – Christian Feb 23 '23 at 14:01

Plotly - change range of x-axis (date)

1 Answers1