CODEWITHSUNDEEP
pythoncssbokeh
bongbang
bongbang

Reputation: 1712

Center embedded Bokeh plot

How can I center an embedded Bokeh plot? My css seems to have no effect on Bokeh's <div class="plotdiv">. In the minimal example below, I want the plot to be at the center of the yellow container. 

from jinja2 import Template
from bokeh.embed import components
from bokeh.models import Range1d
from bokeh.plotting import figure
from bokeh.resources import INLINE
from bokeh.util.browser import view

x1 = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
y1 = [0, 8, 2, 4, 6, 9, 5, 6, 25, 28, 4, 7]

p1 = figure(plot_width=300, plot_height=300)
p1.scatter(x1, y1, size=12, color="red", alpha=0.5)

script, div = components(p1)

template = Template('''<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Bokeh Scatter Plots</title>
        {{ js_resources }}
        {{ css_resources }}
        {{ script }}
    <style>
    .wrapper {
        width: 800px;
        background-color: yellow;
        margin: 0 auto;
        }

    .plotdiv {
        margin: 0 auto;
        }
    </style>
    </head>
    <body>
    <div class='wrapper'>
        {{ div }}
    </div>
    </body>
</html>
''')

js_resources = INLINE.render_js()
css_resources = INLINE.render_css()

filename = 'embed_multiple.html'

html = template.render(js_resources=js_resources,
                       css_resources=css_resources,
                       script=script,
                       div=div)

with open(filename, 'w') as f:
    f.write(html)

view(filename)

** The filler below is added only to appease SE's robot **

SE's robot wants me to add "more details" because this question is "mostly code." Hey, robot, the question is straightforward, and it's only "mostly code" because I did my homework and try to make it easier for people to help me.

Upvotes: 2

Views: 4029

Answers (2)

TMS
TMS

Reputation: 373

<div align="center">put the bokeh plot here</div>

Upvotes: 2

bigreddot
bigreddot

Reputation: 34568

With Bokeh 0.11.1 changing to the following works for me:

.bk-plot-wrapper table {
    margin: 0 auto;
}

The issue is the the div.bk-plot-wrapper takes up all the space of the enclosing <div>. But the internal <table> that lays out the plot doesn't. I'm not a CSS expert, but maybe someone else can add more information

Two notes: I'm not sure what version of Bokeh you have, .plotdiv has not been in use for some time. Also please note that some foundational improvements to layout will be landing in 0.12 to make Bokeh much more respponsive and "webby" by default, and so the above code will probably not work with 0.12 (in particular, the <table> is going away).

Upvotes: 1

Related Questions