Python Dash standalone HTML file same as Plotly

Question

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:

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.

Answer 1

It is not currently possible to save plotly dash into an html file.

https://community.plotly.com/t/export-html-of-dash-app/26754/2

https://community.plotly.com/t/feature-request-html-embedded-layout-and-dependency-lookup-for-standalone-html-dash-reports/49149

Answer 2

The subject is old but I was looking for the same question for making a html file with clickable dashtable.

For standalone plotly figure with static text, you could have a look at jupyter notebook. notebook can be convert to standalone html file while keeping interactive plot.

Answer 3

I propose to render the HTML output to PDF and share the PDF file. Create a print media stylesheet or something similar to control the layout and then print to PDF using tools such as Playwright.