If add heatmap, x-axis would be not aligned.

[kevinyin9]

Hello,

I’m trying to plot a stock price chart with a heatmap and a price scatter. However, when I add both the scatter and heatmap traces to the chart, the result is not what I expected.

plotly==5.15.0
plotly-resampler==0.8.3.2
dash==2.10.2.

Here’s my current code snippet:

fig = FigureWidgetResampler(make_subplots(rows=2, cols=1, shared_xaxes=True, vertical_spacing=0, row_heights=[3, 1]))        

# orderbook heatmap in background
fig.add_trace(
    go.Heatmap(
        x=orderbook_df.index,
        y=orderbook_df['orderbook_price'],
        z=orderbook_df['orderbook_qty'],
        colorscale='Greys',
    ),
    row=1, col=1
)
# Price line
fig.add_trace(
    go.Scatter(
        mode='lines',
    ),
    hf_x=orderbook_df.index,
    hf_y=orderbook_df['BestAsk'],
    row=1, col=1
)

As you can see from the images I posted below, when I add both traces, the chart doesn’t look ideal.

This chart is without FigureWidgetResampler, which is correct:

With FigureWidgetResampler, this is still correct when only price scatter exists:

With FigureWidgetResampler, this is not correct when both scatter and heatmap exists:

Also, I found that if add the scatter first then add the heatmap, the chart won't show anything.

Can anyone suggest how to solve this issue?

Thanks in advance for any help!

[jvdd]

Hey @kevinyin9

Thx for submitting this issue!

I'll gladly look further into this, but can you share either;

• a reproducible example (where you create some data)?
• share the data of the example above?

Kind regards,
Jeroen

[jonasvdd]

Hi @kevinyin9,

Would you be so kind to provide us with a minimal example of your experience issue?

Kind regards,
Jonas

[jonasvdd]

ping! @kevinyin9