Possible to add line to filled area plot?

📊 Plotly Python
1

I have a filled area plot in python which I’d like to add an additional line too. Is this possible?

I’ve tried simply adding a line, as discussed in other places, but whenever I do so I get a Plotly Express cannot process wide-form data with columns of different type. error. I get this even though the data for the line is from the same data. If I graph the data all as an area plot it works fine, but if I separate out the one piece of data I need as a line into a new dataframe I get the above error.

Df.plot(kind=‘box’) with plotly returns error of wide-form data - Graphing Library / Plotly.py - Plotly Community Forum notes that any numeric should be recognized as the same as far as the above error, and since my data types are exactly the same I think the error must actually be inaccurate. Given that I’m getting the wrong error though I don’t know what to fix here.

So I’m left thinking my approach is wrong; is it possible to add a line to a filled area graph? I’ve even tried doing so with a second axis and all attempts result in the above error.

Here’s the main chunk of my graphing code just so people can see. The commented line near the end shows two of the other variations I tried.

       fig = px.area(graph_df, x=['Promised Date'], y="Open POs",
        color='PO Status',
        title=name, 
        labels={'value': "Date",
                    "Open POs": "Open PO Line Shipments"},
        category_orders={'PO Status':['Missing Need By Date','Missing Promised Date',
        'Past Due','Projected Late','Projected Early, Past Promised Date', 'Projected Early','Delivered, Awaiting Processing', 'Projected On Time']},
        range_x=range_x, 
        color_discrete_map = {'Missing Need By Date':'#d62728','Missing Promised Date': 'orange','Past Due':'red','Projected Late':'yellow', 'Projected On Time':'green', 'Projected Early':'blue','Projected Early, Past Promised Date':'#FF6692','Delivered, Awaiting Processing':'purple'},
        hover_name = 'PO Status')
    fig.update_xaxes(ticklabelmode='period',
            rangeslider_visible=True)
    fig.update_layout(hovermode='x unified') 
    fig.update_traces(hovertemplate = '%{y} PO lines')
    # fig.add_scatter(px.line(data_frame=need_by_date) #,secondary_y=True)
    fig.add_trace(px.line(need_by_date))

And here’s a quick view of the top of the two dataframes referenced here:

    Promised Date  Open POs PO Status
560    2022-12-22      4232  Past Due
561    2022-12-21      4232  Past Due
562    2022-12-20      4232  Past Due
563    2022-12-19      4232  Past Due
564    2022-12-18      4232  Past Due

which has type info:

<class 'pandas.core.frame.DataFrame'>
Int64Index: 3920 entries, 560 to 4479
Data columns (total 3 columns):
 #   Column         Non-Null Count  Dtype
---  ------         --------------  -----
 0   Promised Date  3920 non-null   datetime64[ns]
 1   Open POs       3920 non-null   int64
 2   PO Status      3920 non-null   object
dtypes: datetime64[ns](1), int64(1), object(1)

and

  Need By Date  Open POs     PO Status
0   2022-12-22         0  Need By Date
1   2022-12-21         0  Need By Date
2   2022-12-20         0  Need By Date
3   2022-12-19         0  Need By Date
4   2022-12-18         0  Need By Date

which has type info:

<class 'pandas.core.frame.DataFrame'>
Int64Index: 560 entries, 0 to 559
Data columns (total 3 columns):
 #   Column        Non-Null Count  Dtype
---  ------        --------------  -----
 0   Need By Date  560 non-null    datetime64[ns]
 1   Open POs      560 non-null    int64
 2   PO Status     560 non-null    object
dtypes: datetime64[ns](1), int64(1), object(1)
2

If you are looking to add multiple traces in your plot you should use the plotly.graph_objects library.

Create your fig object like this:

import plotly.graph_objects as go
fig = go.Figure()

and then use the fig.add_trace() for adding each new trace to your plot.
Like this:

import plotly.graph_objects as go
fig = go.Figure()
fig.add_trace(go.Bar(x=[1,2,3,4], y=[10,20,30,40])
fig.add_trace(go.Scatter(x=[1,2,3,4], y=[10,20,30,40], fill='tonexty') #Area plot with graph_objects
fig.show()
1 Like
3

That did it!

Apparently all my previous usage of plotly still didn’t make clear the graph_objects vs plotly_express distinction. This pointed me in the right direction to get it though; reviewed the docs, updated to use graph_objects across the board, now it works great; thanks for the pointer!

1 Like
4

Happy to help :slightly_smiling_face:
Yeah you are right about the distinction, even for me it took a while to figure that out as a beginner.
Also if you are looking for more explanation check out this thread.