Enhance your dashboard layout by combining visualizations with textual elements like headers and author credits. Learn how to structure multiple components within a parent div using Python and Dash for a more informative and organized interface.
Key Insights
- Instead of passing a single component, you can pass a list of elements—such as an H1 heading, a paragraph tag, and a graph—to the Dash HTML.Div to create a structured dashboard layout.
- The example demonstrates placing a title and author credit above a pie chart, showing how multiple HTML components can be nested within a single container for cohesive presentation.
- Noble Desktop’s training illustrates how Dash components like HTML.H1, HTML.P, and Plotly charts can be dynamically arranged to form a flexible and scalable web dashboard interface.
This lesson is a preview from our Data Analytics Certificate Online (includes software). Enroll in this course for detailed lessons, live instructor support, and project-based training.
Let's start composing by adding some text to our dashboard. So not just a graph, but also some text above it. Right now, our div that we're looking at here, this right here, rather that right there, that only has one child, our graph, our pie chart.
But we can add more. Instead of passing in one thing to div, we can pass in a list. So I'm going to open up a list in here, and then I'm going to hit return, because I'm going to have several things.
I also like to add a little extra white space around a list, around anything vertical like this. So the first thing we'll pass in, let's pass in our graph, pie graph. And above that, let's pass in an HTML H1.
We'll call HTML.H1, it'll give us back an H1 value. And let's title this whole dashboard, visualizing stock prices, seems fine. This is a list, so we need a comma after every element.
This is one element, whatever, calling HTML H1 gives us another element, the pie graph. Now, under this H1, let's add a little paragraph that'll be like the author name. HTML.P, and by, and put your name in there.
That's my name. Don't put that, you're not me, that's weird, don't do that. Why would you do that? So you're not doing it, is the answer.
Put your own name in there. So we've got this H1 heading, and this paragraph, and the pie graph. All three of them.
And notice that these two are not in variables. We could have put them in variables like we did pie graph. We can just directly call the function HTML.H1, and whatever it gives us back, that will go as the first item in the list.
And whatever this is will go as the second item, and the pie graph goes the third. And they'll all be children of the div. Let's see that at work.
Visualizing Stock Prices, Big Heading, by Colin Jaffe. Now, if we inspect this, we're going to see that we have our overall div, and then we have a div that's the div we made, the HTML.Div. This right here, when we call HTML.Div. We pass it a list, this big list, of three items. The H1, the P, and the pie graph.
So, sure enough, this div has three children. The H1, the P, and the pie graph. Which is its own little div with a whole lot of stuff in it, run by Plotly.
But we have these three elements, and they're all inside our overall div. They are children of our div. Opening div tag, H1 with its own child, the text, P with its own child, that text, and another div with a chart inside it.
And then finally, we close this div with the little slash div, and that closes that div. So, this maps very well from our Python list inside our call to HTML.Div. It maps very well from div with a list inside it to HTML.Div with three elements inside it. It's a very good way for them to organize this.
And we can even make divs within here with their own children, if we want. We have really an amazing amount of flexibility to compose different parts of our app together. All right, so we've got some multiple things going on now.
Some text and a visualization. Next, we'll add a whole other visualization.