Embedded Bokeh plot is cut off by grandparent width

Community Support
,
1

I am trying to embed a Bokeh plot into a website, but I want the plot to extend beyond the width of the surrounding text. I created a <div> and <script> block with bokeh.embed.components for the plot, and then I created a parent <div> that has a wider width. However, the left and right sides of the plot are getting cut off.

Here is how I created the div and script for the plot:

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

p = bk.plotting.figure(
    title="Simple line example",
    x_axis_label='x',
    y_axis_label='y',
    width=1000,
    sizing_mode='scale_width',
)
p.line(x, y, legend_label="Temp.", line_width=2)

script, div = bk.embed.components(p)

Then in the HTML I have the following:

<style>
.plot-box {
  width: 66vw;
  position: relative;
  left: 33%;
  right: 33%;
  margin-left: -25vw;
  margin-right: -25vw;
  overflow-x: visible;
}
</style>

<div class="plot-box">
<div id="90368cb4-2baf-48d0-8579-ec082d956cb8" data-root-id="p1341" style="display: contents;"></div>
</div>

However, this produces something like this:

image
image2418×1598 208 KB

The plot is the correct width and location, but the sides are getting cut off. How do I make them visible? Thank you for any help.

Edit: I am on Bokeh version 3.0.3.

2

@antognini please state relevant version information.

3

I am on version 3.0.3.

4

cc @mateusz

In the mean time can you compare with latest version 3.1?

5

For sure. I just upgraded to 3.1.0, though I am seeing the same behavior.

6

Also if it helps, the overall text has the following CSS:

.post {
    max-width: 680px;
    display: block;
    margin: 0 auto;
    float: none;
}
7

Not sure, but I do not observe what you indicate (but then again, you have not supplied complete code of the document my code might not be the same as yours :thinking: ). The document layout I am using is below but I do not observe the BK figure being cut-off, running version 3.1.0:

Skærmbillede 2023-03-24 kl. 16.16.13
Skærmbillede 2023-03-24 kl. 16.16.133000×1926 433 KB

Complete code

from bokeh.plotting import figure
from bokeh.embed import components

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

p = figure(
    title="Simple line example",
    x_axis_label='x',
    y_axis_label='y',
    width=1000,
    sizing_mode='scale_width',
)
p.line(x, y, legend_label="Temp.", line_width=2)

script, div = components(p)
print(script)
print(div)

My index.html where I have left out Bokeh <script> section.

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8">
<script src="https://cdn.bokeh.org/bokeh/release/bokeh-3.1.0.min.js"></script>

BOKEH SCRIPT 

<style>
.plot-box {
  width: 66vw;
  position: relative;
  left: 33%;
  right: 33%;
  margin-left: -25vw;
  margin-right: -25vw;
  overflow-x: visible;
  background-color: aliceblue;
}

.post {
    max-width: 680px;
    display: block;
    margin: 0 auto;
    float: none;
}
</style>
</head>
  <body>
    <div class="post">
	Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

      <div class="plot-box">
        <div id="25bca101-35d7-4a7b-a686-ea5b6aaa90be" data-root-id="p1001" style="display: contents;">
        </div>
      </div>

      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
  </body>
</html>
1 Like
8

Thank you for trying to reproduce this. I kept digging and it turned out that there was an additional CSS selector that I had missed that was imposing overflow: hidden. When I set that to visible the figure no longer gets cut off.

1 Like
9

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.