Plotly subplots using fig objects instead of traces

Hi,

I have two plotly figures, one with two traces on a time series, and the other one is a scatter plot.

If I want to put them side by side, can I use subplots to do it? But I use the actual figure objects, not the individual traces.

2 Likes

Hey @dfernan

Have you seen Plotly’s subplot docs https://plot.ly/python/subplots/

Thanks.

Yes, it’s at the trace level, but no subplots can be done at the figure level.

I think generally it’s better to have better compartmentalization between the different figures. I’d want to create each figure separately, specially when working with very different figure types, each with it’s own complexities (legends, primary and secondary axis, etc.) and then the subplot by figure would be as easy as subfigs([fig1, fig2, fig3, fig4], rows=2, cols=2) or something like that. This would also allow for their own layouts, titles, etc. I think it has some advantages to it.

These are just suggestions, not sure how to do this yet.

I found this on the community forum so i guess it’s not really doable yet:

1 Like

@dfernan
With Plotly 3.0.0+ you can create what you call subplots of figures. Namely, you define the figures as instances of go.FigureWidget().
If you have two such figures, fw1, fw2, define

fig_subplots=  HBox([fw1, fw2])
fig_subplots #this line displays the subplots in the Jupyter Notebook

To set the horizontal space between figures just update their margins:

fw1.layout.update(margin=dict( r=20))
fw2.layout.update(margin=dict( l=30))

If you have 3 or more figures you can locate them by a combination of VBox and HBox, imported from ipywidgets:

dashboard1=VBox([HBox([fw1, fw2]), HBox([fw3])])
dashboard1

7 Likes

this is great, just updated my plotly version, important changes.

1 Like

Hi I read through this post as I am trying to follow how to show multiple figures (“figs”). I am trying to show my multiple figs in a webpage via cmd.

I can “fig.show()” the individuals figs…

but then I try:

import plotly
import plotly.graph_objs as go
import ipywidgets as ipw
fig_subplots - ipw.HBox([fig1, fig2])
fig_subplots.show()

I get an error that says:

AttributeError: ‘HBox’ object has no attribute ‘show’

how can I show the HBox in the webpage?

Can anyone help?

THANK YOU!

@sergenyc1

Unfortunately, figurewidgets can be displayed only in a Jupyter Notebook…

thank you very much for getting back to me. Is there another way with any Plotly tool to show multiple charts and tables in a webpage that you know of? Thank you very much again

Try Dash! You can put each graph object in its own HTML element.

How to use categorical column in color in plotly graph objects ?

Does this work in jupyterlab? I’m unable to get hbox to render in jupyterlab
image

if I try .show() I get ‘HBox’ object has no attribute ‘show’

Looks like I was missing the Jupyterlab plotly plugins.

Hi
Any idea why these images don’t look the same size?

import ipywidgets as ipw
from plotly import express as px
import numpy as np
import plotly.graph_objects as go

fig = px.imshow(np.random.rand(3,3))
fig.update_layout(coloraxis_showscale=False)
fig.update_xaxes(showticklabels=False)
fig.update_yaxes(showticklabels=False)
fig = go.FigureWidget(fig)
ipw.HBox([fig, fig, fig])

What is the problem with the following solution?

from plotly.subplots import make_subplots
import plotly.graph_objects as go

fig = make_subplots(rows=2, cols=1)

fig.add_trace(fig1.data[0], row=1, col=1)

fig.add_trace(fig2.data[0], row=2, col=1)

fig.update_layout(height=600, width=800, title_text="Panel layout")
fig.show()

that you are getting the traces of the original figures and not the whole figure

It’s automatic rescaling because of window size, which does not treat all the elements within the HBox equally. You’ll need to set the box sizes firm not to see this I’d guess.

@z3h another problem that I have is that, in my figures I have more than 1 line, so simply passing in fig1.data[0] isn’t enough because I want fig1.data[1] to be included as well, and passing in fig1.data gives and error which I don’t have to investigate right now but if anyone can educate me that would be great.

Could you fork javascript into essentially two asynchronous executables and pass “fig1” to one executable and “fig2” to the other?