pythonhtmlpandasholoviewspyviz

Move Holoviews Charts elements in layout below hv.Div element containing title


I have a hv.Div element containing text regarding the title a report I am working on. When I combine my holoview chart elements together with the hv.Div element I can't seem to push the chart elements below the hv.div element. Does anyone know how to do this? I've tried several permutations using hv.Layout and .cols(n) but I cant seem to push the charts below the title.

Sample code below:

import pandas as pd
import numpy as np
import matplotlib.pyplot as plt
import matplotlib
import holoviews as hv
from holoviews import opts
import panel as pn
hv.extension('bokeh', 'matplotlib')
pd.options.plotting.backend = 'holoviews'

# create some sample data
df1 = pd.DataFrame({
'x': np.random.rand(10), 
'y': np.random.rand(10),
})

df2 = pd.DataFrame({
'x': np.random.rand(10) * 10, 
'y': np.random.rand(10) * 10,
})

# set axiswise=True so that every plot gets its own independent x- and y-axis    
plot1 = hv.Scatter(df1).opts(axiswise=True)
plot2 = hv.Scatter(df2).opts(axiswise=True)

#layout
Div = hv.Div('<div style=\"color:black;background-color:#88FF88;text-align:left;font-size:20px">Overall Title</div>')
my_plot = Div + plot1 + plot2
my_plot

Thank you!


Solution

  • Since you are already importing Panel, I'd recommend just using Panel layouts for this:

    Div = pn.pane.HTML('<div style=\"color:black;background-color:#88FF88;text-align:left;font-size:20px">Overall Title</div>', height=20)
    pn.Column(Div, plot1 + plot2)
    

    enter image description here