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

[DHRUVCHARNE]

The issue you're facing is due to the way FigureWidgetResampler handles multiple traces. When you add both the scatter and heatmap traces, the resampler is trying to downsample both traces, which is causing the unexpected result. To solve this issue, you can try the following: Add the heatmap trace without using FigureWidgetResampler. This will allow the heatmap to be displayed correctly. Add the scatter trace using FigureWidgetResampler. This will allow the scatter trace to be downsampled correctly. Here's an updated code snippet that demonstrates this approach:

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

Add heatmap trace without resampler

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 )

Create a new resampler figure

resampler_fig = FigureWidgetResampler(fig)

Add scatter trace to resampler figure

resampler_fig.add_trace( go.Scatter( mode='lines', ), hf_x=orderbook_df.index, hf_y=orderbook_df['BestAsk'], row=1, col=1 ) By adding the heatmap trace without using FigureWidgetResampler, you can ensure that it is displayed correctly. Then, by adding the scatter trace to the resampler figure, you can ensure that it is downsampled correctly