Python Plotly figure with secondary x axis linked to primary

Question

I've been struggling with this seemingly simple task: How to align two x axis with related data. In my case one axis is in Celsius and the other in Fahrenheit.

What I want to achieve is to obtain alignment of the two x axis so that:

32°F = 0°C And 50°F = 10°C

With this relation, the two datasets will be aligned in terms of temperature.

I want to have both unit sets on the same graph so that the viewer can interpret the data according to the units they are used to.

Here is my code:

import plotly.graph_objects as go
from plotly.subplots import make_subplots
from plotly.graph_objs.layout import YAxis,XAxis,Margin

layout = go.Layout(
    title="Double X Axis Example",
    xaxis=XAxis(
        title="Celcius"
    ),
    xaxis2 = XAxis(
        title="Fahrenheits",
        overlaying= 'x', 
        side= 'top',
    ),
    yaxis=dict(
        title="Y values"
    ),
)

# Create figure with secondary x-axis
fig = go.Figure(layout=layout)

# Add traces
fig.add_trace(
    go.Scatter(x=[10, 20, 30], y=[4.5, 6, 5], name="data set in celcius"),
)

fig.add_trace(
    go.Scatter(x=[40, 60, 80], y=[4, 5, 6.5], name="data set in fahrenheit", xaxis='x2'),
)

fig.show()

Here is the resulting figure with the unaligned axes (10°C = 40°F !?):

Thank you,

Answer 1

In this case it might help to set the ranges for the x-axes, something like this:

fig.add_trace(
    go.Scatter(x=[10, 20, 30], y=[4.5, 6, 5,], name="data set in celcius",xaxis="x1"),
)

fig.add_trace(
    go.Scatter(x=[40, 60, 80], y=[4, 5, 6.5], name="data set in fahrenheit", xaxis='x2'),
)


fig.update_layout(
    xaxis1=dict(range=[0, 100]),
    xaxis2=dict(range=[32, 212]),
    )

...possibly calculating the limit needed of x1 and then base x2 limit on that.