✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
⚡️ Concerned about the grid? Kyle Baranko teaches how to predicting peak loads using XGBoost. Register for the August webinar!

Mixed subplots with OHLC - Value Error

Hi there,

I am newbie to plotly, with few days of experience.

I am trying to produce 2x1 subplots, with mixed type (OHLC and Bar). I have been kept reading the manual (https://plotly.com/python/mixed-subplots/) but could not figure out what is wrong with my code.

Whenever i add the OHLC data, it gives

ValueError:
Invalid element(s) received for the ‘data’ property of
Invalid elements include:…

Below is my code that i have been stuck for 2 days

# import plotly
import plotly.graph_objects as go
from plotly.subplots import make_subplots
import pandas as pd

# creating subplot, 2x1, shared x-axis
fig = make_subplots(rows=2, cols=1,
                    shared_xaxes=True, 
                    vertical_spacing=0.22,
                    specs= [ [{"type": "candlestick"}],
                             [{"type": "bar"}] 
                           ] 
                   )


# add data for subplot, price OHLC chart

df_price = pd.read_csv('Resamp_Daily_OHLC.csv')

trace1 = go.Figure(data=go.Ohlc(x=df_price['Date'],
                             open=df_price['open'],
                             high=df_price['high'],
                             low=df_price['low'],
                             close=df_price['close']))

# add data for subplot, Volume
df_volume = pd.read_csv('Daily_BS_Total.csv')
trace2 = go.Bar(x=df_volume['Date'], y=df_volume['Trade Vol'])

# plotting
fig.add_trace(go.Bar(x=df_volume['Date'], y=df_volume['Trade Vol']),
              row=1,col=1
             )


fig.add_trace(go.Figure(data=go.Candlestick(x=df_price['Date'],
                             open=df_price['open'],
                             high=df_price['high'],
                             low=df_price['low'],
                             close=df_price['close'])),
              row=2,col=1
             )

fig.update(layout_xaxis_rangeslider_visible=True)
fig.update_layout(height=600, width=1000,
                  title_text='Stacked Subplots with Shared X-axes')
fig.show()

I just would like to inform that if I plot the OHLC chart alone, there is no Value Error.

Thank you in advance. Regards

HI @pedagugues welcome to the forum! A plotly figure object (go.Figure) has to main attributes, data, which is a list of traces, and layout, which has the structure of a dictionary with layout parameters. When you use fig.add_trace you should pass a trace object (so go.Bar(...), go.Candlestick(...) etc.), not a whole figure. You can read the Creating and Updating figures tutorial, it’s I thing a must-read when you get started with plotly to understand the structure of plotly figure objects.

Therefore your code should be

fig.add_trace(go.Candlestick(x=df_price['Date'],
                             open=df_price['open'],
                             high=df_price['high'],
                             low=df_price['low'],
                             close=df_price['close']),
              row=2,col=1
             )

Also you don’t need to specify the specs argument of make_subplots when you have Cartesian axes, it’s only for some other types of charts such as pie charts, 3d charts etc. Below is a standalone code using online data, I checked it works :slight_smile:

import plotly.graph_objects as go
from plotly.subplots import make_subplots
import pandas as pd

# creating subplot, 2x1, shared x-axis
fig = make_subplots(rows=2, cols=1,
                    shared_xaxes=True, 
                    vertical_spacing=0.22,
                   )


# add data for subplot, price OHLC chart
df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/finance-charts-apple.csv')
df_price = df.rename(columns={'AAPL.Open':'open', 'AAPL.High':'high', 
                              'AAPL.Low':'low', 'AAPL.Volume':'volume', 
                              'AAPL.Close':'close'})

trace1 = go.Figure(data=go.Ohlc(x=df_price['Date'],
                             open=df_price['open'],
                             high=df_price['high'],
                             low=df_price['low'],
                             close=df_price['close']))


# plotting
fig.add_trace(go.Bar(x=df_price['Date'], y=df_price['volume']),
              row=1,col=1
             )


fig.add_trace(go.Candlestick(x=df_price['Date'],
                             open=df_price['open'],
                             high=df_price['high'],
                             low=df_price['low'],
                             close=df_price['close']),
              row=2,col=1
             )
fig.update(layout_xaxis_rangeslider_visible=True)
fig.update_layout(height=600, width=1000,
                  title_text='Stacked Subplots with Shared X-axes')
fig.show()
2 Likes

Dear @Emmanuelle,

Thank you for the swift response. I works like magic !. And yes i will keep reading the creating-and-updating-figures, as suggested.

Thank you indeed and have a great day. Stay safe.

can we add plotly express code in fig.add_trace() as it doesn’t have data and layout like structure as plotly graph object? If not how to use plotly express code for making subplots?