Search code examples
pythonholoviewsholoviz

Horizontal scroll bar in Holoviews


I have made an interactive visualization using Holoviews and would like to have a horizontal scroll on the bottom of the plot. I currently use a slider that can control the number of columns in the plot, but I prefer to have a horizontal scroll bar as well. So by increasing the number of industries, the width of the plot and the columns' width would not change. Here is my code and the plot:

import pandas as pd
import panel as pn
import panel.widgets as pnw
import holoviews as hv
from bokeh.plotting import figure
hv.extension('bokeh')

from bokeh.models import HoverTool, BoxZoomTool, ResetTool, PanTool, WheelZoomTool, SaveTool, LassoSelectTool

data = df 
Options = ["All"] + list(data['country_code'].unique())
xlist = list(data['Industry'].unique())
Countries = pn.widgets.Select(name = "Country", options = Options, value = "All")
x = pn.widgets.IntSlider(name = 'Industry', value = 10, start = 10, end = 30)


hover = HoverTool(description='Custom Tooltip', tooltips = [('Industry', '@Title'),('Count', '@Count')])

@pn.depends(Countries.param.value, x.param.value)

def fig(Countries,x):
   
    opts = dict(title = "Companies by Industry", width = 50*x, height = 300, line_color = 'black' ,
                 tools = [hover], apply_ranges = True)




# Determine which country has been selected

    if Countries == "All":
        selected = data.groupby(['Industry']).sum().reset_index().rename(columns = {0:'Count'}).sort_values(by ='Count', ascending = False )[:x]
    
    else:
        selected = data[data['country_code'] == Countries].sort_values(by ='Count', ascending = False )[:x]
    
    selected['Title'] = 'title'


    return hv.Bars(selected, 'Industry', 'Count').opts(**opts)

widgets = pn.WidgetBox(Countries, x)
pn.Column(widgets, fig)

As another point, I want to add another variable (called Title here) to the hover tool, but it is shown for all the columns like ???. I do not know exactly why the values are not passed correctly to the hover tool.

enter image description here


Solution

  • The solution can be found here: https://discourse.holoviz.org/t/horizontal-scroll-in-holoviews/2516

    Just need to change the last line to something like pn.Column(widgets, pn.Column(fig, scroll=True, width=500))