Not able to code FuncTickFormatter correctly - get an error

I am trying to format axis with engineering units (G for 10^9, M for 10^6, k for 10³) through the use of FuncTickFormatter but the browser web console reports an error:
Uncaught (in promise) TypeError: this.text.includes is not a function
I wonder if it is due to the ticks containing string? I do not know how to make this work, any hints welcome?

Also, if I get it to work, how due I use the same formatting to hover?

Running Bokeh version 2.3.0, Firefox browser on RHEL 7.

from bokeh.io import show, output_file
from bokeh.models import FuncTickFormatter
from bokeh.plotting import figure

f = figure()
x = [1.1e4, 2.2e5, 3.3e6]
y = [1.1e7, 2.2e8, 3.3e9]
f.circle(x = x, y = y, size = 8)

f.axis.formatter = FuncTickFormatter(code = """
    console.log(ticks.length);
    console.log(ticks);
    var new_val;

    if (tick >= 1e9) {
        new_val = (tick / 1e9).toFixed(1) + ' G';
    } else if (tick >= 1e6) {
        new_val = (tick / 1e6).toFixed(1) + ' M';
    } else if (tick >= 1e3) {
        new_val = (tick / 1e3).toFixed(1) + ' k';
    } else {
        new_val = tick;
    }
    console.log(new_val);

    return new_val;
"""
)
# broswer console: Uncaught (in promise) TypeError: this.text.includes is not a function

# How do I reuse the formatter for hover?

output_file('functickformatter.html')
show(f)

new_val = tick;

This may not be well documented, but formatters have to produce strings. In this case a number falls through, leading to an exception downstream. For now replace this with new_val = tick.toString(). However, we will make FuncTickFormatter to call toString() on its own, so that such clumsy errors don’t appear.

1 Like