Double axes in subplots

[huiyang-astro]

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

import plotly.graph_objects as go
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()

[gvwilson]

Hi - we are trying to keep the issues and PRs in Plotly's public repositories tidy so that we can focus on things that are most important to our community. For tech support and "how-to" questions, please post in our community forum https://community.plotly.com/. Thank you - @gvwilson