Plot changes size when partially updated

HoloViews
1

Would be grateful with help with the code section below. I want it so when click on chart it displays a marker where clicked without updating whole chart. It works but unfortunately resizes the chart to minimal size which ruins it. Please note it needs Bokeh version 2.3.0 not 2.3.1 or .2 as there is a bug in the latest version which means the responsiveness wont work.
Any help appreciated

‘’’{python}
import panel as pn
import holoviews as hv

pn.extension()
hv.renderer(‘bokeh’)

def draw_chart_1():
def marker(x,y):
sel_point = hv.Points([[x,y]])
sel_point.opts(color=‘white’, marker=‘x’, size=9, alpha=1, line_color=‘white’)
return sel_point

cv = hv.Curve(((0, 1, 2), (4, 4, 7))).opts(responsive=True, aspect=1)
stream = hv.streams.Tap(source=cv, x=20, y=30)
tap_dmap = hv.DynamicMap(marker, streams=[stream])
global left_chart
left_chart.object=cv * tap_dmap

def draw_chart_2():
cv = hv.Curve(((0, 1, 2), (4, 4, 7))).opts(responsive=True)
global right_chart
right_chart.object=cv

left_chart = pn.pane.HoloViews(
None,
sizing_mode=“stretch_height”,
)

right_chart = pn.pane.HoloViews(
None,
sizing_mode=“stretch_both”
)

chart_row = pn.Row(
pn.Column(left_chart, sizing_mode=‘stretch_height’),
pn.Spacer(width=20),
pn.Column(right_chart, sizing_mode=‘stretch_both’),
sizing_mode=‘stretch_both’
)

dashboard = pn.Column(chart_row,
sizing_mode=“stretch_both”,
min_width=900,
min_height=500,
margin=[10, 15, 0, 10],
background=“yellow”
)

draw_chart_1()
draw_chart_2()

dashboard.servable()
‘’’

2

Based on @Marc 's helpful answer to my related problem, I think this might give you a starting point:

import panel as pn
import holoviews as hv
# https://discourse.holoviz.org/t/plot-changes-size-when-partially-updated/2500
pn.extension()
hv.renderer('bokeh')

def draw_chart_1():
    def marker(x,y):
        sel_point = hv.Points([[x,y]])
        return sel_point

    cv = hv.Curve(((0, 1, 2), (4, 4, 7))).opts(responsive=True, aspect=1)
    stream = hv.streams.Tap(source=cv, x=20, y=30)
    tap_dmap = hv.DynamicMap(marker, streams=[stream]).opts(color='red', marker='o', size=10, alpha=1, line_color='white',responsive=True)
    left_chart = pn.pane.HoloViews(cv * tap_dmap,
                                sizing_mode="stretch_both",
                                )
    return left_chart

def draw_chart_2():
    cv = hv.Curve(((0, 1, 2), (4, 4, 7))).opts(responsive=True)
    right_chart = pn.pane.HoloViews(cv,
                                sizing_mode="stretch_both"
                                )

    return right_chart

left_chart = draw_chart_1()
right_chart = draw_chart_2()

chart_row = pn.Row(pn.Column(left_chart, sizing_mode='stretch_both'),
                    pn.Spacer(width=20),
                    pn.Column(right_chart, sizing_mode='stretch_both'),
                    sizing_mode='stretch_both'
                    )

dashboard = pn.Column(chart_row,
                        sizing_mode="stretch_both",
                        min_width=900,
                        min_height=500,
                        margin=[10, 15, 0, 10],
                        background="yellow"
                        )

dashboard.servable()

I re-arranged the pattern a bit to remove the global variables, and I changed the marker to red circles instead of white x’s for troubleshooting, because those were hard to see on my screen. I think that moving the responsive=True and opts to the dynamic map rather than the hv.Points might have been the fix.

1 Like