How to Embed Individual Dash Components into Multiple Django Template Sections Using django-plotly-dash?

Dash Python
1

Hello everyone,

I’m currently building a dashboard using Django and Plotly Dash, and I’m using the django-plotly-dash package to embed my Dash apps into my Django templates. The challenge I’m facing is how to embed individual components (such as specific charts or text elements) of a single Dash app into multiple sections of a Django template, without having to create multiple Dash apps.

What I’ve Tried:

  1. Single Dash App: I’ve created a single Dash app with multiple components (e.g., a bar chart, a pie chart, and some text), structured using html.Div() elements inside the Dash app layout.

  2. Embedding in Django Template: I want to embed each of these components (e.g., the title, the bar chart, and the pie chart) into different cards in my Django template. So far, I can embed the entire Dash app into one card using {% plotly_app %}, but when I try to embed the same app in multiple places, it simply renders the entire Dash app in each placeholder. This results in the same content (entire Dash app) being rendered in both placeholders. I want the bar chart to show in the first placeholder and the pie chart in the second, but since it’s embedding the entire app, I’m unable to control which component shows up where.

I’ve considered just using multiple apps for each card, but the dashboard will have a lot of visualizations and I’d rather not have to build a whole different dash app for each.

I’ve also considered embedding the whole app in each card and using the class names and clever CSS to hide components but that seems “hacky” and not efficient.

Any suggestions, workarounds, or best practices for achieving this would be greatly appreciated! Thanks in advance!

2

Create a new Dash app. This can be in a separate Python file or a Django app. For example, create a file called dash_app.py in one of your Django apps:

myapp/dash_app.py

import dash
from dash import dcc, html
from django_plotly_dash import DjangoDash

app = DjangoDash(‘MyDashApp’) # The name of your Dash app

app.layout = html.Div([
html.H1(“My Dash Component”),
dcc.Graph(id=‘example-graph’,
figure={
‘data’: [
{‘x’: [1, 2, 3], ‘y’: [4, 5, 6], ‘type’: ‘bar’, ‘name’: ‘Example’},
],
‘layout’: {
‘title’: ‘Sample Graph’
}
})
])

3

Hey! Thanks for responding!

I’ve gotten that far. The question is if I have multiple graphs in the dash app, how do I put each graph in a different div within the django template. For instance:

Dash App (pseudo code):

app = DjangoDash('ExampleDashApp')

app.layout = html.Div([
html.H1("Example Dash App"),
dcc.Graph(id='graph-1', figure={'data':[]}),
dcc.Graph(id='graph-2', figure={'data':[]}),
])

Django HTML Template:

{% load plotly_dash %}
<!DOCTYPE html>
<body>
<div class"graph-1">
{% plotyly_app 'ExampleDashApp' %} {% comment %} This should be graph-1 {% endcomment%}
</div>
<div class"graph-2">
{% plotyly_app 'ExampleDashApp' %} {% comment %} This should be graph-2 {% endcomment%}
</div>

In this pseudo code example, in each div it will load in both graphs. I don’t really know if this is even possible, but it would give tremendous styling control.

4

I found that using multiple Dash apps turned out to be the best solution for my specific use case. Since each visualization in my dashboard involves heavy data processing, the individual Dash apps are beefy and resource-intensive. By breaking them into separate apps, I was able to avoid creating a single massive file, which would have been difficult to manage. Additionally, this approach has improved separation of concerns, making both testing and troubleshooting more efficient and streamlined.

That being said, I would still love to know if it is at all possible to display components of a dash apps in separate django template divs. Thanks!

5

@wesordonez Dash is based on React, so the html subtree for each app comes just from that app. Instantiating one app in multiple pieces is unfortunately at the very least extremely challenging, and I suspect effectively impossible. This means that the two possible approaches boil down to (a) multiple distinct apps on one page or (b) one app for the whole page.

Which of these works best for any particular situation really boils down to how the state of the (dash) app needs to be propagated. Dash really wants to keep state local to each app within the browser - its one of the most useful parts of its architecture - and Django provides the counterpoint of per user/session across the whole view.

If you want the graphs to share some common varying input - say choice of a date range in some part of the page impacting the axes on two graphs elsewhere on the same page - then life is a lot easier if you present things inside a single app. On the other hand, if you don’t have this interaction between pieces, or it is very limited and can be handled with something like a websocket pipe, then multiple apps could well be an easier way to manage the separate parts and also allow you more freedom when constructing the rest of the view.

This is not an uncommon problem - right now, we’re looking at two extensions to django-plotly-dash to help with both of these use cases; firstly a means to communicate between different app instances, and secondly an additional Dash component to permit the embedding of generated content, such as a view or subview using Django templates, within a Dash app. This work is at an early stage but if you want to discuss further please message me.

1 Like