R multiple y axis interactive plot - r

Question

I am trying to create a plot in R similar to this:
with up to 6 variables and it has to be reactive.
I tried plotly, however in plotly I would get axis ticks on the plot, and it gets messy, and I managed to get only one y axis out.
Is there a way to recreate the plot in plotly or any other interactive library?
My plotly code:
library(dplyr)
library(plotly)
library(tidyr)
data <- cbind(
seq(from = 1, to = 30, by = 1),
sample(seq(from = 100, to = 300, by = 10), size = 30, replace = TRUE),
sample(seq(from = 1, to = 100, by = 9), size = 30, replace = TRUE),
sample(seq(from = 50, to = 60, by = 2), size = 30, replace = TRUE),
sample(seq(from = 100, to = 130, by = 1), size = 30, replace = TRUE)
) %>%
as.data.frame()
names(data) <- c("date", "a", "b", "x", "y")
plot_ly(x = ~data$date) %>%
add_lines(y = ~data[, 2], name = "a", line = list(color = "red")) %>%
add_lines(y = ~data[, 3], name = "b", line = list(color = "blue"), yaxis = "y2") %>%
add_lines(y = ~data[, 4], name = "x", line = list(color = "green"), yaxis = "y3") %>%
add_lines(y = ~data[, 5], name = "y", line = list(color = "pink"), yaxis = "y4") %>%
layout(
yaxis = list(
side = "left",
title = list("")
),
yaxis2 = list(
side = "left",
overlaying = "y",
anchor = "free"
),
yaxis3 = list(
side = "left",
overlaying = "y",
anchor = "free",
position = 0.04
),
yaxis4 = list(
side = "left",
overlaying = "y",
anchor = "free",
position = 0.08
),
margin = list(pad = 30)
)

Answer 1

With the highcharter package one can generate nice time series plots with multiple y-axes:
library(highcharter)
set.seed(1)
n <- 100
x1 <- cumsum(rnorm(n))
x2 <- cumsum(runif(n)-0.5)+10
x3 <- cumsum(rnorm(n,0,20))+100
x4 <- cumsum(rnorm(n,0,20))+1000
highchart() %>%
hc_add_series(data = x1) %>%
hc_add_series(data = x2, yAxis = 1) %>%
hc_add_series(data = x3, yAxis = 2) %>%
hc_add_series(data = x4, yAxis = 3) %>%
hc_yAxis_multiples(
list(lineWidth = 3, lineColor='#7cb5ec', title=list(text="First y-axis")),
list(lineWidth = 3, lineColor="#434348", title=list(text="Second y-axis")),
list(lineWidth = 3, lineColor="#90ed7d", title=list(text="Third y-axis")),
list(lineWidth = 3, lineColor="#f7a35c", title=list(text="Fourth y-axis"))
)

Answer 2

I just tweaked your code. Hope this helps!
plot_ly(x = ~data$date) %>%
add_lines(y = ~data[, 2], name = "a", line = list(color = "red")) %>%
add_lines(y = ~data[, 3], name = "b", line = list(color = "blue"), yaxis = "y2") %>%
add_lines(y = ~data[, 4], name = "x", line = list(color = "green"), yaxis = "y3") %>%
add_lines(y = ~data[, 5], name = "y", line = list(color = "pink"), yaxis = "y4") %>%
layout(
yaxis = list(
side = "left",
color="red",
title = ""
),
yaxis2 = list(
overlaying = "y",
anchor = "free",
color="blue",
title= ""
),
yaxis3 = list(
side = "right",
overlaying = "y",
color="green",
title= ""
),
yaxis4 = list(
side = "right",
overlaying = "y",
anchor = "free",
position = 1,
color="pink",
title= ""
),
xaxis = list(
title = ""
),
margin = list(pad = 25)
)

Answer 3

To add to and modify #Prem's answer, you can avoid overlap of the y-axes with the graph itself by tweaking the x-axis portion of the plot with the domain parameter of the x-axis.
plot_ly(data, x = ~time, type = 'scatter', mode = 'lines') %>%
add_lines(y = ~y1, name='y1', line = list(color = "red")) %>%
add_lines(y = ~y2, name='y2', yaxis='y2', line = list(color = "orange")) %>%
add_lines(y = ~y3, name='y3', yaxis='y3', line = list(color = "darkgreen")) %>%
add_lines(y = ~y4, name='y4', yaxis='y4', line = list(color = "purple")) %>%
add_lines(y = ~y5, name='y5', yaxis='y5', line = list(color = "brown")) %>%
layout(
xaxis = list(title = "time", domain = c(0.5,1)),
yaxis = list(title = 'Y-axis 1', side = "left", color = "red", position = 0,
anchor = 'free'),
yaxis2 = list(title = 'Y-axis 2', side = "left", color = "orange",
overlaying = "y", anchor = 'free', position = 0.1),
yaxis3 = list(title = 'Y-axis 3', side = "left",
overlaying = "y", anchor = 'free', color = "darkgreen", position = 0.2),
yaxis4 = list(title = 'Y-axis 4', side = "left",
overlaying = "y", anchor = 'free', color = "purple", position = 0.3),
yaxis5 = list(title = 'Y-axis 5',side = "left",
overlaying = "y", anchor = 'free', color = "brown", position = 0.4),
showlegend = T
)
The position of the single y-axes with respect to the plot size in percent can be set with the position parameter.
In the above example, each y-axis gets 10% of the total plot size while the graph is reserved for the right half.