Nanoplots
Nanoplot functions render a single graphical element — arc, circle, or bar — and return a raw HTML string. They are the rendering primitives used internally by indicator strategies, but can also be embedded directly in any HTML context without the full strategy pipeline.
from orama.indicators.nanoplots import arc_nanoplot
html = arc_nanoplot(value=72.5, domain_min=0.0, domain_max=100.0, theme=theme)
# Returns an HTML string — drop it into any template or page
All four functions require theme to resolve color names and return a self-contained
HTML snippet with no external dependencies.
arc_nanoplot()
Renders an open arc (270° or 180°) that fills from one end.
from orama.indicators.nanoplots import arc_nanoplot
from orama.indicators.enums import GraphicalFillMode
html = arc_nanoplot(
value=72.5, # float — current value
domain_min=0.0, # float — empty end of arc
domain_max=100.0, # float — full end of arc
theme=theme, # Theme — required
radius=81, # int — arc radius in px
thickness=16, # int — stroke width in px
max_degrees=270, # int — 270 or 180
linecap="round", # "round" | "butt"
color_rules=None, # list[ColorRule] | None
graphical_fill_mode=GraphicalFillMode.GRADIENT, # GRADIENT | FLAT
bar_color="indicator_domain_track_color", # theme color name or "#hex" for the track
delta_value=None, # float | None — signed delta
represents_delta=False, # bool — fill from midpoint
)
When represents_delta=True the fill grows from the arc midpoint outward using the
sign of delta_value. max_degrees=270 leaves a gap at the bottom (gauge style);
max_degrees=180 is a horizontal semicircle.
circle_nanoplot()
Renders a full-circle arc that fills clockwise from the top (12 o'clock).
from orama.indicators.nanoplots import circle_nanoplot
html = circle_nanoplot(
value=45.0,
domain_min=0.0,
domain_max=100.0,
theme=theme,
radius=81, # int — circle radius in px
thickness=16, # int — stroke width in px
linecap="round", # "round" | "butt"
color_rules=None,
graphical_fill_mode=GraphicalFillMode.GRADIENT,
bar_color="indicator_domain_track_color",
)
hbar_nanoplot()
Renders a horizontal progress bar that fills left-to-right.
from orama.indicators.nanoplots import hbar_nanoplot
html = hbar_nanoplot(
value=60.0,
domain_min=0.0,
domain_max=100.0,
theme=theme,
length_px=120, # int — total bar length in px
thickness_px=12, # int — bar height in px
linecap="round", # "round" | "butt"
color_rules=None,
graphical_fill_mode=GraphicalFillMode.GRADIENT,
bar_color="indicator_domain_track_color",
delta_value=None,
represents_delta=False, # bool — fill from centre
)
When represents_delta=True the fill grows from the centre tick outward. Gradient
mode is disabled in delta mode; a flat colour is used instead.
vbar_nanoplot()
Renders a vertical progress bar that fills bottom-to-top.
from orama.indicators.nanoplots import vbar_nanoplot
html = vbar_nanoplot(
value=60.0,
domain_min=0.0,
domain_max=100.0,
theme=theme,
length_px=80, # int — total bar height in px
thickness_px=16, # int — bar width in px
linecap="round",
color_rules=None,
graphical_fill_mode=GraphicalFillMode.GRADIENT,
bar_color="indicator_domain_track_color",
delta_value=None,
represents_delta=False,
)
Color rules
Pass color_rules to control fill colour. Rules follow the same conventions as
indicator strategies — ColorAssignerByValue maps numeric values to a color scale;
when graphical_fill_mode=GraphicalFillMode.GRADIENT and at least one rule uses a
continuous assigner, the fill is rendered as a gradient across the full domain.
from orama.color import ColorRule, ColorSelectorStrategy, ColorAssignerByValue
from polychromos.color import HSLColor
rules = [
ColorRule(
selector=ColorSelectorStrategy(),
assigner=ColorAssignerByValue(
anchor_colors=[HSLColor.from_hex("#ef4444"), HSLColor.from_hex("#22c55e")],
range_min=0.0,
range_max=100.0,
),
),
]
html = arc_nanoplot(value=72.5, domain_min=0.0, domain_max=100.0, theme=theme, color_rules=rules)