3

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!

Amen_90
  • 310
  • 2
  • 9

1 Answers1

4

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

philippjfr
  • 3,997
  • 14
  • 15
  • Hi Phillip, Thank you for the solutions works great! I was wondering if didnt want to use panel, could I achieve the same with the hv resources? I have a bit of trouble exporting my app as a static html when using panel.save! – Amen_90 Jan 16 '20 at 14:26
  • 1
    If you just want a simple title you could also just add it to your plots like this: (plot1 + plot2).opts(title='Overall Title', fontsize={'title': 35}) – Sander van den Oord Jan 16 '20 at 14:39
  • Not quite, I have individual titles for both of the plots, but just wanted an overall one, such as 'Market Overview'. I used the method Phillip suggested, but when applied to my charts, I end up linking all the Y axis scales again, even though I have declared "axiswise = True" in all my charts. The axis wise statement works fine when I don't use the panel solution. =( – Amen_90 Jan 16 '20 at 15:44
  • 1
    @Amen_90 That issue will be resolve in panel 0.8, but for now you could do `pn.Column(Div, pn.panel(plot1 + plot2, linked_axes=False))`. – philippjfr Jan 16 '20 at 18:25
  • Works perfect! @philippjfr and@Sander van den Oord, thank you both, much appreciated! =) – Amen_90 Jan 17 '20 at 10:25