Skip to main content
Colin Jaffe/3 min read

Creating Interactive Pie Charts with Plotly Express in Dash

Plotly Express Pie Chart

1

Import

import plotly.express as px.

2

px.pie()

px.pie(df, values='amount', names='category').

3

Customize

Pass color_discrete_sequence, hole=0.4 for donut.

4

Show or Embed in Dash

fig.show() in Jupyter, or wrap in dcc.Graph for Dash.

Master Python at Noble Desktop

Noble Desktop's Python Programming Immersive covers AI APIs, data analysis, and modern Python development.

This lesson is a preview from our Data Science & AI Certificate Online (includes software) and Python Certification Online (includes software & exam). Enroll in a course for detailed lessons, live instructor support, and project-based training.

Now, if you remember from last time, this h1 is what actually puts out our dash message here. Hello, dash. We're going to put a graph there instead.

Now, if you remember from last time, this h1 is what actually puts out our dash message here. Hello, dash. We're going to put a graph there instead.

So let's add a little bit, a new section, maybe figures. And we'll make first a pie figure. And it's going to be the PlotlyExpress pie function.

And we're going to pass it a few arguments. The first is our top five data. The next is what should be the values.

And that is what column are we interested in. And we're interested in the column item price. And finally, the names for the values in our pie chart.

And they will be our top five dot index. And the reason for that, the reason it's the index, is these might look like they're a column of item name. But actually, these item names are the names of the rows.

Normally, in a pandas data frame, they are, you know, 0,1, 2,3, 4. But when you do a group by like this, you get actual names for your rows. So those are the index. If we print out what's top five dot index, we should actually probably make a list out of it.

It'll print better. Oh, we've got an error. It's not item price here.

It's order price. Or possibly item price as number. Let's see.

Let's see if that'll work. I'm going to run app.pie again. Yep, expected one of item price as number.

That's what it's expecting for a value name. Let's try that one more time. Item price as number.

Run Python app.pie again. There we go. So these are the index, the row names for each of the five pieces of data in our top five.

So that's what we want to have be the names of this. Now we're going to use this top five dot index. It's a little bit of a, like if we know what we're looking at, we could be like, oh yeah, the index is the row names.

Let's actually make it item names equals top five dot index. That'll make the rest of this code much easier to read. I'm going to change this to item names.

There we go. I'm going to run that code again, make sure it still runs. Great.

All right. We've got our pie figure, but we haven't actually put it on the page yet. So what we're going to do is we're going to, instead of the h1, we're going to change this to a div, which is a different HTML element that makes it an area on our page.

We're going to pass in our dcc.graph. That is like, hey, this is the graph that has this figure inside it. In fact, we're going to pass in for the figure argument, our pie figure we made up there. Let's give that a try.

And there we go. There's our pie figure. Now it's in a graph within our dashboard.

All right. The next step, we'll add some more graphs. We'll remember how to do multiple graphs.

And then we'll lay it out with Bootstrap and give it a proper layout and see what we can do with that tool.