Hide Bokeh's toolbar (JavaScript)

Question

I'm trying to hide the toolbar from the following Bokeh example without any success:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-2.4.3.min.js"></script>
    <script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-gl-2.4.3.min.js"></script>
    <script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-widgets-2.4.3.min.js"></script>
    <script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-tables-2.4.3.min.js"></script>
    <script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-mathjax-2.4.3.min.js"></script>
    <script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-api-2.4.3.min.js"></script>
    <script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-api-2.4.3.min.js"></script>
    <script type="text/javascript">
      const plt = Bokeh.Plotting;
      const pie_data = {
        labels: ['Work', 'Eat', 'Commute', 'Sport', 'Watch TV', 'Sleep'],
        values: [8, 2, 2, 4, 0, 8],
      };
      const p = Bokeh.Charts.pie(pie_data);

      window.onload = function () {
        plt.show(p, '#bokeh');
      };
    </script>
  </head>
  <body>
    <div id="bokeh"></div>
  </body>
<!DOCTYPE html>
<html>

I read about toolbar_location option when using the Python version of Bokeh. How can I do the same using the JavaScript version of it?

did you tried to hide the toolbar using a simple technique like using a css selector + a display: none ? — snoob dogg
– snoob dogg, Commented Jul 1, 2024 at 20:13

snoob dogg · Accepted Answer · 2024-07-01 20:40:21Z

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-2.4.3.min.js"></script>
    <script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-gl-2.4.3.min.js"></script>
    <script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-widgets-2.4.3.min.js"></script>
    <script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-tables-2.4.3.min.js"></script>
    <script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-mathjax-2.4.3.min.js"></script>
    <script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-api-2.4.3.min.js"></script>
    <script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-api-2.4.3.min.js"></script>
    <script type="text/javascript">
      const plt = Bokeh.Plotting;
      const pie_data = {
        labels: ['Work', 'Eat', 'Commute', 'Sport', 'Watch TV', 'Sleep'],
        values: [8, 2, 2, 4, 0, 8],
      };
      const p = Bokeh.Charts.pie(pie_data);

      window.onload = async () => {
        await plt.show(p, '#bokeh');
        document.querySelector('#bokeh  div.bk.bk-canvas-events > div:nth-child(2)').classList.add('hide-toolbar')
      };
    </script>
  </head>
  <body>
    <div id="bokeh"></div>
  </body>
  <style>
  .hide-toolbar {
    display:none !important;
  }
  </style>
<!DOCTYPE html>
<html>

There are two parts to solving this problem. Here is what I did:

window.onload = async () => {
    await plt.show(p, '#bokeh');
    document.querySelector('#bokeh div.bk.bk-canvas-events > div:nth-child(2)').classList.add('hide-toolbar');
};

Then, add a new class to hide it:

<style>
.hide-toolbar {
   display: none !important;
}
</style>

Here is a step-by-step explanation:

Identify the Toolbar Element

Use the developer tools to right-click on the toolbar element and select Copy > Copy Selector. Simplify the copied selector for clarity. In this case, #bokeh div.bk.bk-canvas-events > div:nth-child(2) is sufficient.

Hide the Toolbar

Add a new class in your CSS to hide the toolbar with display: none !important;. Ensure the Graph is Fully Loaded:

Make your onload function async so you can await the completion of plt.show(p, '#bokeh').

This ensures the graph is fully loaded in the DOM before running the querySelector. Without this, the selector might not work because the graph wouldn't be in the DOM yet. By following these steps, you can ensure the toolbar is hidden once the graph is fully loaded.

mosc9575 · Accepted Answer · 2024-07-01 21:06:35Z

1

The JS code for bokeh works very similar to the python code. In python you write toolbar_location=None and in JS toolbar_location: null should be the equivalent in the inital call of a figure. Please visit the documentation for BokehJS to see real JS examples:

A very minimal example for a plot without a toolbar is this:

// make the plot
const plt = Bokeh.Plotting;
const p = plt.figure({ title: "figure with no toolbar", toolbar_location: null});

To see a more complex example please vitsit https://docs.bokeh.org/en/latest/docs/user_guide/advanced/bokehjs.html#minimal-example.

You can try the JS example code on https://codepen.io/pen. Just copy and past the imports to the HTML terminal and the bokeh example code to the JS terminal. The output will appear after a few moments.

edited Jul 1, 2024 at 21:06

answered Jul 1, 2024 at 20:45

mosc9575

6,3922 gold badges12 silver badges36 bronze badges

Collectives™ on Stack Overflow

Hide Bokeh's toolbar (JavaScript)

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related