CODEWITHSUNDEEP
pythonbokeh
L. Rebelo
L. Rebelo

Reputation: 97

Change style of tabs in bokeh plot

I would like to know if there is a way to change the properties of tabs produced on a bokeh plot. Changes like increasing the text font, changing the tab width and so on. The following is a simple code for producing a plot with two tabs. 

from bokeh.models.widgets import Panel, Tabs
from bokeh.io import output_file, show
from bokeh.plotting import figure

output_file("slider.html")

p1 = figure(plot_width=300, plot_height=300)
p1.circle([1, 2, 3, 4, 5], [6, 7, 2, 4, 5], size=20, color="navy", alpha=0.5)
tab1 = Panel(child=p1, title="circle")

p2 = figure(plot_width=300, plot_height=300)
p2.line([1, 2, 3, 4, 5], [6, 7, 2, 4, 5], line_width=3, color="navy", alpha=0.5)
tab2 = Panel(child=p2, title="line")

tabs = Tabs(tabs=[ tab1, tab2 ])

show(tabs)

Upvotes: 3

Views: 3798

Answers (1)

Tony
Tony

Reputation: 8297

You can override the default Bokeh tabs styles like shown below (works for Bokeh v1.1.0).

Please note that Bokeh CSS library implementation may change in upcoming versions.

The css styles found below will work for v1.1.0 but are not backwards compatible with v1.0.4

from bokeh.plotting import save, figure
from bokeh.models import Paragraph, Panel, Tabs, Column

template = """
{% block postamble %}
<style>
.bk-root .bk-tab {
    background-color: cyan;
    width: 200px;
    color: red;
    font-style: italic;
}

.bk-root .bk-tabs-header .bk-tab.bk-active{
background-color: yellow;
color: blue;
font-style: normal;
font-weight: bold;
}

.bk-root .bk-tabs-header .bk-tab:hover{
background-color: yellow
}

</style>
{% endblock %}
"""

p = Paragraph(text = "Another tab", width = 600)

plot = figure()
plot.line(x = [1, 2], y = [3, 4])
tabs = [Panel(title = 'Tab1', child = plot)]
tabs.append(Panel(title = 'Tab2', child = p))

save(Column(Tabs(tabs = tabs, width = 600)), template = template)

Result:

enter image description here

Upvotes: 9

Related Questions