Mathematical notation#

Bokeh supports mathematical notations expressed in the LaTeX and MathML markup languages with a growing number of elements. Currently, you can use LaTeX and MathML notations with the following elements:

Bokeh uses the MathJax library to handle LaTeX and MathML. See the official MathJax documentation for more information on MathJax.

Note

If you use the components() function, make sure to include the bokeh-mathjax- resource in your html template.

LaTeX#

To use LaTeX notation, you can pass a string directly to any supported element. This string needs to begin and end with one of the MathJax default delimiters. These delimiters are $$...$$, \[...\], and \(...\). For example: r"$$\sin(x)$$".

LaTeX on axis labels, titles, and labels

To use LaTeX notation as an axis label, title, or label, pass a raw string literal beginning and ending with MathJax default delimiters and containing LaTeX notation. For example:

''' This example demonstrates the use of inline mathtext on titles and ``Label`` annotations.
This example makes use of all the three LaTeX delimiters pairs ``$$...$$``, ``\\[...\\]`` and
``\\(...\\)``.

.. bokeh-example-metadata::
    :apis: bokeh.plotting.figure.line, bokeh.models.annotations.Label
    :refs: :ref:`ug_styling_mathtext`
    :keywords: mathtext, latex
'''
from numpy import arange, pi, sin

from bokeh.models.annotations.labels import Label
from bokeh.plotting import figure, show

x = arange(-2*pi, 2*pi, 0.1)
y = sin(x)

p = figure(height=250, title=r"$$\sin(x)$$ for \[x\] between \(-2\pi\) and $$2\pi$$")
p.circle(x, y, alpha=0.6, size=7)

label = Label(
    text=r"$$y = \sin(x)$$",
    x=150, y=130,
    x_units="screen", y_units="screen",
)
p.add_layout(label)

p.yaxis.axis_label = r"\(\sin(x)\)"
p.xaxis.axis_label = r"\[x\pi\]"

show(p)
LaTeX and tick labels

To add LaTeX notations to your tick labels, use the major_label_overrides() function with an axis.

This function is used to replace values for existing tick labels with custom text. It accepts a dictionary with the tick label’s original value as the key and your custom value as the dict’s value.

Use this function to replace any plain text tick labels with LaTeX notation:

from numpy import arange

from bokeh.plotting import figure, show

x = arange(1, 4.5, 0.25)
y = 1 / x

plot = figure(height=200)
plot.circle(x, y, fill_color="blue", size=5)
plot.line(x, y, color="darkgrey")

plot.xaxis.axis_label = "Resistance"
plot.xaxis.ticker = [1, 2, 3, 4]
plot.yaxis.axis_label = "Current at 1 V"

plot.xaxis.major_label_overrides = {
    1: r"$$1\ \Omega$$",
    2: r"$$2\ \Omega$$",
    3: r"$$3\ \Omega$$",
    4: r"$$4\ \Omega$$",
}

show(plot)
LaTeX on RangeSlider and Slider widget titles

To use LaTeX notation in the title of a RangeSlider or Slider widget, pass a raw string literal beginning and ending with MathJax default delimiters and containing LaTeX notation as the title parameter. For example:

from bokeh.io import show
from bokeh.models import Slider

slider = Slider(start=0, end=10, value=1, step=.1, title=r"$$\delta \text{ (damping factor, 1/s)}$$")

show(slider)
LaTeX with div and paragraph widgets

To include LaTeX notation in the text of a div widget or paragraph widget, use the standard MathJax default delimiters anywhere within your string:

from bokeh.io import show
from bokeh.models import Div

div = Div(
    width=400, height=100, background="#fafafa",
    text=r"The Pythagorean identity is $$\sin^2(x) + \cos^2(x) = 1$$",
)

show(div)

To disable LaTeX rendering for a div or paragraph widget, set the widget’s disable_math property to True.

You can use some of Bokeh’s standard text properties to change the appearance of rendered math text. Use text_font_size to change the font size, use text_color to change the color. For example:

p.xaxis.axis_label = r"$$\nu \:(10^{15} s^{-1})$$"
p.xaxis.axis_label_text_color = "green"
p.xaxis.axis_label_text_font_size = "50px"

Text color and sizes defined in a Bokeh theme also work.

Additionally, you have the option to use the LaTeX extensions included in MathJax. For example, use \text{} to combine literal text with a math expression. Or use the color extension to change the color of the rendered LaTeX notation: \color{white} \sin(x). Text properties set with a LaTeX extension override any text properties set elsewhere in your code or in a theme.

Note

There are limitations to how much of LaTeX MathJax supports. See Differences from Actual TeX in the MathJax documentation for more details.

MathML#

To add mathematical notations written in MathML, use Bokeh’s MathML model directly. This model has a text property that accepts a string containing MathML. For example:

from numpy import arange

from bokeh.models import MathML
from bokeh.plotting import figure, show

x = arange(-10, 10, 0.1)
y = (x * 0.5) ** 2

mathml = """
<math>
  <mrow>
    <mfrac>
      <mn>1</mn>
      <mn>4</mn>
    </mfrac>
    <msup>
      <mi>x</mi>
      <mn>2</mn>
    </msup>
  </mrow>
</math>
"""

plot = figure(height=200)
plot.line(x, y)

plot.xaxis.axis_label = MathML(text=mathml)

show(plot)

Similar to LaTeX, you can also use Bokeh’s standard text properties text_font_size and text_color to change font size and color for MathML notations. For example:

plot.xaxis.axis_label = MathML(text=mathml)
plot.xaxis.axis_label_text_color = "green"
plot.xaxis.axis_label_text_font_size = "50px"

For more information, see MathML in the reference guide.