PlotlyJS: subplots and individual layouts

[VivMendes]

Hi,
I am stuck with an apparently simple problem. I am using PlotlyJS v0.18.8, Julia 1.8.1. I have some time series. If I plot each one separately, I have no problem: all layout attributes are fully displayed. For example, the following code will produce the plot below:

function gov()
    trace10_1 = scatter(;x = Date.(period10_1), y = GDP_shares[213:302,4], 
		name = "G/GDP", line_color = "DarkRed", mode = "markers+lines", 
		marker_size = 6, marker_symbol = "circle", line_width = 0.3)

    layout10_1 = Layout(;
			shapes = shape10_1,
			title_text = "Government as % GDP", 
			title_x = 0.5,
			hovermode = "x",
        		yaxis_title = "% points",
        		#yaxis_range=[17.2, 21.5], 
        		titlefont_size = 16)

    fig10_1 = plot(trace10_1, layout10_1)
end
gov()

However, when I use the PlotlyJS syntax to produce subplots, some of the individual layout attributes passed to the plot will be lost. For example, it preserves the correct title, but the hovermode="x" and shapes are gone. The following code, and its associated plot (below), show this problem very clearly:

fig10_5 = [gov() invest()]

If I try to force the inclusion of those two layout attributes by using the relayout! functionality, I succeed with the hovermode="x", but fail concerning shapes. I do not know why hovermode="x" appears now in both subplots, while shapes is only inserted in the first subplot. Code and plot below:

fig10_5 = [gov() invest()]
relayout!(fig10_5, Layout(hovermode="x", shapes = shape10_1))
fig10_5

The funny part is that I need those shapes on multiple subplots.

Any help will be very much appreciated. Thanks.

[VivMendes]

The problem in my previous entry was not reproducible. It was entirely dependent on my data.

Below I present an MWE that can be easily reproducible.

1 - Defining shapes (two rectangles):

shapes1 = rect([5, 25], [10, 30],
                0, 1; fillcolor = "red", opacity = 0.1, line_width = 0,
                xref="x", yref = "paper");

2 - Producing the two individual plots:

function noise1()
    trace1 = scatter(;x=1:40, y=randn(40), name = "some")
    layout1 = Layout(;
	    shapes = shapes1,
	    title_text = "Some noise", 
	    title_x = 0.5,
	    hovermode = "x",
        titlefont_size = 16)
    fig1 = plot(trace1, layout1)
end
noise1()

function noise2()
    trace2 = scatter(;x=1:40, y=rand(40), name = "more")
    layout2 = Layout(;
		shapes = shapes1,
		title_text = "More noise", 
		title_x = 0.5,
		hovermode = "x",
        titlefont_size = 16)
   fig2 = plot(trace2, layout2)
end
noise2()

3 - Creating the subplots

fig3= [noise1() noise2()]
relayout!(fig3, Layout(; hovermode="x", shapes = shapes1))
fig3

The strange problem: why do shapes only appear in the first subplot? How can I force them to be in the second plot as well?
Thanks

[empet]

@VivMendes
It seems that you are defining subplots using the obsolete style (used in versions <1.8).
Here is the code using the methods make_subplots, and add_vrect!:

using PlotlyJS
fig= make_subplots(rows=1, cols=2, subplot_titles=["Some noise" "More noise"])
add_trace!(fig, scatter(;x=1:40, y=rand(40), name = "some"),  row=1, col=1)
add_trace!(fig, scatter(;x=1:40, y=rand(40), name = "more"), row=1, col=2)
relayout!(fig, hovermode="x")
add_vrect!(fig,  5, 10,  fillcolor = "red", opacity = 0.2, line_width = 0; row=1, col=1)
add_vrect!(fig,  20, 26,  fillcolor = "blue", opacity = 0.2, line_width = 0; row=1, col=2) 
display(fig)

For details search:

?make_subplots
?add_vrect!

LE: to add x-title for each subplot insert in relayout! the two corresponding kwargs and their values:

relayout!(fig, hovermode="x", xaxis_title="first x-title", xaxis2_title="second x-title")

[VivMendes]

@empet, thank you so much. Not only it works, but it is also much more intuitive than my version.

Yes, this is an old Pluto notebook I have to use again this year. My code did not work in the past, but I have decided not to let it go this time. You solved the problem.

As far as the official documentation is concerned, thanks to you, I have now realized that one thing is the version still available on the PlotlyJS website here, and the other is the one available on GitHub here. Gosh, such a fantastic package, but maintenance seems to be complicated.

Thanks a lot.