Why is the plotting order not respected when I plot a Circle and a Multiline later?

Question

I am plotting some circles with blue color with one ColumnDataSource

On the order hand, once the circles are plotted, I plot a Multiline glyph as well. I use another source for this glyph.

The glyphs are plotted correctly but they do not respect the order I have plotted them. I want to plot the Multiline on the top of the figure to make it always visible.

from bokeh.plotting import figure
from bokeh.models.sources import ColumnDataSource, CDSView
from bokeh.models.filters import IndexFilter
from bokeh.palettes import Reds3
from bokeh.io import curdoc


ml_source = ColumnDataSource(data=dict(
    colors=[Reds3[0], Reds3[1]],
    xs=[[1, 20, 30, 50], [24, 25, 36, 57]],
    ys=[[4, 20, 50, 50], [10, 25, 35, 60]],
))

source = ColumnDataSource(data=dict(
    x=[7, 8, 9, 10, 15, 30, 55, 23, 50],
    y=[10, 8, 9, 20, 15, 30, 55, 23, 50],
))

plot = figure(
    width=500,
    height=500,
    toolbar_location='left',
    tools='pan,wheel_zoom,tap,lasso_select',
    output_backend='webgl',
)

plot.circle(
    x='x',
    y='y',
    radius=3,
    fill_color='blue',
    line_color=None,
    source=source,
)

ml_prof_line = plot.multi_line(
    xs='xs',
    ys='ys',
    source=ml_source,
    color='colors',
    line_width=5,
    line_alpha=1.0,
)

curdoc().add_root(plot)

I launch this with bokeh serve --show example.py

This is the result:

I have tried using the same source for both but the result is the same.

Is anything wrong? Is that the expected behaviour?

I think there is a bug with Multiline because if I use the line works as expected

plot.line(
    x='x',
    y='y',
    source=source,
    color='red',
    line_width=5,
    line_alpha=1.0,
)

Update

I have posted this on an issue
Finally it is a duplicated of this other issue: Mixed canvas and webgl glyphs are painted in wrong z-order

OK @bigreddot, done [here](https://github.com/bokeh/bokeh/issues/7810) — ChesuCR, Apr 18 '18 at 15:47

score 1 · Answer 1 · answered Apr 18 '18 at 10:17

1

I think we have this behavior becase circles are markers and lins are glyphs in terms of bokeh models. Changing circle to ellipse with same width and height works as ellipse is a glyph too. So just replace your plot.circle() with

plot.ellipse(
x='x',
y='y',
width=3,
height=3,
color='blue',
source=source
)

answered Apr 18 '18 at 10:17

Zalatik

483
5
11

I was wrong. Markers are subtype of glyphs. So they both should be rendered in order they are added. I think it's a bug and your question should be a good issue. – Zalatik Apr 18 '18 at 15:08
Yes @Zalatik, I have just written into [an issue](https://github.com/bokeh/bokeh/issues/7810) – ChesuCR Apr 18 '18 at 15:49
Hi @Zalatik You may be interested, I have found another better workaround. Check my answer if you want to know – ChesuCR May 10 '19 at 16:01

ChesuCR · Accepted Answer · 2019-06-07T13:51:35.983

Update 2019/06/07

This has already been fixed in the Bokeh Version 1.2.0

I found a better workaround now:

Using Scatter glyphs
Using size instead of radius. The scatter method does not have a radius attribute

from bokeh.plotting import figure
from bokeh.models.sources import ColumnDataSource, CDSView
from bokeh.models.filters import IndexFilter
from bokeh.models.markers import Scatter, Circle
from bokeh.models.tools import LassoSelectTool
from bokeh.palettes import Reds3
from bokeh.plotting import show


ml_source = ColumnDataSource(data=dict(
    colors=[Reds3[0], Reds3[1]],
    xs=[[1, 20, 30, 50], [24, 25, 36, 57]],
    ys=[[4, 20, 50, 50], [10, 25, 35, 60]],
))

source = ColumnDataSource(data=dict(
    x=[7, 8, 9, 10, 15, 30, 55, 23, 50],
    y=[10, 8, 9, 20, 15, 30, 55, 23, 50],
))

plot = figure(
    width=500,
    height=500,
    toolbar_location='left',
    tools='pan,wheel_zoom,tap,lasso_select',
    output_backend='webgl',
)

c = plot.scatter(
    x='x',
    y='y',
    size=20,
    fill_color='blue',
    line_color=None,
    line_alpha=1.0,
    source=source,

    nonselection_fill_color='blue',
    nonselection_line_color=None,
    nonselection_fill_alpha=1.0,
)
c.selection_glyph = Scatter(
    fill_color='yellow',
    line_color='red',
    line_alpha=1.0,
)

ml_prof_line = plot.multi_line(
    xs='xs',
    ys='ys',
    source=ml_source,
    color='colors',
    line_width=5,
    line_alpha=1.0,
)

show(plot)

Why is the plotting order not respected when I plot a Circle and a Multiline later?

Update

2 Answers2

Update 2019/06/07

Linked