Python Dash standalone HTML file same as Plotly

Viewed 3539

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 Answers

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.

Related