Specialized axis ticking (original) (raw)

This example shows how to create a custom TickFormatter class that displays the first tick of every axis as-is, and every subsequent tick as an offset from the first. Pan and zoom the plot below and watch the x-axis.

from bokeh.io import show from bokeh.models import TickFormatter from bokeh.plotting import figure from bokeh.util.compiler import TypeScript

CODE = """ import {TickFormatter} from "models/formatters/tick_formatter"

export class MyFormatter extends TickFormatter { // accepts a list of numbers (ticks) and returns a list of strings doFormat(ticks: string[] | number[]) { // format the first tick as-is const formatted = [${ticks[0]}]

// format the rest as offsets from the first
for (let i = 1; i < ticks.length; i++) {
  formatted.push(`+${(Number(ticks[i]) - Number(ticks[0])).toPrecision(2)}`)
}
return formatted

} } """

class MyFormatter(TickFormatter): implementation = TypeScript(CODE)

p = figure() p.scatter([1, 2, 3, 4, 6], [5, 7, 3, 2, 4], size=20)

p.xaxis.formatter = MyFormatter()

show(p)