Ask Your Question
3

How can I make a Plotly chart in a Dash app that takes up the entire screen?

asked 2023-05-04 16:40:05 +0000

lakamha gravatar image

edit retag flag offensive close merge delete

1 Answer

Sort by ยป oldest newest most voted
1

answered 2023-05-04 16:59:02 +0000

nofretete gravatar image

To make a Plotly chart in a Dash app that takes up the entire screen, you can set the width and height attributes of the dcc.Graph component to the viewport width and height.

Here's an example code snippet:

import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Output, Input
import plotly_express as px

app = dash.Dash(__name__)

# Create data for the chart
df = px.data.gapminder()
fig = px.scatter(df, x="gdpPercap", y="lifeExp", color="continent",
                 hover_name="country", log_x=True, size_max=60)

# Define the layout of the app
app.layout = html.Div([
    dcc.Graph(
        id='example-graph',
        figure=fig,
        style={'width': '100vw', 'height': '100vh'} # Set width and height to viewport width and height
    )
])

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

In this example, the style attribute of the dcc.Graph component is set to {'width': '100vw', 'height': '100vh'} which sets the width and height of the chart to the full viewport width and height. This will make the chart take up the entire screen.

edit flag offensive delete link more

Your Answer

Please start posting anonymously - your entry will be published after you log in or create a new account. This space is reserved only for answers. If you would like to engage in a discussion, please instead post a comment under the question or an answer that you would like to discuss

Add Answer


Question Tools

Stats

Asked: 2023-05-04 16:40:05 +0000

Seen: 16 times

Last updated: May 04 '23