Skillversitas

Embedding Plots and Apps

Bokeh plots are embeddable: you can drop a rendered plot into an existing web page, embed multiple plots in one document, or integrate a Bokeh app into a larger web application. The embed module provides the functions that produce the HTML/JS snippet and the corresponding data payload.

Embedding a Single Plot in a Page

from bokeh.plotting import figure
from bokeh.embed import component_html
from bokeh.resources import CDN

p = figure(width=400, height=250, title="Embedded chart")
p.circle([1, 2, 3], [1, 2, 3])

# produce a self-contained snippet (inlines the Bokeh JS via CDN):
snippet = component_html(p, resources=CDN)

page = '''
<html><head><title>My page</title></head>
<body>
  <h1>Report</h1>
  %s
  <p>More text around the chart.</p>
</body></html>
''' % snippet

with open("page.html", "w") as f:
    f.write(page)

Multiple Components in One Page

from bokeh.embed import components

script, divs = components([p1, p2])

page = '''
<html><head>%s</head>
<body>
  %s
  %s
</body></html>
''' % (script, divs[0], divs[1])

components returns a shared script block plus one div per component - the correct way to embed several plots so the Bokeh JS loads once.

Iframe Embedding a Server App

For a Bokeh server application, the simplest integration is an iframe pointing at the app URL:

<iframe src="http://localhost:5006/sales" width="100%" height="500"></iframe>

Integrating with a Web Framework

  • Serve the component_html snippet from a Flask/FastAPI route that renders a template with the snippet injected.
  • For live updates, prefer hosting the full Bokeh server app (or use the embed docs' "server" pattern) rather than re-rendering static HTML on every change.
  • Keep a stable div id per chart so re-renders replace, not duplicate, the chart.

Summary

Embed Bokeh charts with component_html for a single self-contained snippet, components for multiple charts sharing one script block, or an iframe for a full Bokeh server app. Inject the snippet into your existing page or framework template, and keep stable container ids so updates replace the chart cleanly.