General visual properties#

To style the visual attributes of Bokeh plots, you need to know what the available properties are. The full reference guide contains all properties of every object individually. However, there are three groups of properties that many objects have in common. They are:

  • line properties: line color, width, etc.

  • fill properties: fill color, alpha, etc.

  • text properties: font styles, colors, etc.

This section contains more details about some of the most common properties.

Line properties#

line_color

color to use to stroke lines with

line_width

line stroke width in units of pixels

line_alpha

floating point between 0 (transparent) and 1 (opaque)

line_join

how path segments should be joined together

  • 'miter' miter_join

  • 'round' round_join

  • 'bevel' bevel_join

line_cap

how path segments should be terminated

  • 'butt' butt_cap

  • 'round' round_cap

  • 'square' square_cap

line_dash

a line style to use

  • 'solid'

  • 'dashed'

  • 'dotted'

  • 'dotdash'

  • 'dashdot'

  • an array of integer pixel distances that describe the on-off pattern of dashing to use

  • a string of spaced integers matching the regular expression '^(\\d+(\\s+\\d+)*)?$' that describe the on-off pattern of dashing to use

line_dash_offset

the distance in pixels into the line_dash that the pattern should start from

Fill properties#

fill_color

color to use to fill paths with

fill_alpha

floating point between 0 (transparent) and 1 (opaque)

Hatch properties#

hatch_color

color to use to stroke hatch patterns with

hatch_alpha

floating point between 0 (transparent) and 1 (opaque)

hatch_weight

line stroke width in units of pixels

hatch_scale

a rough measure of the “size” of a pattern. This value has different specific meanings, depending on the pattern.

hatch_pattern

a string name (or abbreviation) for a built-in pattern, or a string name of a pattern provided in hatch_extra. The built-in patterns are:

Built-in Hatch Patterns#

FullName

Abbreviation

Example

blank

" "

blank

dot

"."

dot

ring

"o"

ring

horizontal_line

"-"

horizontal_line

vertical_line

"|"

vertical_line

cross

"+"

cross

horizontal_dash

'"'

horizontal_dash

vertical_dash

":"

vertical_dash

spiral

"@"

spiral

right_diagonal_line

"/"

right_diagonal_line

left_diagonal_line

"\\"

left_diagonal_line

diagonal_cross

"x"

diagonal_cross

right_diagonal_dash

","

right_diagonal_dash

left_diagonal_dash

"`"

left_diagonal_dash

horizontal_wave

"v"

horizontal_wave

vertical_wave

">"

vertical_wave

criss_cross

"*"

criss_cross
hatch_extra

a dict mapping string names to custom pattern implementations. The name can be referred to by hatch_pattern. For example, if the following value is set for hatch_extra:

hatch_extra={ 'mycustom': ImageURLTexture(url=...) }

then the name "mycustom" may be set as a hatch_pattern.

Text properties#

text_font

font name, e.g., 'times', 'helvetica'

text_font_size

font size in px, em, or pt, e.g., '16px', '1.5em'

text_font_style

font style to use

  • 'normal' normal text

  • 'italic' italic text

  • 'bold' bold text

text_color

color to use to render text with

text_outline_color

color to use to provide a stroked outline to text

text_alpha

floating point between 0 (transparent) and 1 (opaque)

text_align

horizontal anchor point for text: 'left', 'right', 'center'

text_baseline

vertical anchor point for text

  • 'top'

  • 'middle'

  • 'bottom'

  • 'alphabetic'

  • 'hanging'

Note

There is currently only support for providing an outline color for text. An interface for more advanced control of stroked outlines of text has not yet been exposed.

Visible property#

Glyph renderers, axes, grids, and annotations all have a visible property. Use this property to turn them on and off.

from bokeh.plotting import figure, show

# We set-up a standard figure with two lines
p = figure(width=500, height=200, tools='')
visible_line = p.line([1, 2, 3], [1, 2, 1], line_color="blue")
invisible_line = p.line([1, 2, 3], [2, 1, 2], line_color="pink")

# We hide the xaxis, the xgrid lines, and the pink line
invisible_line.visible = False
p.xaxis.visible = False
p.xgrid.visible = False

show(p)

This can be particularly useful in interactive examples with a Bokeh server or CustomJS.

from bokeh.layouts import layout
from bokeh.models import BoxAnnotation, Toggle
from bokeh.plotting import figure, show

p = figure(width=600, height=200, tools='')
p.line([1, 2, 3], [1, 2, 1], line_color="#0072B2")
pink_line = p.line([1, 2, 3], [2, 1, 2], line_color="#CC79A7")

green_box = BoxAnnotation(left=1.5, right=2.5, fill_color='#009E73', fill_alpha=0.1)
p.add_layout(green_box)

