Skillversitas

Area Plots

Area plots fill the region between a line and a baseline (usually zero), emphasizing magnitude over time. Bokeh draws them with the varea/harea glyphs (single series) and the stack_glyph family or patch_stack for stacked areas.

varea - Vertical Area

import numpy as np
from bokeh.plotting import figure, show
from bokeh.io import output_file

output_file("area.html")
x = np.linspace(0, 10, 100)
y = np.sin(x) + 1.5

p = figure(title="Simple area")
p.varea(x, y1=0, y2=y, fill_color="#5b8ff9", fill_alpha=0.4, line_color="#123", line_width=2)
show(p)

harea - Horizontal Area

p = figure(title="Horizontal area")
p.harea(x, x1=0, x2=y, fill_color="#5ad8a6", fill_alpha=0.4)
show(p)

Handling Negative Values

varea fills between y1 and y2 regardless of sign, so a series that crosses zero works directly. If you want positive and negative parts in different colors, split the series:

pos = np.clip(y, 0, None)
neg = np.clip(y, None, 0)

p = figure()
p.varea(x, y1=0, y2=pos, fill_color="#5ad8a6", fill_alpha=0.5)
p.varea(x, y1=0, y2=neg, fill_color="#f6903d", fill_alpha=0.5)
show(p)

Stacked Areas

a = np.abs(np.sin(x))
b = np.abs(np.cos(x))

p = figure(title="Stacked area")
p.patch_stack(xs=[x, x], ys=[a, b],
              colors=["#5b8ff9", "#9270ca"], alpha=0.6)
show(p)

Tips

  • Keep fill_alpha modest (0.3-0.6) so gridlines and other series stay visible.
  • Layer a vline/hline or line glyph on top to emphasize the boundary.
  • For many series, a stacked area is far more readable than overlapping transparent areas.

Summary

Draw area plots with varea(x, y1, y2) and harea(x, x1, x2), split positive/negative values into two fills when you want distinct colors, and use patch_stack for stacked areas. Keep fill alpha low and layer a line glyph on top for a crisp outline.