10

I want to have multiple plotly plots on 1 html page without using the tools.make_subplots method. (I dont want to use that since I find that its not easy to read and I want a unique legend & layout in each of the subplot panels).

I want to define 2 figures with their own unique layouts, and arrange them arbitrarily on the page. I think I know how to do this with dash using the html.Div object, but I was wondering if there was an easy way to do this using only plotly?

DankMasterDan
  • 1,900
  • 4
  • 23
  • 35
  • These sounds kind of confusing. If you want two charts to show up, use two separate dcc.Graph(). You can put them in their own html.Div boxes but don't have too. It may be easier to move them around the screen if you do that. If you want to make sure they have live updates than give them both and "ID" element like dcc.Graph(id='chart1'). then in the call back you can refer right to it. Perhaps define a little more or provide an example? – lwileczek Feb 09 '18 at 18:07

2 Answers2

12

I encountered the very same problem and followed the solution posted here: Plotly: Plot multiple figures as subplots by Esostack

However, when I dumped the html of multiple figures into a single text file, I found the file size increasing by 5MB per figure that I add. 99.9% of this is caused by java script stuff that is added by plotly to make the plots interactive. Luckily, they also implemented a parameter to specify if you want to include the js or not. So you need to include it only for the first figure and skip it for the rest, like it is done in the following function. Hope that helps:

def figures_to_html(figs, filename):
    '''Saves a list of plotly figures in an html file.

    Parameters
    ----------
    figs : list[plotly.graph_objects.Figure]
        List of plotly figures to be saved.

    filename : str
        File name to save in.

    '''
    import plotly.offline as pyo

    dashboard = open(filename, 'w')
    dashboard.write("<html><head></head><body>" + "\n")

    add_js = True
    for fig in figs:

        inner_html = pyo.plot(
            fig, include_plotlyjs=add_js, output_type='div'
        )

        dashboard.write(inner_html)
        add_js = False

    dashboard.write("</body></html>" + "\n")
ttekampe
  • 171
  • 1
  • 5
0

So, in conclusion, I have not found a way to do this purely with plotly. Below is my code for doing this with Dash, which has been working quite well:

Step 1: make a few plotly plots

import plotly.offline as pyo
import plotly.graph_objs as go
import plotly as py
fig1 = go.Scatter(y=[1,2,3])
fig2 = go.Scatter(y=[3,2,1])
plots = [fig1, fig2]

Step 2: Make dash Div objects:

app = dash.Dash()
layout = html.Div(
        [html.Div(plots[i]) for i in range(len(plots))],
        style = {'margin-right': '0px'}
    )

Step 3: Run dash

app.layout = layout
app.run_server(port=8052)
DankMasterDan
  • 1,900
  • 4
  • 23
  • 35
  • 3
    Where do you get the variable col_style from? I came to the same conclusion and it's a lot cleaner to write and less lines to plot but I would like them to scale the y-axis the same. And dynamically in response to the callbacks, data selections etc. Have you found a way to do that? – grofte Jul 18 '19 at 11:08
  • getting an error "'col_style' is not defined" May I know why – Hari Jun 29 '21 at 11:04