Plotly plot single trace with 2 yaxis

Question

I have a plotly graph object bar chart for which I want to display 2 y-axis (different currencies, so the conversion factor ist constant).

Currently I plot 1 trace each, while for the second one I set opacity to 0, disable the legend and hoverinfo. This hack works, but is ugly to maintain.

I'm aware of https://plotly.com/python/multiple-axes/

my current solution looks like this

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

# make up some data
dates = pd.DataFrame(pd.date_range('1/1/2023','1/7/2023'), columns=['date'])
dates["key"] = 0
items = pd.DataFrame(["A","B","C"], columns=['items'])
items["key"] = 0
df = dates.merge(items,on="key",how="outer").drop("key",axis=1)
df['price_USD'] = np.random.randint(0, 100, df.shape[0])
df['price_EURO'] = df['price_USD']/1.5

fig = make_subplots(specs=[[{"secondary_y": True}]])  
for item, _df in df.groupby("items",sort=True):
    ## we may set the colors of the individual items manually here
    fig.add_trace(
                go.Bar(
                    x=_df["date"],
                    y=_df["price_USD"],
                    showlegend=True,
                    name=item,
                    opacity=1.0,
                    #color=color,
                    legendgroup=item

                ),
                secondary_y=False,
            )

    # invisible trace
    fig.add_trace(
                go.Bar(
                    x=_df["date"],
                    y=_df["price_EURO"],
                    showlegend=False,
                    opacity=0.0,
                    name="",
                    hoverinfo="skip",
                    legendgroup=item
                ),
                secondary_y=True,
            )

fig.update_layout(barmode="stack")
fig.update_yaxes(title_text="<b>Cost USD", secondary_y=False)
fig.update_yaxes(title_text="<b>Cost Euro", showgrid=False, secondary_y=True)
fig.show()

Is there a cleaner way to do this?

Answer 1

One can use the other side as a scaleanchor and provide the scaling. Doubling the data is then not necessary anymore.

import pandas as pd
import numpy as np
import plotly.graph_objects as go
from plotly.subplots import make_subplots
np.random.seed(1)

RATIO = 1.5

# make up some data
dates = pd.DataFrame(pd.date_range('1/1/2023','1/7/2023'), columns=['date'])
dates["key"] = 0
items = pd.DataFrame(["A","B","C"], columns=['items'])
items["key"] = 0
df = dates.merge(items,on="key",how="outer").drop("key",axis=1)
df['price_USD'] = np.random.randint(0, 100, df.shape[0])

# This is not needed more, at least for displaying it
#df['price_EURO'] = df['price_USD']/ RATIO

fig = make_subplots(specs=[[{"secondary_y": True}]])  
for item, _df in df.groupby("items",sort=True):
    ## we may set the colors of the individual items manually here
    fig.add_trace(
                go.Bar(
                    x=_df["date"],
                    y=_df["price_USD"],
                    showlegend=True,
                    name=item,
                    opacity=1.0,
                    #color=color,
                    legendgroup=item

                ),
                secondary_y=False,

            )
 
# Add a dummy trace to activate the second axis  
fig.add_trace(
            go.Bar(visible=False),
            secondary_y=True,
        )
fig.update_layout(barmode="stack")
fig.update_yaxes(title_text="<b>Cost USD", secondary_y=False)
fig.update_yaxes(title_text="<b>Cost Euro", showgrid=False, secondary_y=True)
# Set scale according to the other axis and the defined ratio
# the constraint assures that it is bottom aligned
fig.update_layout(yaxis2=dict(scaleanchor="y1", scaleratio=RATIO, constraintoward="bottom"))
fig.show()