CODEWITHSUNDEEP
javascriptgraphbokehbokehjs
Lucas Almeida Carotta
Lucas Almeida Carotta

Reputation: 567

Hide Bokeh's toolbar (JavaScript)

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?

Upvotes: 0

Views: 83

Answers (2)

mosc9575
mosc9575

Reputation: 6337

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.

Upvotes: 1

snoob dogg
snoob dogg

Reputation: 2865

<!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.

Upvotes: 1

Related Questions