streamlit-bokeh 3.9.0

Streamlit component that allows you to render Bokeh charts

streamlit-bokeh

A lightweight Python package that seamlessly integrates Bokeh plots into Streamlit apps, allowing for interactive, customizable, and responsive visualizations with minimal effort.

Filing Issues

Please file bug reports and enhancement requests through our main Streamlit repo.

🚀 Features

• Effortlessly embed Bokeh figures in Streamlit apps.
• Responsive layout support with use_container_width.
• Customizable themes (streamlit (which supports both light and dark mode) or Bokeh Themes)

---

📦 Installation

uv pip install streamlit-bokeh

Ensure you have Streamlit and Bokeh installed as well:

uv pip install streamlit bokeh

---

🛠️ Development

Prerequisites

• Python 3.10–3.13
• Node.js 24.x.y (see .nvmrc)
• uv (fast Python package manager)

1) Create and activate a virtual environment

uv venv .venv
source .venv/bin/activate

2) Install Python dependencies from pyproject.toml

# Minimal runtime install (editable)
uv pip install -e .

# Recommended for development (includes tests/tools)
uv pip install -e ".[devel]"

3) Install and build the frontend

cd streamlit_bokeh/frontend
corepack enable
yarn install
yarn build          # one-time build to produce frontend/build assets

# Optional: frontend dev server
# Use `yarn dev:v2` to utilize the Custom Component v2 frontend (recommended).
# Use `yarn dev:v1` to utilize the Custom Component v1 frontend (legacy).
yarn dev:v2

4) Run a local demo

streamlit run ./e2e_playwright/bokeh_chart_basics.py

5) Run tests

Python end-to-end tests (Playwright):

# Build the package
uv build
# Install the test dependencies
uv pip install -r e2e_playwright/test-requirements.txt
# Install browsers (first time only)
python -m playwright install --with-deps
# Run tests
pytest e2e_playwright -n auto

Frontend tests and type checks:

cd streamlit_bokeh/frontend
yarn test
yarn typecheck

6) Build the Python package (optional)

uv build
ls dist/

---

💡 Usage

Here's how to integrate a simple Bokeh line plot into your Streamlit app:

from bokeh.plotting import figure
from streamlit_bokeh import streamlit_bokeh

# Data
x = [1, 2, 3, 4, 5]
y = [6, 7, 2, 4, 5]

# Create Bokeh figure
YOUR_BOKEH_FIGURE = figure(title="Simple Line Example",
                           x_axis_label="x",
                           y_axis_label="y")
YOUR_BOKEH_FIGURE.line(x, y, legend_label="Trend", line_width=2)

# Render in Streamlit
streamlit_bokeh(YOUR_BOKEH_FIGURE, use_container_width=True, theme="streamlit", key="my_unique_key")

---

⚙️ API Reference

streamlit_bokeh(figure, use_container_width=False, theme='streamlit', key=None)

Parameters:

• figure (bokeh.plotting.figure): The Bokeh figure object to display.
• use_container_width (bool, optional): Whether to override the figure's native width with the width of the parent container. This is True by default.
• theme (str, optional): The theme for the plot. This can be one of the following strings:
  • "streamlit" (default): Matches Streamlit's current theme.
  • A Bokeh theme name including:
    • "caliber"
    • "light_minimal"
    • "dark_minimal"
    • "contrast"
• key (str, optional but recommended): An optional string to give this element a stable identity. If this is None (default), this element's identity will be determined based on the values of the other parameters.

---

🖼️ Example

streamlit run app.py

Where app.py contains:

import streamlit as st
from bokeh.plotting import figure
from streamlit_bokeh import streamlit_bokeh

# Sample Data
x = [1, 2, 3, 4, 5]
y = [2, 4, 8, 16, 32]

# Create Plot
p = figure(title="Exponential Growth", x_axis_label="x", y_axis_label="y")
p.line(x, y, legend_label="Growth", line_width=3, color="green")

# Display in Streamlit
streamlit_bokeh(p, use_container_width=True, key="plot1")

---

📚 Versioning

We designed the versioning scheme for this custom component to mirror the Bokeh version with the exception of the patch number. We reserve that so we can make bug fixes and new (mostly compatible) features.

For example, 3.6.x will mirror a version of Bokeh that's 3.6.y.

---

📝 Contributing

Feel free to file issues in our Streamlit Repository.

Contributions are welcome 🚀, however, please inform us before building a feature.

---

📄 License

This project is licensed under the Apache 2.0.

---

🙋 FAQ

Q: Can I embed multiple Bokeh plots on the same page?

• A: Yes! Just make sure each plot has a unique key.

Q: Does it support Bokeh widgets?

• A: Currently, streamlit-bokeh focuses on plots. For widget interactivity, consider combining with native Streamlit widgets.

Q: How do I adjust the plot size?

• A: Use use_container_width=True for responsive sizing, or manually set plot_width and plot_height in your Bokeh figure.

---

Happy Streamlit-ing! 🎉