# Plotly Express Stacked Area Plot

**URL:** <https://community.plotly.com/t/plotly-express-stacked-area-plot/22871>\
**Category:** 📊 Plotly Python\
**Created:** [April 29, 2019, 3:06pm UTC](https://community.plotly.com/t/plotly-express-stacked-area-plot/22871 "2019-04-29T15:06:24Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Varlor](https://avatars.discourse-cdn.com/v4/letter/v/d2c977/32.png) [@Varlor](https://community.plotly.com/u/Varlor)\
**Post date:** [April 29, 2019, 3:06pm UTC](https://community.plotly.com/t/plotly-express-stacked-area-plot/22871/1 "2019-04-29T15:06:24Z")

</div>

Is it possible to create a stack plot with plotly express, and maybe to generate a generic stack plot with updating the figure with data?

---

<div class="post-metadata">

**Author:** ![nicolaskruchten](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/nicolaskruchten/32/7018_2.png) [@nicolaskruchten](https://community.plotly.com/u/nicolaskruchten)\
**Post date:** [April 29, 2019, 7:16pm UTC](https://community.plotly.com/t/plotly-express-stacked-area-plot/22871/2 "2019-04-29T19:16:04Z")

</div>

This isn’t possible yet but we’re likely to add it soon!

---

<div class="post-metadata">

**Author:** ![nicolaskruchten](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/nicolaskruchten/32/7018_2.png) [@nicolaskruchten](https://community.plotly.com/u/nicolaskruchten)\
**Post date:** [May 6, 2019, 6:26pm UTC](https://community.plotly.com/t/plotly-express-stacked-area-plot/22871/3 "2019-05-06T18:26:48Z")

</div>

This will come out in tomorrow’s release, as `px.area` 🙂

---

<div class="post-metadata">

**Author:** ![nicolaskruchten](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/nicolaskruchten/32/7018_2.png) [@nicolaskruchten](https://community.plotly.com/u/nicolaskruchten)\
**Post date:** [May 7, 2019, 2:33pm UTC](https://community.plotly.com/t/plotly-express-stacked-area-plot/22871/4 "2019-05-07T14:33:57Z")

</div>

The release is out: v0.1.8

---

<div class="post-metadata">

**Author:** ![Varlor](https://avatars.discourse-cdn.com/v4/letter/v/d2c977/32.png) [@Varlor](https://community.plotly.com/u/Varlor)\
**Post date:** [May 7, 2019, 5:44pm UTC](https://community.plotly.com/t/plotly-express-stacked-area-plot/22871/5 "2019-05-07T17:44:54Z")

</div>

@nicolaskruchten How exactly can I use it to make a stack plot?

---

<div class="post-metadata">

**Author:** ![nicolaskruchten](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/nicolaskruchten/32/7018_2.png) [@nicolaskruchten](https://community.plotly.com/u/nicolaskruchten)\
**Post date:** [May 7, 2019, 5:56pm UTC](https://community.plotly.com/t/plotly-express-stacked-area-plot/22871/6 "2019-05-07T17:56:48Z")

</div>

Here is the example from [https://plotly.express/](https://plotly.express/)

 ![image](https://us1.discourse-cdn.com/flex024/uploads/plot/original/2X/a/af068a3f9b3d7b038e85017b653695c23f38cdff.png)

---

<div class="post-metadata">

**Author:** ![Varlor](https://avatars.discourse-cdn.com/v4/letter/v/d2c977/32.png) [@Varlor](https://community.plotly.com/u/Varlor)\
**Post date:** [May 7, 2019, 6:07pm UTC](https://community.plotly.com/t/plotly-express-stacked-area-plot/22871/7 "2019-05-07T18:07:25Z")

</div>

Ah I see, but a stack bar plot is not possible with that, isnt it?

---

<div class="post-metadata">

**Author:** ![nicolaskruchten](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/nicolaskruchten/32/7018_2.png) [@nicolaskruchten](https://community.plotly.com/u/nicolaskruchten)\
**Post date:** [May 7, 2019, 6:12pm UTC](https://community.plotly.com/t/plotly-express-stacked-area-plot/22871/8 "2019-05-07T18:12:47Z")

</div>

Ah for stacked bars we have always supported `px.bar(...)` like this:

 ![image](https://us1.discourse-cdn.com/flex024/uploads/plot/original/2X/5/5e2effd3fa4628be24ad1309e4f288477ea1c2e5.png)

---

<div class="post-metadata">

**Author:** ![Varlor](https://avatars.discourse-cdn.com/v4/letter/v/d2c977/32.png) [@Varlor](https://community.plotly.com/u/Varlor)\
**Post date:** [May 8, 2019, 9:10am UTC](https://community.plotly.com/t/plotly-express-stacked-area-plot/22871/9 "2019-05-08T09:10:39Z")

</div>

Ah perfect!. I tested it for my approach and what I want is to update my graph. So i create a fig with px.bar and convert it to FigureWidget. My data is as follows: I have an x-Axis with 1000 values. Every x value has two y values(one stack bar). And now in my update the y values changes with jupyter widgets.interactive. I want the best performance for updating. For the creation of the figure with the px.bar approach I have to double the x value array and create a category array for the x values with corresponding y values. I saw that the creation via px.bar reduces the number of x and y values. Why is that? How can I easily update those figures with only setting the y value.Because I have the feeling the more I set new in my update the slower get the update. Do I have to find out how the y values are reorderd and reduced and using this order when setting the y values new? I am using python 3.5 by the way, because I read something about unordered stuff below 3.6.

Here is an example of what I mean:

```
import ipywidgets as widgets
import pandas as pd
import numpy as np
import plotly_express as px
import plotly.graph_objs as go

frame1 = pd.DataFrame({'y':np.arange(0,1000),'color':np.concatenate([np.random.choice(2,500),np.random.choice(2,500)]),'x':np.concatenate([np.arange(0,500),np.arange(0,500)])})
d = px.bar(frame1,x='x',color="color",y='y')
print(d.data[0]['x'].shape)
print(d.data[0]['y'].shape)
e = go.FigureWidget(d)
print(e.data[0]['y'])
print(e.data[0]['y'].shape)
print(e.data[0]['x'])
print(e.data[0]['x'].shape)
```

---

<div class="post-metadata">

**Author:** ![nicolaskruchten](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/nicolaskruchten/32/7018_2.png) [@nicolaskruchten](https://community.plotly.com/u/nicolaskruchten)\
**Post date:** [May 8, 2019, 1:36pm UTC](https://community.plotly.com/t/plotly-express-stacked-area-plot/22871/10 "2019-05-08T13:36:50Z")

</div>

I’m sorry, I don’t understand the question you’re asking… Does the code above not work for you?

---

<div class="post-metadata">

**Author:** ![Varlor](https://avatars.discourse-cdn.com/v4/letter/v/d2c977/32.png) [@Varlor](https://community.plotly.com/u/Varlor)\
**Post date:** [May 8, 2019, 1:51pm UTC](https://community.plotly.com/t/plotly-express-stacked-area-plot/22871/11 "2019-05-08T13:51:41Z")

</div>

Ok sorry for my bad description of the problem. I just wonder what would be the best way to update the values for my stackplot and why data is missing in the x and y attribute of the figure created by px.bar. Because I give 1000 values in the figure but after creating and inspecting the x and y attribute of the figure they just have 498, sometimes 512 values.

---

<div class="post-metadata">

**Author:** ![nicolaskruchten](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/nicolaskruchten/32/7018_2.png) [@nicolaskruchten](https://community.plotly.com/u/nicolaskruchten)\
**Post date:** [May 8, 2019, 2:15pm UTC](https://community.plotly.com/t/plotly-express-stacked-area-plot/22871/12 "2019-05-08T14:15:36Z")

</div>

I’m not seeing the 498/512 issue you’re seeing here…

 ![image](https://us1.discourse-cdn.com/flex024/uploads/plot/original/2X/a/a32a8edea31a84d2c37a3c01a1e92e8a503eddb0.png)

---

<div class="post-metadata">

**Author:** ![nicolaskruchten](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/nicolaskruchten/32/7018_2.png) [@nicolaskruchten](https://community.plotly.com/u/nicolaskruchten)\
**Post date:** [May 8, 2019, 2:17pm UTC](https://community.plotly.com/t/plotly-express-stacked-area-plot/22871/13 "2019-05-08T14:17:11Z")

</div>

Ah, maybe I understand… If your “color” is something other than a number, then you will end up with multiple traces, one per color. So if you randomly assign “a” and “b” to “color” then `data[0]` might have 498 entries and then `data[1]` will have the other 502 entries. This is deterministic based on your data, however.

---

<div class="post-metadata">

**Author:** ![Varlor](https://avatars.discourse-cdn.com/v4/letter/v/d2c977/32.png) [@Varlor](https://community.plotly.com/u/Varlor)\
**Post date:** [May 8, 2019, 2:25pm UTC](https://community.plotly.com/t/plotly-express-stacked-area-plot/22871/14 "2019-05-08T14:25:56Z")

</div>

I think thats not the problem, because I execute the same code as you are and I got:

![grafik](https://us1.discourse-cdn.com/flex024/uploads/plot/original/2X/2/21031966d3ca4e176abc434686c5d25c8fff27e0.png)

Maybe It has something to do with :

![grafik](https://us1.discourse-cdn.com/flex024/uploads/plot/original/2X/3/334dd33fd7cc762435f0855a305357caec8aa2b0.png)

---

<div class="post-metadata">

**Author:** ![nicolaskruchten](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/nicolaskruchten/32/7018_2.png) [@nicolaskruchten](https://community.plotly.com/u/nicolaskruchten)\
**Post date:** [May 8, 2019, 2:38pm UTC](https://community.plotly.com/t/plotly-express-stacked-area-plot/22871/15 "2019-05-08T14:38:09Z")

</div>

what version of pandas are you using?

---

<div class="post-metadata">

**Author:** ![Varlor](https://avatars.discourse-cdn.com/v4/letter/v/d2c977/32.png) [@Varlor](https://community.plotly.com/u/Varlor)\
**Post date:** [May 8, 2019, 2:59pm UTC](https://community.plotly.com/t/plotly-express-stacked-area-plot/22871/16 "2019-05-08T14:59:46Z")

</div>

My pandas version is 0.24.2

---

<div class="post-metadata">

**Author:** ![nicolaskruchten](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/nicolaskruchten/32/7018_2.png) [@nicolaskruchten](https://community.plotly.com/u/nicolaskruchten)\
**Post date:** [May 10, 2019, 1:22pm UTC](https://community.plotly.com/t/plotly-express-stacked-area-plot/22871/17 "2019-05-10T13:22:01Z")

</div>

Wow this is very strange. Can I get a bit more info about your setup? Python version, PX version, numpy version and operating system? I can’t replicate this at all but it is concerning.

Also, could you share the output of the following command on your data frame? `print(frame1.color.dtype.kind, frame1.color.dtype)`

---

<div class="post-metadata">

**Author:** ![Varlor](https://avatars.discourse-cdn.com/v4/letter/v/d2c977/32.png) [@Varlor](https://community.plotly.com/u/Varlor)\
**Post date:** [May 21, 2019, 2:29pm UTC](https://community.plotly.com/t/plotly-express-stacked-area-plot/22871/18 "2019-05-21T14:29:37Z")

</div>

Sorry for the really late reply! I dont know what exactly happend but I had a problem with some jupyterlab ipywidget thing. And I reinstalled everything. And now the plotlyexpress barplot thing works exactly how it should! Really strange and also bad because now I cant say what was the origin of the problem

---

<div class="post-metadata">

**Author:** ![sladkovm](https://avatars.discourse-cdn.com/v4/letter/s/f07891/32.png) [@sladkovm](https://community.plotly.com/u/sladkovm)\
**Post date:** [July 2, 2019, 1:41pm UTC](https://community.plotly.com/t/plotly-express-stacked-area-plot/22871/19 "2019-07-02T13:41:43Z")

</div>

Is it possible to get rid of lines and keep only the shaded area? e.g. by passing mode=‘none’ from the go.Scatter() API?

---

<div class="post-metadata">

**Author:** ![nicolaskruchten](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/nicolaskruchten/32/7018_2.png) [@nicolaskruchten](https://community.plotly.com/u/nicolaskruchten)\
**Post date:** [July 2, 2019, 9:11pm UTC](https://community.plotly.com/t/plotly-express-stacked-area-plot/22871/20 "2019-07-02T21:11:52Z")

</div>

Yes, you can call `.update_traces()` on the resulting figure to set any attributes you want, such as `.update_traces(line_weight = 0)`

[Next page](https://community.plotly.com/t/plotly-express-stacked-area-plot/22871.md?page=2)