How do I create linked and responsive Layout of scatter and bar plot?

Hi

I have two time series (one observation per day per series for several years) that I would like to plot.

I would like to plot both the two series and the delta plot. The users would like the delta plot to be a bar plot.

Furthermore I need the combined plot to be responsive.

How do I achieve that?

(I have gone through the guides and galleries at the Holoviews site and done some Googling without luck).

Code

My current experiments are below.

  • I cannot get responsiveness from holoviews.Layout
    • I can get responsiveness if I put the two plots into a panel.Column.
  • I cannot get the two date (x-axis) linked.
    • With that I mean that they should be linked when I drag or zoom one of the plots.
    • The y-axis should not be linked as they will not have the same unit or scale.
import pandas as pd
import hvplot.pandas
from holoviews import opts
data = {
    "x": [pd.Timestamp("2020-01-01"),pd.Timestamp("2020-01-02"),pd.Timestamp("2020-01-03")],
    "y": [2,4,5]
}
dataframe = pd.DataFrame(data)
price_plot = dataframe.hvplot.scatter(x="x", y="y").opts(height=100, responsive=True)
bar_plot = dataframe.hvplot(x="x", y="y", kind="bar").opts(height=100, responsive=True)
layout = (price_plot + bar_plot).cols(1)
layout.opts(opts.Layout(shared_axes=True))

pn.Column(
    price_plot,
    bar_plot,
    layout,
    sizing_mode="stretch_width",
    background="yellow",
)

One Step towards a Solution

  • If I rename my dataframe columns for the x-axis the same and for the y-axis differently I get the linking I want.
  • If I don’t use a holoviews.Layout but a panel.Column I get responsiveness.

But still I’m not able to get the second plot to be a bar chart. If I set the kind to bar then the x-axis are no longer linked.

How do I solve that?

import pandas as pd
import hvplot.pandas
from holoviews import opts
price_data = {
    "date": [pd.Timestamp("2020-01-01"),pd.Timestamp("2020-01-02"),pd.Timestamp("2020-01-03")],
    "price": [2,4,5]
}
delta_data = {
    "date": [pd.Timestamp("2020-01-01"),pd.Timestamp("2020-01-02"),pd.Timestamp("2020-01-03")],
    "delta": [1,2,3]
}
price_df = pd.DataFrame(price_data)
delta_df = pd.DataFrame(delta_data)
price_plot = price_df.hvplot(x="date", y="price", label="Price").opts(height=300, responsive=True)
delta_plot = delta_df.hvplot(x="date", y="delta", kind="step", label="Delta").opts(height=300, responsive=True)
layout = (price_plot + delta_plot).cols(1)
layout.opts(opts.Layout(shared_axes=False))

pn.Column(
    price_plot,
    delta_plot,
    sizing_mode="stretch_width",
    background="yellow",
)

Just wondered if there was any news on this front as I’m still looking for a solution.