Gradient fill color

Showcase
1

Hey,

Here is an example of how to use a custom gradient fill colour. The hatch_extra does the job really nice.

gradibar
gradibar971Ă—570 32.2 KB

from bokeh.plotting import figure, show
from bokeh.io import curdoc
from bokeh.models import HoverTool,ImageURLTexture
curdoc().theme = 'dark_minimal'

fruits = ['Apples', 'Pears', 'Nectarines', 'Plums', 'Grapes', 'Strawberries']
counts = [5, 3, 4, 2, 4, 6]

hover = HoverTool(
    tooltips = [
        ("val", "@values"),
        ("(x,y)", "($x{int}, $y{int})")
    ]
)


p = figure(x_range=fruits, height=350, title="Fruit Counts",
           toolbar_location=None, tools=[hover, "pan, wheel_zoom, save"], active_scroll="wheel_zoom", sizing_mode="scale_both")

p.vbar(x=fruits, top=counts, width=0.9,border_radius=19,
             hatch_extra={ 'mycustom': ImageURLTexture(url='https://www.publicdomainpictures.net/pictures/240000/nahled/color-gradient-background.jpg') },
       hatch_pattern = dict(value="mycustom"),
      hover_fill_alpha=1,
             hover_fill_color="fill_colors", hover_line_color="black", hover_line_width=6)

p.xgrid.grid_line_color = None
p.y_range.start = 0

show(p)
1 Like
2

This is related to this actually → Defined gradient fill color on varea/patches - #2 by Bryan

The MRE posted suffers from the same “problem” I ran into (i.e. undesired behaviour) - using a gradient image as a texture only “works” at a “sweet spot” in y range start/end values (the image starts repeating otherwise):

wonk

2 Likes
3

Ah, I didn’t catch that—thanks for pointing it out!

1 Like
4

It’s still a neat setup, and nice to have MRE posted here :smiley:

2 Likes