PageSourceSearch

https://docs.bokeh.org/en/latest/docs/first_steps.html

html bokeh.org collected 2026-10-01 08:41:10 UTC 30,834 bytes, 782 lines download raw bytes

1
2<!DOCTYPE html>
3
4
5<html lang="en" data-content_root="../" data-theme="light">
6
7  <head>
8    <meta charset="utf-8" />
9    <meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta name="viewport" content="width=device-width, initial-scale=1" />
10<meta property="og:title" content="First steps" />
11<meta property="og:type" content="website" />
12<meta property="og:url" content="https://docs.bokeh.org/en/latest/docs/first_steps.html" />
13<meta property="og:site_name" content="Bokeh" />
14<meta property="og:description" content="Installing Bokeh: Bokeh is officially supported and tested on Python 3.12 and above (CPython). You can install Bokeh with either conda or pip: Installing with pip Use this command to install Bokeh:..." />
15<meta property="og:image" content="http://static.bokeh.org/og/logotype-on-hex.png" />
16<meta property="og:image:alt" content="Bokeh" />
17<meta name="description" content="Installing Bokeh: Bokeh is officially supported and tested on Python 3.12 and above (CPython). You can install Bokeh with either conda or pip: Installing with pip Use this command to install Bokeh:..." />
18<meta name="image" property="og:image" content="http://static.bokeh.org/og/logotype-on-hex.png">
19    <link rel="icon" sizes="16x16" href="https://static.bokeh.org/favicon/favicon-16x16.png" type="image/png">
20    <link rel="icon" sizes="32x32" href="https://static.bokeh.org/favicon/favicon-32x32.png" type="image/png">
21    <link rel="apple-touch-icon" sizes="180x180" href="https://static.bokeh.org/favicon/apple-touch-icon.png" type="image/png">
22    <title>First steps &#8212; Bokeh 3.10.0 Documentation</title>
23  
24  
25  
26  
26<script data-cfasync="false">
27    document.documentElement.dataset.mode = localStorage.getItem("mode") || "light";
28    document.documentElement.dataset.theme = localStorage.getItem("theme") || "light";
29  </script>
29
30  <!--
31    this give us a css class that will be invisible only if js is disabled
32  -->
33  <noscript>
34    <style>
35      .pst-js-only { display: none !important; }
36
37    </style>
38  </noscript>
39  
40  <!-- Loaded before other Sphinx assets -->
41  <link href="../_static/styles/theme.css?digest=90905a2f556bf617f1a9" rel="stylesheet" />
42<link href="../_static/styles/pydata-sphinx-theme.css?digest=90905a2f556bf617f1a9" rel="stylesheet" />
43
44    <link rel="stylesheet" type="text/css" href="../_static/pygments.css?v=03e43079" />
45    <link rel="stylesheet" type="text/css" href="../_static/copybutton.css?v=76b2166b" />
46    <link rel="stylesheet" type="text/css" href="../_static/sphinx-design.min.css?v=95c83b7e" />
47    <link rel="stylesheet" type="text/css" href="../_static/custom.css?v=a38fef48" />
48  
49  <!-- So that users can add custom icons -->
50  
50<script defer src="../_static/scripts/fontawesome.js?digest=90905a2f556bf617f1a9"></script>
50
51  <!-- Pre-loaded scripts that we'll load fully later -->
52  <link rel="preload" as="script" href="../_static/scripts/bootstrap.js?digest=90905a2f556bf617f1a9" />
53<link rel="preload" as="script" href="../_static/scripts/pydata-sphinx-theme.js?digest=90905a2f556bf617f1a9" />
54
55    
55<script>const BOKEH_CURRENT_VERSION = '3.10.0';</script>
55
56    
56<script src="../_static/documentation_options.js?v=f8d09eac"></script>
56
57    
57<script src="../_static/doctools.js?v=fd6eb6e6"></script>
57
58    
58<script src="../_static/sphinx_highlight.js?v=6ffebe34"></script>
58
59    
59<script src="../_static/clipboard.min.js?v=a7894cd8"></script>
59
60    
60<script src="../_static/copybutton.js?v=4ea706d9"></script>
60
61    
61<script src="../_static/custom.js?v=04c79020"></script>
61
62    
62<script src="../_static/design-tabs.js?v=f930bc37"></script>
62
63    
63<script data-domain="docs.bokeh.org" defer="defer" src="https://plausible.io/js/script.js"></script>
63
64    
64<script>DOCUMENTATION_OPTIONS.pagename = 'docs/first_steps';</script>
64
65    
65<script>
66        DOCUMENTATION_OPTIONS.theme_version = '0.20.0';
67        DOCUMENTATION_OPTIONS.theme_switcher_json_url = 'https://docs.bokeh.org/switcher.json';
68        DOCUMENTATION_OPTIONS.theme_switcher_version_match = '3.10.0';
69        DOCUMENTATION_OPTIONS.show_version_warning_banner =
70            true;
71        </script>
71
72    
72<script>DOCUMENTATION_OPTIONS.search_as_you_type = false;</script>
72
73    <link rel="index" title="Index" href="../genindex.html" />
74    <link rel="search" title="Search" href="../search.html" />
75    <link rel="next" title="Installation details" href="first_steps/installation.html" />
76    <link rel="prev" title="Bokeh documentation" href="../index.html" />
77  <meta name="viewport" content="width=device-width, initial-scale=1"/>
78  <meta name="docsearch:language" content="en"/>
79  <meta name="docsearch:version" content="3.10.0" />
80  
81    
82    
82<script src="../_static/searchtools.js"></script>
82
83    
83<script src="../_static/language_data.js"></script>
83
84    
84<script src="../searchindex.js"></script>
84
85  
86  </head>
87  <body data-default-mode="light">
88  
89  
90  <div id="pst-skip-link" class="skip-link d-print-none"><a href="#main-content">Skip to main content</a></div>
91
92  
93  <div id="pst-scroll-pixel-helper"></div>
94  
95  <button type="button" class="btn rounded-pill" id="pst-back-to-top">
96    <i class="fa-solid fa-arrow-up"></i>Back to top</button>
97  
98  
99  
100  
101  <dialog id="pst-search-dialog">
102    
103<form class="bd-search d-flex align-items-center"
104      action="../search.html"
105      method="get">
106  <i class="fa-solid fa-magnifying-glass"></i>
107  <input type="search"
108         class="form-control"
109         name="q"
110         placeholder="Search the docs ..."
111         aria-label="Search the docs ..."
112         autocomplete="off"
113         autocorrect="off"
114         autocapitalize="off"
115         spellcheck="false"/>
116  <span class="search-button__kbd-shortcut"><kbd class="kbd-shortcut__modifier">Ctrl</kbd>+<kbd>K</kbd></span>
117</form>
118  </dialog>
119
120  <div class="pst-async-banner-revealer d-none">
121  <aside id="bd-header-version-warning" class="d-none d-print-none" aria-label="Version warning"></aside>
122</div>
123
124  
125    <header id="pst-header" class="bd-header navbar navbar-expand-lg bd-navbar d-print-none">
126<div class="bd-header__inner bd-page-width">
127  <button class="pst-navbar-icon sidebar-toggle primary-toggle" aria-label="Site navigation">
128    <span class="fa-solid fa-bars"></span>
129  </button>
130  
131  
132  <div class=" navbar-header-items__start">
133    
134      <div class="navbar-item"><a class="navbar-brand logo" href="../index.html">
135  <img src="https://static.bokeh.org/branding/logos/bokeh-logo.svg" class="logo" alt="The Bokeh logo">
136</a></div>
137    
138      <div class="navbar-item">
139<div class="version-switcher__container dropdown pst-js-only">
140  <button id="pst-version-switcher-button-2"
141    type="button"
142    class="version-switcher__button btn btn-sm dropdown-toggle"
143    data-bs-toggle="dropdown"
144    aria-haspopup="listbox"
145    aria-controls="pst-version-switcher-list-2"
146    aria-label="Version switcher list"
147  >
148    Choose version  <!-- this text may get changed later by javascript -->
149    <span class="caret"></span>
150  </button>
151  <div id="pst-version-switcher-list-2"
152    class="version-switcher__menu dropdown-menu list-group-flush py-0"
153    role="listbox" aria-labelledby="pst-version-switcher-button-2">
154    <!-- dropdown will be populated by javascript on page load -->
155  </div>
156</div></div>
157    
158  </div>
159  
160  <div class=" navbar-header-items">
161    
162    <div class="me-auto navbar-header-items__center">
163      
164        <div class="navbar-item">
165<nav>
166  <ul class="bd-navbar-elements navbar-nav">
167    
168<li class="nav-item current active">
169  <a class="nav-link nav-internal" href="#">
170    First steps
171  </a>
172</li>
173
174
175<li class="nav-item ">
176  <a class="nav-link nav-internal" href="user_guide.html">
177    User guide
178  </a>
179</li>
180
181
182<li class="nav-item ">
183  <a class="nav-link nav-internal" href="gallery.html">
184    Gallery
185  </a>
186</li>
187
188
189<li class="nav-item ">
190  <a class="nav-link nav-internal" href="reference.html">
191    Reference
192  </a>
193</li>
194
195
196<li class="nav-item ">
197  <a class="nav-link nav-internal" href="dev_guide.html">
198    Contribute
199  </a>
200</li>
201
202
203<li class="nav-item ">
204  <a class="nav-link nav-internal" href="releases.html">
205    Releases
206  </a>
207</li>
208
209
210<li class="nav-item ">
211  <a class="nav-link nav-external" href="https://github.com/bokeh/tutorial/">
212    Tutorial
213  </a>
214</li>
215
216
217<li class="nav-item ">
218  <a class="nav-link nav-external" href="https://discourse.bokeh.org">
219    Community
220  </a>
221</li>
222
223  </ul>
224</nav></div>
225      
226    </div>
227    
228    
229    <div class="navbar-header-items__end">
230      
231        <div class="navbar-item navbar-persistent--container">
232          
233
234<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">
235 <i class="fa-solid fa-magnifying-glass"></i>
236 <span class="search-button__default-text">Search</span>
237 <span class="search-button__kbd-shortcut"><kbd class="kbd-shortcut__modifier">Ctrl</kbd>+<kbd class="kbd-shortcut__modifier">K</kbd></span>
238</button>
239        </div>
240      
241      
242        <div class="navbar-item"><ul class="navbar-icon-links"
243    aria-label="Icon Links">
244        <li class="nav-item">
245          
246          
247          
248          
249          
250          
251          
252          
253          <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="visually-hidden">GitHub</span></a>
254        </li>
255</ul></div>
256      
257    </div>
258    
259  </div>
260  
261  
262    <div class="navbar-persistent--mobile">
263
264<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">
265 <i class="fa-solid fa-magnifying-glass"></i>
266 <span class="search-button__default-text">Search</span>
267 <span class="search-button__kbd-shortcut"><kbd class="kbd-shortcut__modifier">Ctrl</kbd>+<kbd class="kbd-shortcut__modifier">K</kbd></span>
268</button>
269    </div>
270  
271
272  
273</div>
274
275    </header>
276  
277
278  <div class="bd-container">
279    <div class="bd-container__inner bd-page-width">
280      
281      
282      
283      <dialog id="pst-primary-sidebar-modal"></dialog>
284      <div id="pst-primary-sidebar" class="bd-sidebar-primary bd-sidebar">
285        
286
287  
288  <div class="sidebar-header-items sidebar-primary__section">
289    
290    
291      <div class="sidebar-header-items__center">
292        
293          
294          
295            <div class="navbar-item">
296<nav>
297  <ul class="bd-navbar-elements navbar-nav">
298    
299<li class="nav-item current active">
300  <a class="nav-link nav-internal" href="#">
301    First steps
302  </a>
303</li>
304
305
306<li class="nav-item ">
307  <a class="nav-link nav-internal" href="user_guide.html">
308    User guide
309  </a>
310</li>
311
312
313<li class="nav-item ">
314  <a class="nav-link nav-internal" href="gallery.html">
315    Gallery
316  </a>
317</li>
318
319
320<li class="nav-item ">
321  <a class="nav-link nav-internal" href="reference.html">
322    Reference
323  </a>
324</li>
325
326
327<li class="nav-item ">
328  <a class="nav-link nav-internal" href="dev_guide.html">
329    Contribute
330  </a>
331</li>
332
333
334<li class="nav-item ">
335  <a class="nav-link nav-internal" href="releases.html">
336    Releases
337  </a>
338</li>
339
340
341<li class="nav-item ">
342  <a class="nav-link nav-external" href="https://github.com/bokeh/tutorial/">
343    Tutorial
344  </a>
345</li>
346
347
348<li class="nav-item ">
349  <a class="nav-link nav-external" href="https://discourse.bokeh.org">
350    Community
351  </a>
352</li>
353
354  </ul>
355</nav></div>
356          
357        
358      </div>
359    
360    
361    
362      <div class="sidebar-header-items__end">
363        
364          <div class="navbar-item"><ul class="navbar-icon-links"
365    aria-label="Icon Links">
366        <li class="nav-item">
367          
368          
369          
370          
371          
372          
373          
374          
375          <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="visually-hidden">GitHub</span></a>
376        </li>
377</ul></div>
378        
379      </div>
380    
381  </div>
382  
383    <div class="sidebar-primary-items__start sidebar-primary__section">
384        <div class="sidebar-primary-item pst-sidebar-collapse"><button id="pst-collapse-sidebar-button" aria-expanded="true" aria-controls="pst-primary-sidebar">
385  <svg class="pst-icon" role="img" aria-hidden="true" focusable="false" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
386    <path fill="currentColor" d="M3 15.5C2.36232 15.5 1.74874 15.2564 1.28478 14.8189C0.820828 14.3815 0.541576 13.7832 0.504167 13.1467L0.5 13L0.5 3C0.499965 2.36232 0.743605 1.74874 1.18107 1.28478C1.61854 0.820828 2.21676 0.541576 2.85333 0.504167L3 0.5L13 0.5C13.6377 0.499965 14.2513 0.743605 14.7152 1.18107C15.1792 1.61854 15.4584 2.21676 15.4958 2.85333L15.5 3L15.5 13C15.5 13.6377 15.2564 14.2513 14.8189 14.7152C14.3815 15.1792 13.7832 15.4584 13.1467 15.4958L13 15.5L3 15.5ZM3 13.8333L10.5 13.8333L10.5 2.16667L3 2.16667C2.79589 2.16669 2.59889 2.24163 2.44636 2.37726C2.29383 2.5129 2.19638 2.69979 2.1725 2.9025L2.16667 3L2.16667 13C2.16669 13.2041 2.24163 13.4011 2.37726 13.5536C2.5129 13.7062 2.69979 13.8036 2.9025 13.8275L3 13.8333ZM6.65583 10.325L6.5775 10.2558L4.91083 8.58917C4.76735 8.44567 4.68116 8.25476 4.66843 8.05223C4.65569 7.84971 4.71729 7.6495 4.84167 7.48917L4.91083 7.41083L6.5775 5.74417C6.72747 5.59471 6.9287 5.50794 7.14032 5.50148C7.35194 5.49502 7.55809 5.56935 7.7169 5.70937C7.8757 5.8494 7.97525 6.04463 7.99533 6.25539C8.01541 6.46616 7.95451 6.67667 7.825 6.84417L7.75583 6.9225L6.67917 8L7.75583 9.0775C7.89931 9.22099 7.98551 9.41191 7.99824 9.61443C8.01097 9.81695 7.94938 10.0172 7.825 10.1775L7.75583 10.2558C7.61234 10.3993 7.42142 10.4855 7.2189 10.4982C7.01638 10.511 6.81617 10.4494 6.65583 10.325Z"/>
387  </svg>
388  <span class="pst-collapse-sidebar-label">Collapse Sidebar</span>
389  <span class="pst-expand-sidebar-label">Expand Sidebar</span>
390</button></div>
391        <div class="sidebar-primary-item">
392
393<nav class="bd-docs-nav bd-links"
394     aria-label="Section Navigation">
395  <p class="bd-links__title" role="heading" aria-level="1">Section Navigation</p>
396  <div class="bd-toc-item navbar-nav"><ul class="nav bd-sidenav">
397<li class="toctree-l1"><a class="reference internal" href="first_steps/installation.html">Installation details</a></li>
398<li class="toctree-l1"><a class="reference internal" href="first_steps/first_steps_1.html">First steps 1: Creating a line chart</a></li>
399<li class="toctree-l1"><a class="reference internal" href="first_steps/first_steps_2.html">First steps 2: Adding and customizing renderers</a></li>
400<li class="toctree-l1"><a class="reference internal" href="first_steps/first_steps_3.html">First steps 3: Adding legends, text, and annotations</a></li>
401<li class="toctree-l1"><a class="reference internal" href="first_steps/first_steps_4.html">First steps 4: Customizing your plot</a></li>
402<li class="toctree-l1"><a class="reference internal" href="first_steps/first_steps_5.html">First steps 5: Vectorizing glyph properties</a></li>
403<li class="toctree-l1"><a class="reference internal" href="first_steps/first_steps_6.html">First steps 6: Combining plots</a></li>
404<li class="toctree-l1"><a class="reference internal" href="first_steps/first_steps_7.html">First steps 7: Displaying and exporting</a></li>
405<li class="toctree-l1"><a class="reference internal" href="first_steps/first_steps_8.html">First steps 8: Providing and filtering data</a></li>
406<li class="toctree-l1"><a class="reference internal" href="first_steps/first_steps_9.html">First steps 9: Using widgets</a></li>
407</ul>
408</div>
409</nav></div>
410    </div>
411  
412  
413  <div class="sidebar-primary-items__end sidebar-primary__section">
414      <div class="sidebar-primary-item">
415<div id="ethical-ad-placement"
416      class="flat"
417      data-ea-publisher="readthedocs"
418      data-ea-type="readthedocs-sidebar"
419      data-ea-manual="true">
420</div></div>
421  </div>
422
423
424      </div>
425      
426      <main id="main-content" class="bd-main" role="main">
427        
428        
429          <div class="bd-content">
430            <div class="bd-article-container">
431              
432              <div class="bd-header-article d-print-none">
433<div class="header-article-items header-article__inner">
434  
435    <div class="header-article-items__start">
436      
437        <div class="header-article-item">
438
439<nav aria-label="Breadcrumb" class="d-print-none">
440  <ul class="bd-breadcrumbs">
441    
442    <li class="breadcrumb-item breadcrumb-home">
443      <a href="../index.html" class="nav-link" aria-label="Home">
444        <i class="fa-solid fa-home"></i>
445      </a>
446    </li>
447    <li class="breadcrumb-item active" aria-current="page"><span class="ellipsis">First steps</span></li>
448  </ul>
449</nav>
450</div>
451      
452    </div>
453  
454  
455</div>
456</div>
457              
458              
459              
460                
461<div id="searchbox"></div>
462                <article class="bd-article">
463                  
464  <section id="first-steps">
465<span id="id1"></span><h1>First steps<a class="headerlink" href="#first-steps" title="Link to this heading">#</a></h1>
466<div class="toctree-wrapper compound">
467</div>
468<section id="installing-bokeh">
469<span id="first-steps-installing"></span><h2>Installing Bokeh<a class="headerlink" href="#installing-bokeh" title="Link to this heading">#</a></h2>
470<p>Bokeh is officially supported and tested on Python 3.12 and
471above (CPython).</p>
472<p>You can install Bokeh with either <code class="docutils literal notranslate"><span class="pre">conda</span></code> or <code class="docutils literal notranslate"><span class="pre">pip</span></code>:</p>
473<div class="sd-container-fluid sd-sphinx-override sd-mb-4 docutils">
474<div class="sd-row sd-row-cols-1 sd-row-cols-xs-1 sd-row-cols-sm-1 sd-row-cols-md-2 sd-row-cols-lg-2 docutils">
475<div class="sd-col sd-d-flex-row docutils">
476<div class="sd-card sd-sphinx-override sd-w-100 sd-shadow-sm docut
476ils">
477<div class="sd-card-header docutils">
478<p class="sd-card-text">Installing with <code class="docutils literal notranslate"><span class="pre">pip</span></code></p>
479</div>
480<div class="sd-card-body docutils">
481<p class="sd-card-text">Use this command to install Bokeh:</p>
482<div class="highlight-sh notranslate"><div class="highlight"><pre><span></span>pip<span class="w"> </span>install<span class="w"> </span>bokeh
483</pre></div>
484</div>
485</div>
486</div>
487</div>
488<div class="sd-col sd-d-flex-row docutils">
489<div class="sd-card sd-sphinx-override sd-w-100 sd-shadow-sm docutils">
490<div class="sd-card-header docutils">
491<p class="sd-card-text">Installing with <code class="docutils literal notranslate"><span class="pre">conda</span></code></p>
492</div>
493<div class="sd-card-body docutils">
494<p class="sd-card-text">Use this command to install Bokeh:</p>
495<div class="highlight-sh notranslate"><div class="highlight"><pre><span></span>conda<span class="w"> </span>install<span class="w"> </span>bokeh
496</pre></div>
497</div>
498<p class="sd-card-text">Conda requires either <a class="reference external" href="https://www.anaconda.com/products/individual#Downloads">Anaconda</a> or <a class="reference external" href="https://docs.conda.io/en/latest/miniconda.html">Miniconda</a> to be installed on your
499system.</p>
500</div>
501</div>
502</div>
503</div>
504</div>
505<p>For more detailed information on installing and potential problems you might
506encounter, go to the <a class="reference internal" href="first_steps/installation.html#installation"><span class="std std-ref">Installation details</span></a> section.</p>
507</section>
508<section id="first-steps-guides">
509<span id="first-steps-overview"></span><h2>First steps guides<a class="headerlink" href="#first-steps-guides" title="Link to this heading">#</a></h2>
510<p>Follow these guides to quickly learn about the most important features and
511capabilities of Bokeh.</p>
512<p>The first steps guides are for anybody who is new to Bokeh. The only
513prerequisites for using these guides are a basic understanding of Python and a
514working <a class="reference internal" href="#first-steps-installing"><span class="std std-ref">installation</span></a> of Bokeh.</p>
515<p>The first steps guides include lots of examples that you can copy to your
516development environment. There are also many links to the more in-depth
517resources of the <a class="reference internal" href="user_guide.html#userguide"><span class="std std-ref">user guide</span></a> and <a class="reference internal" href="reference.html#refguide"><span class="std std-ref">reference guide</span></a> in case you want to learn
518more about any of the topics covered in the first steps guides.</p>
519<div class="sd-container-fluid sd-sphinx-override sd-mb-4 docutils">
520<div class="sd-row sd-row-cols-1 sd-row-cols-xs-1 sd-row-cols-sm-2 sd-row-cols-md-2 sd-row-cols-lg-3 docutils">
521<div class="sd-col sd-d-flex-row docutils">
522<div class="sd-card sd-sphinx-override sd-w-100 sd-shadow-sm docutils">
523<div class="sd-card-header docutils">
524<p class="sd-card-text">Creating a simple line chart plot</p>
525</div>
526<div class="sd-card-body docutils">
527<img alt="A line chart" class="align-center" src="../_images/first_steps_1.png" />
528</div>
529<div class="sd-card-footer docutils">
530<p class="sd-card-text"><a class="sd-sphinx-override sd-btn sd-text-wrap reference external" href="first_steps/first_steps_1.html"><span>Go to section 1</span></a></p>
531</div>
532</div>
533</div>
534<div class="sd-col sd-d-flex-row docutils">
535<div class="sd-card sd-sphinx-override sd-w-100 sd-shadow-sm docutils">
536<div class="sd-card-header docutils">
537<p class="sd-card-text">Adding and customizing renderers</p>
538</div>
539<div class="sd-card-body docutils">
540<img alt="Several glyphs in one chart" class="align-center" src="../_images/first_steps_2.png" />
541</div>
542<div class="sd-card-footer docutils">
543<p class="sd-card-text"><a class="sd-sphinx-override sd-btn sd-text-wrap reference external" href="first_steps/first_steps_2.html"><span>Go to section 2</span></a></p>
544</div>
545</div>
546</div>
547<div class="sd-col sd-d-flex-row docutils">
548<div class="sd-card sd-sphinx-override sd-w-100 sd-shadow-sm docut
548ils">
549<div class="sd-card-header docutils">
550<p class="sd-card-text">Adding legends, text, and annotations</p>
551</div>
552<div class="sd-card-body docutils">
553<img alt="A chart with a legend" class="align-center" src="../_images/first_steps_3.png" />
554</div>
555<div class="sd-card-footer docutils">
556<p class="sd-card-text"><a class="sd-sphinx-override sd-btn sd-text-wrap reference external" href="first_steps/first_steps_3.html"><span>Go to section 3</span></a></p>
557</div>
558</div>
559</div>
560<div class="sd-col sd-d-flex-row docutils">
561<div class="sd-card sd-sphinx-override sd-w-100 sd-shadow-sm docutils">
562<div class="sd-card-header docutils">
563<p class="sd-card-text">Customizing your plot</p>
564</div>
565<div class="sd-card-body docutils">
566<img alt="A chart with a tootip" class="align-center" src="../_images/first_steps_4.png" />
567</div>
568<div class="sd-card-footer docutils">
569<p class="sd-card-text"><a class="sd-sphinx-override sd-btn sd-text-wrap reference external" href="first_steps/first_steps_4.html"><span>Go to section 4</span></a></p>
570</div>
571</div>
572</div>
573<div class="sd-col sd-d-flex-row docutils">
574<div class="sd-card sd-sphinx-override sd-w-100 sd-shadow-sm docutils">
575<div class="sd-card-header docutils">
576<p class="sd-card-text">Vectorizing glyph properties</p>
577</div>
578<div class="sd-card-body docutils">
579<img alt="A chart with different colors" class="align-center" src="../_images/first_steps_5.png" />
580</div>
581<div class="sd-card-footer docutils">
582<p class="sd-card-text"><a class="sd-sphinx-override sd-btn sd-text-wrap reference external" href="first_steps/first_steps_5.html"><span>Go to section 5</span></a></p>
583</div>
584</div>
585</div>
586<div class="sd-col sd-d-flex-row docutils">
587<div class="sd-card sd-sphinx-override sd-w-100 sd-shadow-sm docutils">
588<div class="sd-card-header docutils">
589<p class="sd-card-text">Combining plots</p>
590</div>
591<div class="sd-card-body docutils">
592<img alt="Three charts combined into one element" class="align-center" src="../_images/first_steps_6.png" />
593</div>
594<div class="sd-card-footer docutils">
595<p class="sd-card-text"><a class="sd-sphinx-override sd-btn sd-text-wrap reference external" href="first_steps/first_steps_6.html"><span>Go to section 6</span></a></p>
596</div>
597</div>
598</div>
599<div class="sd-col sd-d-flex-row docutils">
600<div class="sd-card sd-sphinx-override sd-w-100 sd-shadow-sm docutils">
601<div class="sd-card-header docutils">
602<p class="sd-card-text">Displaying and exporting</p>
603</div>
604<div class="sd-card-body docutils">
605<img alt="Screenshot of a Bokeh plot in a Jupyter notebook" class="align-center" src="../_images/first_steps_7.png" />
606</div>
607<div class="sd-card-footer docutils">
608<p class="sd-card-text"><a class="sd-sphinx-override sd-btn sd-text-wrap reference external" href="first_steps/first_steps_7.html"><span>Go to section 7</span></a></p>
609</div>
610</div>
611</div>
612<div class="sd-col sd-d-flex-row docutils">
613<div class="sd-card sd-sphinx-override sd-w-100 sd-shadow-sm docutils">
614<div class="sd-card-header docutils">
615<p class="sd-card-text">Providing and filtering data</p>
616</div>
617<div class="sd-card-body docutils">
618<img alt="Two charts with different subsets of data" class="align-center" src="../_images/first_steps_8.png" />
619</div>
620<div class="sd-card-footer docutils">
621<p class="sd-card-text"><a class="sd-sphinx-override sd-btn sd-text-wrap reference external" href="first_steps/first_steps_8.html"><span>Go to section 8</span></a></p>
622</div>
623</div>
624</div>
625<div class="sd-col sd-d-flex-row docutils">
626<div class="sd-card sd-sphinx-override sd-w-100 sd-shadow-sm docutils">
627<div class="sd-card-header docutils">
628<p class="sd-card-text">Using widgets</p>
629</div>
630<div class="sd-card-body docutils">
631<img alt="Screenshot of a Bokeh server app" class="align-center" src="../_images/first_steps_9.png" />
632</div>
633<div class="sd-card-footer docutils">
634<p class="sd-card-text"><a class="sd-sphinx-override sd-btn sd-text-wrap reference external" href="first_steps/first_steps_9.html"><span>Go to section 9</span></a></p>
635</div>
636</div>
637</div>
638</div>
639</div>
640</section>
641</section>
642
643
644                </article>
645              
646              
647              
648              
649              
650                <footer class="prev-next-footer d-print-none">
651                  
652<div class="prev-next-area">
653    <a class="left-prev"
654       href="../index.html"
655       title="previous page">
656      <i class="fa-solid fa-angle-left"></i>
657      <div class="prev-next-info">
658        <p class="prev-next-subtitle">previous</p>
659        <p class="prev-next-title">Bokeh documentation</p>
660      </div>
661    </a>
662    <a class="right-next"
663       href="first_steps/installation.html"
664       title="next page">
665      <div class="prev-next-info">
666        <p class="prev-next-subtitle">next</p>
667        <p class="prev-next-title">Installation details</p>
668      </div>
669      <i class="fa-solid fa-angle-right"></i>
670    </a>
671</div>
672                </footer>
673              
674            </div>
675            
676            
677              
678            
679          </div>
680          <footer class="bd-footer-content">
681            
682          </footer>
683        
684      </main>
685    </div>
686  </div>
687  
688  <!-- Scripts loaded after <body> so the DOM is not blocked -->
689  
689<script defer src="../_static/scripts/bootstrap.js?digest=90905a2f556bf617f1a9"></script>
vendor: 1 bytes, line 689
689
690<script defer src="../_static/scripts/pydata-sphinx-theme.js?digest=90905a2f556bf617f1a9"></script>
690
691
692  <footer class="bd-footer"><div class="container-fluid p-0 links">
693  <div class="container">
694    <div class="row">
695      <div class="col-lg-3 col-md-6 col-sm-4 links-item">
696        <h6>Project</h6>
697        <ul class="nav flex-column">
698          <li class="nav-item">
699            <a class="nav-link" href="https://bokeh.org/roadmap/">Roadmap</a>
700          </li>
701          <li class="nav-item">
702            <a class="nav-link" href="https://github.com/bokeh/bokeh/wiki/BEP-4:-Project-Roles">Team</a>
703          </li>
704          <li class="nav-item">
705            <a class="nav-link" href="https://bokeh.org/branding/">Branding</a>
706          </li>
707        </ul>
708      </div>
709
710      <div class="col-lg-3 col-md-6 col-sm-4 links-item">
711        <h6>Documentation</h6>
712        <ul class="nav flex-column">
713          <li class="nav-item">
714            <a class="nav-link" href="https://docs.bokeh.org/en/latest/docs/user_guide.html">User Guide</a>
715          </li>
716          <li class="nav-item">
717            <a class="nav-link" href="https://docs.bokeh.org/en/latest/docs/gallery.html">Gallery</a>
718          </li>
719          <li class="nav-item">
720            <a class="nav-link" href="https://docs.bokeh.org/en/latest/docs/reference.html">Reference Guide</a>
721          </li>
722        </ul>
723      </div>
724
725      <div class="col-lg-3 col-md-6 col-sm-4 links-item">
726        <h6>Hands On</h6>
727        <ul class="nav flex-column">
728          <li class="nav-item">
729            <a class="nav-link" href="https://github.com/bokeh/tutorial/">Tutorials</a>
730          </li>
731          <li class="nav-item">
732            <a class="nav-link" href="https://demo.bokeh.org">Demos</a>
733          </li>
734          <li class="nav-item">
735            <a class="nav-link" href="https://bokeh.org/community/">Support</a>
736          </li>
737        </ul>
738      </div>
739
740      <div class="col-lg-3 col-md-6 col-sm-4 links-item">
741        <h6>Contribute</h6>
742        <ul class="nav flex-column">
743          <li class="nav-item">
744            <a class="nav-link" href="https://github.com/bokeh/bokeh">GitHub</a>
745          </li>
746          <li class="nav-item">
747            <a class="nav-link" href="https://docs.bokeh.org/en/latest/docs/dev_guide.html">Contributor Guide</a>
748          </li>
749          <li class="nav-item">
750            <a class="nav-link" href="https://github.com/bokeh/bokeh#support">Sponsor</a>
751          </li>
752        </ul>
753      </div>
754    </div>
755  </div>
756</div>
757
758
759<div class="container-fluid p-0 copyright">
760  <div class="container py-2">
761    <div class="row">
762      <div class="col-md-10">
763        <p class="m-0">
764          Bokeh is a fiscally sponsored project of
765          <a href="https://numfocus.org">NumFOCUS</a>, a nonprofit dedicated
766          to supporting the open-source scientific computing community.
767          Donations help pay for cloud hosting costs, travel, and other
768          project needs.
769        </p>
770        <p class="m-0">
771          ©2026 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>.
772        </p>
773      </div>
774      <div class="col-md-2">
775        <a class="btn btn-primary" href="https://numfocus.org/donate-to-bokeh">Donate</a>
776      </div>
777    </div>
778  </div>
779</div>
780  </footer>
781  </body>
782</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.