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!
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)