# Giving Bokeh the Glow-Up It Deserves: Smooth Animations, Floating Tooltips

**URL:** <https://discourse.bokeh.org/t/giving-bokeh-the-glow-up-it-deserves-smooth-animations-floating-tooltips/12722>\
**Category:** Showcase\
**Created:** [May 11, 2026, 7:51pm UTC](https://discourse.bokeh.org/t/giving-bokeh-the-glow-up-it-deserves-smooth-animations-floating-tooltips/12722 "2026-05-11T19:51:32Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![mixstam1453](https://discourse.bokeh.org/user_avatar/discourse.bokeh.org/mixstam1453/32/7102_2.png) [@mixstam1453](https://discourse.bokeh.org/u/mixstam1453)\
**Post date:** [May 11, 2026, 7:51pm UTC](https://discourse.bokeh.org/t/giving-bokeh-the-glow-up-it-deserves-smooth-animations-floating-tooltips/12722/1 "2026-05-11T19:51:32Z")

</div>

**Bokeh visual improvements - animations, tooltips & KPI cards**

I made Bokeh charts look nicer. Bars grow in, lines draw themselves, bubbles pop, pie wedges sweep. Tooltips float and glide instead of snapping. KPI cards sit alongside your plots. Single HTML file, no server needed — just `show()` as usual.

Three files, three calls:

```auto
anim(p, easing="backOut", duration=800)
smooth_tip(p, src, mode="bar")
kpi_metric_card(label="Revenue", value="$9,150", delta="+12%", direction="up")

```

![peek1](https://discourse-uploads.bokeh.org/original/2X/f/f728bd9787ec7931363e8a36103ea1368ba81130.gif)  
see this: `https://github.com/mixstam1821/Bokeh_visual_improving/blob/main/dashboard.py`

For the rest plots see this file: `https://github.com/mixstam1821/Bokeh_visual_improving/blob/main/examples.py`

![Peek 2026-05-11 22-39](https://discourse-uploads.bokeh.org/original/2X/c/c411d189a457b65b09ca2f0aeaa2c733063e84ed.gif)

![Peek 2026-05-11 22-40](https://discourse-uploads.bokeh.org/original/2X/5/5c7324820aa8a9e9e1c30cc4bdf428b5f5eccd88.gif)  
 ![peek1](https://discourse-uploads.bokeh.org/original/2X/f/f728bd9787ec7931363e8a36103ea1368ba81130.gif)  
 ![Peek 2026-05-11 22-39s](https://discourse-uploads.bokeh.org/original/2X/8/81aa0b57c8e5f7071cc00dc23c25a2674d5e9e84.gif)  
 ![Peek 2026-05-11 22-48](https://discourse-uploads.bokeh.org/original/2X/c/ca2ab1c82e8399875d6aaeae2dc7a2833c8f14dc.gif)

Example for the lines:

```auto
n5 = 40
x5 = list(range(n5))
src5a = ColumnDataSource(dict(
    x=x5, y=[math.sin(i * 0.3) * 10 + 50 for i in x5],
    label=[f"<b>Series A</b><br>Value: {math.sin(i*0.3)*10+50:.1f}" for i in x5]
))
src5b = ColumnDataSource(dict(
    x=x5, y=[math.cos(i * 0.3) * 8 + 45 for i in x5],
    label=[f"<b>Series B</b><br>Value: {math.cos(i*0.3)*8+45:.1f}" for i in x5]
))
p5 = figure(title="5. Multi-line — click legend to re-animate", width=900, height=380,
            background_fill_color="white", x_range=(-1, n5 + 1))
r5a = p5.line('x', 'y', source=src5a, line_width=2.5, color="#FFC115", legend_label="Series A")
r5b = p5.line('x', 'y', source=src5b, line_width=2.5, color="#FF4CE7", legend_label="Series B")

p5.y_range.start, p5.y_range.end = 25, 70

p5.add_tools(HoverTool(tooltips=None, renderers=[r5a, r5b]))
# One combined tooltip for both
smooth_tip_multi_line(
    p5,
    sources=[src5a, src5b],
    title="X: {x}", 
)
anim(p5, easing="cubicInOut", duration=1400, line_tip=True, line_tip_color="#3498db")
mystyle(p5, cross = True)
show(row(row(p5,rmfocus(p5)), stylesheets=[get_gstyle()]))

```

👉 [github.com/mixstam1821/Bokeh\_visual\_improving](https://github.com/mixstam1821/Bokeh_visual_improving)

Feedback welcome!

---

<div class="post-metadata">

**Author:** ![Bryan](https://discourse.bokeh.org/user_avatar/discourse.bokeh.org/bryan/32/3625_2.png) [@Bryan](https://discourse.bokeh.org/u/Bryan)\
**Post date:** [May 15, 2026, 3:13pm UTC](https://discourse.bokeh.org/t/giving-bokeh-the-glow-up-it-deserves-smooth-animations-floating-tooltips/12722/2 "2026-05-15T15:13:24Z")

</div>

@mixstam1453 It would be amazing to have some of these features directly in Bokeh, would you be interested to make contributions directly to the library?

---

<div class="post-metadata">

**Author:** ![pipcob](https://discourse.bokeh.org/user_avatar/discourse.bokeh.org/pipcob/32/7666_2.png) [@pipcob](https://discourse.bokeh.org/u/pipcob)\
**Post date:** [May 17, 2026, 9:10am UTC](https://discourse.bokeh.org/t/giving-bokeh-the-glow-up-it-deserves-smooth-animations-floating-tooltips/12722/3 "2026-05-17T09:10:48Z")

</div>

That’s really nice work - I especially like the re-drawing lines, as I’m working on a project which involves a lot of line-graphs, and the “progress” so to speak, of these lines, from left to right, is critical to understanding some underlying biological processes. Is the speed of the animation controlled by the “duration” property?

But it’s all really nice work as I say, and the visual effects are compelling.

---

<div class="post-metadata">

**Author:** ![snerd7](https://discourse.bokeh.org/user_avatar/discourse.bokeh.org/snerd7/32/7669_2.png) [@snerd7](https://discourse.bokeh.org/u/snerd7)\
**Post date:** [May 21, 2026, 10:59pm UTC](https://discourse.bokeh.org/t/giving-bokeh-the-glow-up-it-deserves-smooth-animations-floating-tooltips/12722/4 "2026-05-21T22:59:19Z")

</div>

Hey @mixstam1453 , thanks for the great examples you’ve been posting lately, they are really awesome inspiration! I especially appreciated your super sunburst chart example from earlier this year.

I just wanted to offer something simple about the KPI cards, maybe you already know this: there is a great library “Panel” that is largely built on top of bokeh, they offer some base class “ReactiveHTML” with a bit more updating/interaction support baked in (eg new values, or click interaction, …)  
So, to change just the value/direction/etc on the KPI card, using ReactiveHTML the same object is preserved in the DOM. (at least i think so…)

[Examples](https://panel.holoviz.org/explanation/components/reactive_html_components.html#scripts)  
[API Reference](https://panel.holoviz.org/api/panel.reactive.html#panel.reactive.ReactiveHTML)

Perhaps it would make sense to offer the KPI cards to become a panel “Widget”?

---

<div class="post-metadata">

**Author:** ![mosc9575](https://discourse.bokeh.org/user_avatar/discourse.bokeh.org/mosc9575/32/7682_2.png) [@mosc9575](https://discourse.bokeh.org/u/mosc9575)\
**Post date:** [July 16, 2026, 7:34am UTC](https://discourse.bokeh.org/t/giving-bokeh-the-glow-up-it-deserves-smooth-animations-floating-tooltips/12722/5 "2026-07-16T07:34:33Z")

</div>

I just want to mention that a [GitHub issue](https://github.com/bokeh/bokeh/issues/15071) for this already exists.