# Use js_link to connect button active property to glyph visible property

toggle1 = Toggle(label="Green Box", button_type="success", active=True)
toggle1.js_link('active', green_box, 'visible')

toggle2 = Toggle(label="Pink Line", button_type="success", active=True)
toggle2.js_link('active', pink_line, 'visible')

show(layout([p], [toggle1, toggle2]))

Color properties#

Bokeh objects have several properties related to colors. Use those color properties to control the appearance of lines, fills, or text, for example.

Use one of these options to define colors in Bokeh:

  • Any of the named CSS colors, such as 'green' or 'indigo'. You can also use the additional name 'transparent' (equal to '#00000000').

  • An RGB(A) hex value, such as '#FF0000' (without alpha information) or '#44444444' (with alpha information).

  • A CSS4 rgb(), rgba(), or hsl() color string, such as 'rgb(0 127 0 / 1.0)', 'rgba(255, 0, 127, 0.6)', or 'hsl(60deg 100% 50% / 1.0)'.

  • A 3-tuple of integers (r, g, b) (where r, g, and b are integers between 0 and 255).

  • A 4-tuple of (r, g, b, a) (where r, g, and b are integers between 0 and 255 and a is a floating-point value between 0 and 1).

  • A 32-bit unsigned integer representing RGBA values in a 0xRRGGBBAA byte order pattern, such as 0xffff00ff or 0xff0000ff.

To define a series of colors, use an array of color data such as a list or the column of a ColumnDataSource. This also includes NumPy arrays.

For example:

import numpy as np

from bokeh.plotting import figure, show

x = [1, 2, 3]
y1 = [1, 4, 2]
y2 = [2, 1, 4]
y3 = [4, 3, 2]

# use a single RGBA color
single_color = (255, 0, 0, 0.5)

# use a list of different colors
list_of_colors = [
    "hsl(60deg 100% 50% / 1.0)",
    "rgba(0, 0, 255, 0.9)",
    "LightSeaGreen",
]

# use a series of color values as numpy array
numpy_array_of_colors = np.array(
    [
        0xFFFF00FF,
        0x00FF00FF,
        0xFF000088,
    ],
    np.uint32,
)

p = figure(title="Specifying colors")

# add glyphs to plot
p.line(x, y1, line_color=single_color)
p.circle(x, y2, radius=0.12, color=list_of_colors)
p.triangle(x, y3, size=30, fill_color=numpy_array_of_colors)

show(p)

In addition to specifying the alpha value of a color when defining the color itself, you can also set an alpha value separately by using the line_alpha or fill_alpha properties of a glyph.

If you specify a color with an alpha value and also explicitly provide an alpha value through a line_alpha or fill_alpha property at the same time, then the alpha values are combined by multiplying them together. For example, if your color is '#00FF0044' or 'rgba(255, 0, 127, 0.6)' and your separate alpha value is 0.5 then the alpha value used for the glyph will be 0.6*0.5 = 0.3.

The following figure demonstrates each possible combination of using RGB and RGBA colors together with the line_alpha or fill_alpha properties:

Note

If you use Bokeh’s plotting interface, you also have the option to specify color and/or alpha as keywords when calling a renderer method. Bokeh automatically applies these values to the corresponding fill and line properties of your glyphs.

You then still have the option to provide additional fill_color, fill_alpha, line_color, and line_alpha arguments as well. In this case, the former will take precedence.

Color palettes#

Bokeh provides a number of pre-defined color palettes that you can reference to define colors, including for color mapping.

Bokeh’s pre-defined palettes are sequences of RGB(A) hex strings. These sequences can be either lists or tuples.

To use one of those pre-defined palettes, import it from the bokeh.palettes module.

When you import "Spectral6", for example, Bokeh gives you access to a list that contains six RGB(A) hex strings from the Brewer "Spectral" color map:

>>> from bokeh.palettes import Spectral6
>>> Spectral6
['#3288bd', '#99d594', '#e6f598', '#fee08b', '#fc8d59', '#d53e4f']

For a list of all the standard palettes included in Bokeh, see bokeh.palettes.

Screen units and data-space units#

When setting visual properties of Bokeh objects, you use either screen units or data-space units:

  • Screen units use raw numbers of pixels to specify height or width

  • Data-space units are relative to the data and the axes of the plot

Take a 400 pixel by 400 pixel graph with x and y axes ranging from 0 through 10, for example. A glyph that is one fifth as wide and tall as the graph would have a size of 80 screen units or 2 data-space units.

Objects in Bokeh that support both screen units and data-space units usually have a dedicated property to choose which unit to use. This unit-setting property is the name of the property with an added _units. For example: A Whisker annotation has the property upper. To define which unit to use, set the upper_units property to either 'screen' or 'data'.