How do I set the line color of a Whisker in a Bokeh Theme?

Hi there. I am trying to improve the built in Bokeh Theme for the Panel Dark Themed Fast Theme in Issue #4313 · holoviz/panel (github.com).

image1603×663 19 KB

I can see that using the Bokeh Whisker model and the argument line_color I can set the color of the Whisker

Whisker(source=source_error, base="base", upper="upper", lower="lower", line_color="yellow")

But I don’t know how to the add this to a Bokeh Theme json specification like the below.

{
'attrs' : {
    'Plot': {
        'background_fill_color': '#2F2F2F',
        'border_fill_color': '#2F2F2F',
        'outline_line_color': '#444444',
    },
    'Axis': {
        'axis_line_color': null,
    },
    'Grid': {
        'grid_line_dash': [6, 4]',
        'grid_line_alpha': .3,
    },
    'Title': {
        'text_color': 'white'
    }
}

How do I do that? Thanks.

Not ideal, but like this:

Theme(json={
    "attrs": {
        "Whisker": {
            "line_color": "yellow",
        },
        "ArrowHead": {
            "line_color": "yellow",
        },
    },
})

Or more explicitly using {"value": "yellow"}, as we are dealing with vectorized properties.

Ideally something like this would work:

Theme(json={
    "attrs": {
        "Whisker": {
            "line_color": "yellow",
            "upper_head": {
                "line_color": "yellow",
            },
            "lower_head": {
                "line_color": "yellow",
            },
        },
    },
})

This works though:

from bokeh.models import TeeHead
Theme(json={
    "attrs": {
        "Whisker": {
            "line_color": {"value": "red"},
            "upper_head": TeeHead(size=10, line_color="red"),
            "lower_head": TeeHead(size=10, line_color="red"),
        },
    },
})

but I think you can’t replicate this in a yaml-based theme.

That’s honestly surprising (pleasantly, I guess?) but perhaps we ought to raise the possibility of deprecating and discouraging the yaml format for themes if it can’t have full parity.

I’ve discovered that the Whisker object settings can be output to json, which I show below after setting the background color to its complement. (Note: This color is meant to be DARK_STYLE.background_color in panel/template/fast/theme.py.)

1. Find the opposite/complement of the theme background color:
   Using color inversion oneliner from SO post:

bkgd = "#181818"  # e.g. `DARK_STYLE.background_color` in fast/theme.py
whiskers = f"#{(int(bkgd.lstrip('#'), 16)^0xffffff):06X}"
whiskers
>>>'#E7E7E7'

2. Set the line color of the Whisker object and output its json:

from pprint import pprint as pp           # just to get nicer post output ;)
from bokeh.models import Whisker


W = Whisker(line_color=whiskers)
W.line_color  # check new value assigned
>>>'#E7E7E7'

>>> pp(W.to_json(include_defaults=True))
{'base': {'field': 'base'},
 'coordinates': None,
 'dimension': 'height',
 'group': None,
 'id': '1005',
 'js_event_callbacks': {},
 'js_property_callbacks': {},
 'level': 'underlay',
 'line_alpha': {'value': 1.0},
 'line_cap': {'value': 'butt'},
 'line_color': {'value': '#E7E7E7'},      # saved!
 'line_dash': {'value': []},
 'line_dash_offset': {'value': 0},
 'line_join': {'value': 'bevel'},
 'line_width': {'value': 1},
 'lower': {'field': 'lower'},
 'lower_head': {'id': '1006'},
 'name': None,
 'source': {'id': '1008'},
 'subscribed_events': [],
 'syncable': True,
 'tags': [],
 'upper': {'field': 'upper'},
 'upper_head': {'id': '1007'},
 'visible': True,
 'x_range_name': 'default',
 'y_range_name': 'default'}

3. Add above specs under attrs.Whisker key. (not tested)

Hope this helps a bit!

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