Double axes in subplots

📊 Plotly Python
1

I was trying to make two independent plots with make_subplots and try to plot double X-axes for both subplots. In the example below, I was trying to plot two light curves in two subplots independently, where the second one is a subset of the first one. For each subplot, I want to show the x-axis with double formats, the first format in seconds to be shown in the bottom of the plot while the second format in HH:MM:SS to be shown in the top of the plot. However I can not make such a plot, and the example below shows the double axes only for the first row of subplots, and weirdly the top x-axis in HH:MM:SS is actually corresponding to the second row of subplots. Could you help me with this issue? I was using plotly version 6.0.0. Thank you so much! - Hui

newplot
newplot900×700 55.7 KB

import numpy as np
import pandas as pd
from datetime import datetime, timedelta
import plotly.subplots as sp

# Sample data: time in seconds and corresponding flux values
time_seconds = np.linspace(0, 10000, 100)  # Time in seconds
flux = np.random.normal(1, 0.1, size=len(time_seconds))  # Random flux values

# Reference time (e.g., start of observation)
reference_time = datetime(2023, 10, 1, 12, 0, 0)

# Convert time_seconds to datetime objects
time_datetime = [reference_time + timedelta(seconds=t) for t in time_seconds]

# Create a DataFrame for easier manipulation
df = pd.DataFrame({'time_seconds': time_seconds, 'flux': flux, 'time_datetime': time_datetime})

# Define zoom-in range for the second row
zoom_start = 3000  # Start of zoom-in window (seconds)
zoom_end = 5000  # End of zoom-in window (seconds)

# Filter data for zoom-in plot
df_zoom = df[(df['time_seconds'] >= zoom_start) & (df['time_seconds'] <= zoom_end)]

# Create subplots with 2 rows (independent x-axes)
fig = sp.make_subplots(rows=2, cols=1, shared_xaxes=False, vertical_spacing=0.15)

# Add the full light curve in the first row
fig.add_trace(go.Scatter(
    x=df['time_seconds'], y=df['flux'],
    mode='lines', name='Full Lightcurve'
), row=1, col=1)

# Add the zoomed-in light curve in the second row
fig.add_trace(go.Scatter(
    x=df_zoom['time_seconds'], y=df_zoom['flux'],
    mode='lines', name='Zoomed Lightcurve'
), row=2, col=1)

# Update layout for fully independent x-axes
fig.update_layout(
    height=700, width=900,
    title="Lightcurve with Independent Dual X-Axes",
    showlegend=True,

    # First row: Bottom x-axis (seconds)
    xaxis1=dict(
        title='Time after reference (seconds)',
        side='bottom',
        anchor='y1'  # Anchoring to the first row's y-axis
    ),

    # First row: Top x-axis (HH:MM:SS)
    xaxis2=dict(
        title='Time (HH:MM:SS)',
        side='top',
        tickvals=df['time_seconds'],
        ticktext=[t.strftime('%H:%M:%S') for t in df['time_datetime']],
        showgrid=False,
        anchor='y1'  # Anchoring to the first row's y-axis
    ),

    # Second row: Bottom x-axis (seconds)
    xaxis3=dict(
        title='Time after reference (seconds)',
        side='bottom',
        anchor='y2'  # Anchoring to the second row's y-axis
    ),

    # Second row: Top x-axis (HH:MM:SS)
    xaxis4=dict(
        title='Time (HH:MM:SS)',
        side='top',
        tickvals=df_zoom['time_seconds'],
        ticktext=[t.strftime('%H:%M:%S') for t in df_zoom['time_datetime']],
        showgrid=False,
        anchor='y2'  # Anchoring to the second row's y-axis
    ),

    # First row: Y-axis
    yaxis1=dict(
        title="Flux",
        showgrid=True
    ),
    
    # Second row: Y-axis
    yaxis2=dict(
        title="Flux (Zoom-in)",
        showgrid=True
    )
)

# Show the plot
fig.show()

type or paste code here