Standalone HTML file with static plots and text

Dash Python
1

I usually do plots with Plotly and save them as standalone HTML files, which is extremely convenient for sharing them with colleagues and to “freeze” the data that is being displayed. This is an example I made with

plotly.offline.plot(
    plotly_plot, 
    filename = 'standalone great plot.html',
)

Now I want to do the same with a very simple Dash app that has no server-side requirements at all, it is just a bunch of Plotly figures and some text. How can I do this?

Example of what I want

Consider the first example that is shown in this tutorial, which I copy-paste here for easiness:

# -*- coding: utf-8 -*-

# Run this app with `python app.py` and
# visit http://127.0.0.1:8050/ in your web browser.

import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.express as px
import pandas as pd

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

# assume you have a "long-form" data frame
# see https://plotly.com/python/px-arguments/ for more options
df = pd.DataFrame({
    "Fruit": ["Apples", "Oranges", "Bananas", "Apples", "Oranges", "Bananas"],
    "Amount": [4, 1, 2, 2, 4, 5],
    "City": ["SF", "SF", "SF", "Montreal", "Montreal", "Montreal"]
})

fig = px.bar(df, x="Fruit", y="Amount", color="City", barmode="group")

app.layout = html.Div(children=[
    html.H1(children='Hello Dash'),

    html.Div(children='''
        Dash: A web application framework for Python.
    '''),

    dcc.Graph(
        id='example-graph',
        figure=fig
    )
])

if __name__ == '__main__':
    app.run_server(debug=True)

When I run this with Python and then open http://127.0.0.1:8050/ in my browser I see this:

enter image description here

so as can be seen this is basically a single Plotly figure with some text. So it must be somehow possible to produce the standalone HTML file with this content.

I want to replicate the behavior of plotly.offline.plot with this. How can I do it? I have tried to do “File → Save Page As” in my web browser but the resulting HTML fails to display because the server (the Python app.py file) is not running.

2

Currently, when the dash client comes up, one of the first things it does is to fetch the application definition and then the component wiring (aka dependencies) from the server. There’s no way around this. I’ve proposed that the client look locally first for this content and then hit the server thus enabling exactly your desired capability to embed it all into one file (kinda). Here’s my proposal: