Python Dash standalone HTML file same as Plotly
Asked Answered
S

3

7

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.

Stanfordstang answered 4/1, 2021 at 11:8 Comment(5)
you can't produce standalone HTML. Dash doesn't put data and plots directly in HTML. It puts only JavaScript code which later read layout, data and plots from server.Stupendous
It must be possible, the most complicated component is the plot and I am already saving it as a standalone HTML. The rest is just some static text with the plot embedded.Stanfordstang
but dash doesn't use it as in normal plotly. It sends only JavaScript code to browser - and this code sends request to server for data - layout as JSON data - and it use it to generate page. You would have to remove all JavaScript and put all code with data - so you would have to rewrite all from scratch.Stupendous
You could 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.Amalle
not sure if anyone still looking for the answer, but I have the same question and it was answered by this gentleman. <#75303801> and also Plotly Dash has the page document the download function <dash.plotly.com/dash-core-components/download>Shiner
H
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.

Hymie answered 10/2, 2022 at 21:41 Comment(0)
M
0

You may consider instead to distribute a full Desktop app. Facing a similar problem, I've recently created a boilerplate repository for this. It's available here: https://github.com/Ivorforce/Dash-Standalone-Boilerplate

Malonis answered 2/7, 2024 at 14:58 Comment(0)

© 2022 - 2025 — McMap. All rights reserved.