Bokeh documentation — Bokeh 3.6.1 Documentation

<!DOCTYPE html> <html lang="en" data-content_root="./" data-theme="light"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta name="viewport" content="width=device-width, initial-scale=1" /> <meta property="og:title" content="Bokeh documentation" /> <meta property="og:type" content="website" /> <meta property="og:url" content="https://docs.bokeh.org/en/latest/index.html" /> <meta property="og:site_name" content="Bokeh" /> <meta property="og:description" content="Bokeh is a Python library for creating interactive visualizations for modern web browsers. It helps you build beautiful graphics, ranging from simple plots to complex dashboards with streaming data..." /> <meta property="og:image" content="http://static.bokeh.org/og/logotype-on-hex.png" /> <meta property="og:image:alt" content="Bokeh" /> <meta name="description" content="Bokeh is a Python library for creating interactive visualizations for modern web browsers. It helps you build beautiful graphics, ranging from simple plots to complex dashboards with streaming data..." /> <meta name="image" property="og:image" content="http://static.bokeh.org/og/logotype-on-hex.png"> <link rel="icon" sizes="16x16" href="https://static.bokeh.org/favicon/favicon-16x16.png" type="image/png"> <link rel="icon" sizes="32x32" href="https://static.bokeh.org/favicon/favicon-32x32.png" type="image/png"> <link rel="apple-touch-icon" sizes="180x180" href="https://static.bokeh.org/favicon/apple-touch-icon.png" type="image/png"> <title>Bokeh documentation — Bokeh 3.6.1 Documentation</title> <script data-cfasync="false"> document.documentElement.dataset.mode = localStorage.getItem("mode") || "light"; document.documentElement.dataset.theme = localStorage.getItem("theme") || "light"; </script>  <noscript> <style> .pst-js-only { display: none !important; } </style> </noscript>  <link href="_static/styles/theme.css?digest=26a4bc78f4c0ddb94549" rel="stylesheet" /> <link href="_static/styles/pydata-sphinx-theme.css?digest=26a4bc78f4c0ddb94549" rel="stylesheet" /> <link rel="stylesheet" type="text/css" href="_static/pygments.css?v=fa44fd50" /> <link rel="stylesheet" type="text/css" href="_static/copybutton.css?v=76b2166b" /> <link rel="stylesheet" type="text/css" href="_static/sphinx-design.min.css?v=95c83b7e" /> <link rel="stylesheet" type="text/css" href="_static/custom.css?v=13f4dcba" />  <script src="_static/scripts/fontawesome.js?digest=26a4bc78f4c0ddb94549"></script>  <link rel="preload" as="script" href="_static/scripts/bootstrap.js?digest=26a4bc78f4c0ddb94549" /> <link rel="preload" as="script" href="_static/scripts/pydata-sphinx-theme.js?digest=26a4bc78f4c0ddb94549" /> <script>const BOKEH_CURRENT_VERSION = '3.6.1';</script> <script src="_static/documentation_options.js?v=f731707b"></script> <script src="_static/doctools.js?v=9bcbadda"></script> <script src="_static/sphinx_highlight.js?v=dc90522c"></script> <script src="_static/clipboard.min.js?v=a7894cd8"></script> <script src="_static/copybutton.js?v=4ea706d9"></script> <script src="_static/custom.js?v=651ff418"></script> <script src="_static/design-tabs.js?v=f930bc37"></script> <script data-domain="docs.bokeh.org" defer="defer" src="https://plausible.io/js/script.js"></script> <script>DOCUMENTATION_OPTIONS.pagename = 'index';</script> <script> DOCUMENTATION_OPTIONS.theme_version = '0.16.0'; DOCUMENTATION_OPTIONS.theme_switcher_json_url = 'https://docs.bokeh.org/switcher.json'; DOCUMENTATION_OPTIONS.theme_switcher_version_match = '3.6.1'; DOCUMENTATION_OPTIONS.show_version_warning_banner = true; </script> <link rel="index" title="Index" href="genindex.html" /> <link rel="search" title="Search" href="search.html" /> <link rel="next" title="First steps" href="docs/first_steps.html" /> <meta name="viewport" content="width=device-width, initial-scale=1"/> <meta name="docsearch:language" content="en"/> <meta name="docsearch:version" content="3.6.1" /> </head> <body data-bs-spy="scroll" data-bs-target=".bd-toc-nav" data-offset="180" data-bs-root-margin="0px 0px -60%" data-default-mode="light"> <div id="pst-skip-link" class="skip-link d-print-none"><a href="#main-content">Skip to main content</a></div> <div id="pst-scroll-pixel-helper"></div> <button type="button" class="btn rounded-pill" id="pst-back-to-top"> <i class="fa-solid fa-arrow-up"></i>Back to top</button> <dialog id="pst-search-dialog"> <form class="bd-search d-flex align-items-center" action="search.html" method="get"> <i class="fa-solid fa-magnifying-glass"></i> <input type="search" class="form-control" name="q" placeholder="Search the docs ..." aria-label="Search the docs ..." autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"/> <span class="search-button__kbd-shortcut"><kbd class="kbd-shortcut__modifier">Ctrl</kbd>+<kbd>K</kbd></span> </form> </dialog> <div class="pst-async-banner-revealer d-none"> <aside id="bd-header-version-warning" class="d-none d-print-none" aria-label="Version warning"></aside> </div> <header class="bd-header navbar navbar-expand-lg bd-navbar d-print-none"> <div class="bd-header__inner bd-page-width"> <button class="pst-navbar-icon sidebar-toggle primary-toggle" aria-label="Site navigation"> <span class="fa-solid fa-bars"></span> </button> <div class=" navbar-header-items__start"> <div class="navbar-item"><a class="navbar-brand logo" href="#"> <img src="https://static.bokeh.org/branding/logos/bokeh-logo.svg" class="logo" alt="The Bokeh logo"> </a></div> <div class="navbar-item"> <div class="version-switcher__container dropdown pst-js-only"> <button id="pst-version-switcher-button-2" type="button" class="version-switcher__button btn btn-sm dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="listbox" aria-controls="pst-version-switcher-list-2" aria-label="Version switcher list" > Choose version  <span class="caret"></span> </button> <div id="pst-version-switcher-list-2" class="version-switcher__menu dropdown-menu list-group-flush py-0" role="listbox" aria-labelledby="pst-version-switcher-button-2">  </div> </div></div> </div> <div class=" navbar-header-items"> <div class="me-auto navbar-header-items__center"> <div class="navbar-item"> <nav> <ul class="bd-navbar-elements navbar-nav"> <li class="nav-item "> <a class="nav-link nav-internal" href="docs/first_steps.html"> First steps </a> </li> <li class="nav-item "> <a class="nav-link nav-internal" href="docs/user_guide.html"> User guide </a> </li> <li class="nav-item "> <a class="nav-link nav-internal" href="docs/gallery.html"> Gallery </a> </li> <li class="nav-item "> <a class="nav-link nav-internal" href="docs/reference.html"> Reference </a> </li> <li class="nav-item "> <a class="nav-link nav-internal" href="docs/dev_guide.html"> Contribute </a> </li> <li class="nav-item "> <a class="nav-link nav-internal" href="docs/releases.html"> Releases </a> </li> <li class="nav-item "> <a class="nav-link nav-external" href="https://mybinder.org/v2/gh/bokeh/tutorial/main?filepath=notebooks%2F01_introduction.ipynb"> Tutorial </a> </li> <li class="nav-item "> <a class="nav-link nav-external" href="https://discourse.bokeh.org"> Community </a> </li> </ul> </nav></div> </div> <div class="navbar-header-items__end"> <div class="navbar-item navbar-persistent--container"> <button class="btn search-button-field search-button__button pst-js-only" title="Search" aria-label="Search" data-bs-placement="bottom" data-bs-toggle="tooltip"> <i class="fa-solid fa-magnifying-glass"></i> <span class="search-button__default-text">Search</span> <span class="search-button__kbd-shortcut"><kbd class="kbd-shortcut__modifier">Ctrl</kbd>+<kbd class="kbd-shortcut__modifier">K</kbd></span> </button> </div> <div class="navbar-item"><ul class="navbar-icon-links" aria-label="Icon Links"> <li class="nav-item"> <a href="https://github.com/bokeh/bokeh" title="GitHub" class="nav-link pst-navbar-icon" rel="noopener" target="_blank" data-bs-toggle="tooltip" data-bs-placement="bottom"><i class="fa-brands fa-square-github fa-lg" aria-hidden="true"></i> <span class="sr-only">GitHub</span></a> </li> </ul></div> </div> </div> <div class="navbar-persistent--mobile"> <button class="btn search-button-field search-button__button pst-js-only" title="Search" aria-label="Search" data-bs-placement="bottom" data-bs-toggle="tooltip"> <i class="fa-solid fa-magnifying-glass"></i> <span class="search-button__default-text">Search</span> <span class="search-button__kbd-shortcut"><kbd class="kbd-shortcut__modifier">Ctrl</kbd>+<kbd class="kbd-shortcut__modifier">K</kbd></span> </button> </div> </div> </header> <div class="bd-container"> <div class="bd-container__inner bd-page-width"> <dialog id="pst-primary-sidebar-modal"></dialog> <div id="pst-primary-sidebar" class="bd-sidebar-primary bd-sidebar hide-on-wide"> <div class="sidebar-header-items sidebar-primary__section"> <div class="sidebar-header-items__center"> <div class="navbar-item"> <nav> <ul class="bd-navbar-elements navbar-nav"> <li class="nav-item "> <a class="nav-link nav-internal" href="docs/first_steps.html"> First steps </a> </li> <li class="nav-item "> <a class="nav-link nav-internal" href="docs/user_guide.html"> User guide </a> </li> <li class="nav-item "> <a class="nav-link nav-internal" href="docs/gallery.html"> Gallery </a> </li> <li class="nav-item "> <a class="nav-link nav-internal" href="docs/reference.html"> Reference </a> </li> <li class="nav-item "> <a class="nav-link nav-internal" href="docs/dev_guide.html"> Contribute </a> </li> <li class="nav-item "> <a class="nav-link nav-internal" href="docs/releases.html"> Releases </a> </li> <li class="nav-item "> <a class="nav-link nav-external" href="https://mybinder.org/v2/gh/bokeh/tutorial/main?filepath=notebooks%2F01_introduction.ipynb"> Tutorial </a> </li> <li class="nav-item "> <a class="nav-link nav-external" href="https://discourse.bokeh.org"> Community </a> </li> </ul> </nav></div> </div> <div class="sidebar-header-items__end"> <div class="navbar-item"><ul class="navbar-icon-links" aria-label="Icon Links"> <li class="nav-item"> <a href="https://github.com/bokeh/bokeh" title="GitHub" class="nav-link pst-navbar-icon" rel="noopener" target="_blank" data-bs-toggle="tooltip" data-bs-placement="bottom"><i class="fa-brands fa-square-github fa-lg" aria-hidden="true"></i> <span class="sr-only">GitHub</span></a> </li> </ul></div> </div> </div> <div class="sidebar-primary-items__end sidebar-primary__section"> </div> <div id="rtd-footer-container"></div> </div> <main id="main-content" class="bd-main" role="main"> <div class="bd-content"> <div class="bd-article-container"> <div class="bd-header-article d-print-none"></div> <div id="searchbox"></div> <article class="bd-article"> <section id="bokeh-documentation"> <span id="about"></span><h1>Bokeh documentation<a class="headerlink" href="#bokeh-documentation" title="Link to this heading">#</a></h1> <p>Bokeh is a Python library for creating interactive visualizations for modern web browsers. It helps you build beautiful graphics, ranging from simple plots to complex dashboards with streaming datasets. With Bokeh, you can create JavaScript-powered visualizations without writing any JavaScript yourself.</p> <div> <form class="bd-search align-items-center" action="search.html" method="get"> <input type="search" class="form-control search-front-page" name="q" id="search-input" placeholder="🔍 Search the docs ..." aria-label="Search the docs ..." autocomplete="off"> </form> </div><section id="finding-the-right-documentation-resources"> <h2>Finding the right documentation resources<a class="headerlink" href="#finding-the-right-documentation-resources" title="Link to this heading">#</a></h2> <p>Bokeh’s documentation consists of several components:</p> <div class="sd-container-fluid sd-sphinx-override sd-mb-4 docutils"> <div class="sd-row sd-row-cols-1 sd-row-cols-xs-1 sd-row-cols-sm-1 sd-row-cols-md-3 sd-row-cols-lg-3 docutils"> <div class="sd-col sd-d-flex-row docutils"> <div class="sd-card sd-sphinx-override sd-w-100 sd-shadow-sm docutils"> <div class="sd-card-header docutils"> <p class="sd-card-text">If you are new to Bokeh</p> </div> <div class="sd-card-body docutils"> <p class="sd-card-text">Follow these guides to get started:</p> <ul class="simple"> <li><p class="sd-card-text"><a class="reference internal" href="docs/first_steps.html#first-steps"><span class="std std-ref">First steps</span></a>: simple tutorials that walk you through installing Bokeh and creating your first visualizations.</p></li> <li><p class="sd-card-text"><a class="reference internal" href="docs/user_guide.html#userguide"><span class="std std-ref">User guide</span></a>: explanations of all key functionalities of Bokeh and how to use them. Includes several standalone examples.</p></li> </ul> </div> </div> </div> <div class="sd-col sd-d-flex-row docutils"> <div class="sd-card sd-sphinx-override sd-w-100 sd-shadow-sm docutils"> <div class="sd-card-header docutils"> <p class="sd-card-text">If you have some basic knowledge of Bokeh</p> </div> <div class="sd-card-body docutils"> <p class="sd-card-text">Learn more by exploring examples:</p> <ul class="simple"> <li><p class="sd-card-text"><a class="reference internal" href="docs/gallery.html#gallery"><span class="std std-ref">Gallery</span></a>: a collection of examples with source code.</p></li> <li><p class="sd-card-text"><a class="reference external" href="https://mybinder.org/v2/gh/bokeh/bokeh-notebooks/HEAD?labpath=index.ipynb">Interactive tutorial notebooks</a>: a collection of interactive notebooks to experiment with all elements of Bokeh.</p></li> <li><p class="sd-card-text"><a class="reference internal" href="docs/user_guide.html#userguide"><span class="std std-ref">User guide</span></a>: explanations of all key functionalities of Bokeh and how to use them, including examples.</p></li> </ul> </div> </div> </div> <div class="sd-col sd-d-flex-row docutils"> <div class="sd-card sd-sphinx-override sd-w-100 sd-shadow-sm docutils"> <div class="sd-card-header docutils"> <p class="sd-card-text">If you need more advanced information</p> </div> <div class="sd-card-body docutils"> <p class="sd-card-text">Get to know every aspect of Bokeh:</p> <ul class="simple"> <li><p class="sd-card-text"><a class="reference internal" href="docs/reference.html#refguide"><span class="std std-ref">Reference guide</span></a>: detailed information about all of Bokeh’s components.</p></li> <li><p class="sd-card-text"><a class="reference internal" href="docs/dev_guide.html#contributor-guide"><span class="std std-ref">Contributor guide</span></a>: information on the various ways you can contribute to the Bokeh project.</p></li> </ul> </div> </div> </div> </div> </div> </section> <section id="connecting-with-the-bokeh-community"> <h2>Connecting with the Bokeh community<a class="headerlink" href="#connecting-with-the-bokeh-community" title="Link to this heading">#</a></h2> <p>There are various ways to get in touch with the <a class="reference external" href="https://bokeh.org/community/">Bokeh community</a>:</p> <ul class="simple"> <li><p>The <a class="reference external" href="https://discourse.bokeh.org">Bokeh Discourse</a> is the best place to ask usage questions and is a great way to get feedback from other users on how to approach a problem.</p></li> <li><p>Questions involving pandas or other libraries may find a wider audience by posting with the <a class="reference external" href="https://stackoverflow.com/questions/tagged/bokeh">“bokeh” tag on Stack Overflow</a>.</p></li> <li><p>If you think you’ve found a bug, or would like to request a feature, please report an issue at <a class="reference external" href="https://github.com/bokeh/bokeh">Bokeh’s GitHub repository</a>.</p></li> </ul> <p>You can also find more information about Bokeh on <a class="reference external" href="https://medium.com/bokeh">Medium</a>, and <a class="reference external" href="https://www.linkedin.com/company/project-bokeh/">LinkedIn</a>.</p> <div class="toctree-wrapper compound"> </div> <a class="reference external image-reference" href="docs/gallery.html"><img alt="A collage of 36 thumbnails of Bokeh plots" src="_images/bokeh-hero.png" style="width: 100%;" /> </a> </section> </section> </article> <footer class="prev-next-footer d-print-none"> <div class="prev-next-area"> <a class="right-next" href="docs/first_steps.html" title="next page"> <div class="prev-next-info"> <p class="prev-next-subtitle">next</p> <p class="prev-next-title">First steps</p> </div> <i class="fa-solid fa-angle-right"></i> </a> </div> </footer> </div> </div> <footer class="bd-footer-content"> </footer> </main> </div> </div>  <script defer src="_static/scripts/bootstrap.js?digest=26a4bc78f4c0ddb94549"></script> <script defer src="_static/scripts/pydata-sphinx-theme.js?digest=26a4bc78f4c0ddb94549"></script> <footer class="bd-footer"><div class="container-fluid p-0 links"> <div class="container"> <div class="row"> <div class="col-lg-3 col-md-6 col-sm-4 links-item"> <h6>Project</h6> <ul class="nav flex-column"> <li class="nav-item"> <a class="nav-link" href="https://bokeh.org/roadmap/">Roadmap</a> </li> <li class="nav-item"> <a class="nav-link" href="https://github.com/bokeh/bokeh/wiki/BEP-4:-Project-Roles">Team</a> </li> <li class="nav-item"> <a class="nav-link" href="https://bokeh.org/branding/">Branding</a> </li> </ul> </div> <div class="col-lg-3 col-md-6 col-sm-4 links-item"> <h6>Documentation</h6> <ul class="nav flex-column"> <li class="nav-item"> <a class="nav-link" href="https://docs.bokeh.org/en/latest/docs/user_guide.html">User Guide</a> </li> <li class="nav-item"> <a class="nav-link" href="https://docs.bokeh.org/en/latest/docs/gallery.html">Gallery</a> </li> <li class="nav-item"> <a class="nav-link" href="https://docs.bokeh.org/en/latest/docs/reference.html">Reference Guide</a> </li> </ul> </div> <div class="col-lg-3 col-md-6 col-sm-4 links-item"> <h6>Hands On</h6> <ul class="nav flex-column"> <li class="nav-item"> <a class="nav-link" href="https://mybinder.org/v2/gh/bokeh/bokeh-notebooks/master?filepath=tutorial%2F00%20-%20Introduction%20and%20Setup.ipynb">Tutorials</a> </li> <li class="nav-item"> <a class="nav-link" href="https://demo.bokeh.org">Demos</a> </li> <li class="nav-item"> <a class="nav-link" href="https://bokeh.org/community/">Support</a> </li> </ul> </div> <div class="col-lg-3 col-md-6 col-sm-4 links-item"> <h6>Contribute</h6> <ul class="nav flex-column"> <li class="nav-item"> <a class="nav-link" href="https://github.com/bokeh/bokeh">GitHub</a> </li> <li class="nav-item"> <a class="nav-link" href="https://docs.bokeh.org/en/latest/docs/dev_guide.html">Contributor Guide</a> </li> <li class="nav-item"> <a class="nav-link" href="https://bokeh.org/sponsor/">Sponsor</a> </li> </ul> </div> </div> </div> </div> <div class="container-fluid p-0 copyright"> <div class="container py-2"> <div class="row"> <div class="col-md-10"> <p class="m-0"> Bokeh is a fiscally sponsored project of <a href="https://numfocus.org">NumFOCUS</a>, a nonprofit dedicated to supporting the open-source scientific computing community. Donations help pay for cloud hosting costs, travel, and other project needs. </p> <p class="m-0"> ©2024 Bokeh Contributors. The website content uses the <a href="https://github.com/bokeh/demo.bokeh.org/blob/main/LICENSE.txt">BSD License</a> and is covered by the <a href="https://github.com/bokeh/bokeh/blob/main/docs/CODE_OF_CONDUCT.md">Bokeh Code of Conduct</a>. </p> </div> <div class="col-md-2"> <a class="btn btn-primary" href="https://numfocus.org/donate-to-bokeh">Donate</a> </div> </div> </div> </div> </footer> </body> </html>

CINXE.COM

Bokeh documentation — Bokeh 3.6.1 Documentation