charts.axis
Axis geometry as data: tick positions, tick marks, label anchors and gridlines for number, time and category axes.
1.0.0 (not the latest) · published 2026-10-03 by charlie · Anterra
Pinned by 31 tests, run in TypeScript, Python and Rust · fewer than the registry now requires. 1.0.1 adds them.axisFromTicks 10 · numberAxis 7 · timeAxis 4 · bandAxis 4 · gridLines 6
What it does
An axis as data rather than drawing: the axis line, and for each tick its position, its mark, its label and where and how to anchor that label. Any renderer (SVG, canvas, a PDF library, a native chart view) can draw it without doing any arithmetic of its own, so a chart built in Python on the server and one built in TypeScript in the browser put every tick in the same place.
This is a group, because an axis is useless without its scale and ticks:
The functions
A group: 5 functions that work together, each in its own file, each pinned by its own tests in TypeScript, Python and Rust. A project can install only the ones it calls.
- axis_from_ticks (positions: float[], labels: string[], range: float[], orient: AxisOrient, position: float, tickSize: float) -> Axis
- number_axis (domain: float[], range: float[], count: int, orient: AxisOrient, position: float, tickSize: float) -> Axis
- time_axis (domain: date[], range: float[], count: int, orient: AxisOrient, position: float, tickSize: float) -> Axis
- band_axis (domain: string[], range: float[], paddingInner: float, paddingOuter: float, orient: AxisOrient, position: float, tickSize: float) -> Axis
- grid_lines (axis: Axis, length: float) -> Line[]
The types it declares, generated into your project
AxisOrient = Literal["bottom", "top", "left", "right"]
TextAnchor = Literal["start", "middle", "end"]
TextBaseline = Literal["hanging", "middle", "alphabetic"]
@dataclass(frozen=True)
class Line:
"""A straight line segment in pixels."""
x1: float
y1: float
x2: float
y2: float
@dataclass(frozen=True)
class AxisTick:
"""One tick: where it is, its mark, and where and how to draw its label."""
#: along the axis, in pixels
position: float
label: str
#: the tick mark, from the axis line outwards
tick: Line
label_x: float
label_y: float
#: SVG text-anchor for the label
anchor: TextAnchor
#: SVG dominant-baseline for the label
baseline: TextBaseline
@dataclass(frozen=True)
class Axis:
"""Everything needed to draw one axis; all pixel values rounded to 2 decimal places."""
orient: AxisOrient
#: the axis line's fixed coordinate
position: float
#: the axis line itself, along the range
line: Line
ticks: List[AxisTick]
Once installed, your code imports each one from the group's module.
axis_from_ticks throws on bad input 10 tests
def axis_from_ticks(positions: Sequence[float], labels: Sequence[str], range: Sequence[float], orient: AxisOrient, position: float, tick_size: float) -> Axis
| positions | float[] | where each tick falls along the axis, in pixels, from any scale |
| labels | string[] | one label per position |
| range | float[] | the axis line's [from, to] in pixels |
| orient | AxisOrient | |
| position | float | the axis line's fixed coordinate: y for bottom and top, x for left and right |
| tick_size | float | length of each tick mark; d3's default is 6 |
| returns | Axis |
For example
axis_from_ticks(0, 50, 100, 0, 5, 10, 0, 100, bottom, 200, 6)→ orient bottom, position 200, line …, ticks ×3 a bottom axis: marks point down, labels hang below themaxis_from_ticks(10, 90, a, b, 0, 100, top, 20, 6)→ orient top, position 20, line …, ticks ×2 a top axis: marks point up, labels sit on their baseline aboveaxis_from_ticks(300, 150, 0, 0, 50, 100, 300, 0, left, 40, 6)→ orient left, position 40, line …, ticks ×3 a left axis: marks point left, labels right-aligned beside them
from fune.charts.axis import axis_from_ticks # charts.axis@^1
Imports name this capability’s declared dependencies, which fune builds next to it in your project; each one links to its page.
from typing import Sequence
from .charts_axis_types import Axis, AxisOrient, AxisTick, Line
from .math_round_float import round_float ← from math.round-float ^1.0.0 · built alongside by fune
# d3-axis's default gap between the end of a tick mark and its label.
_LABEL_PADDING = 3
def axis_pixel(value: float) -> float:
"""A pixel coordinate rounded to 2 places, the precision every axis output uses."""
return round_float(value, 2)
def axis_line(x1: float, y1: float, x2: float, y2: float) -> Line:
return Line(x1=axis_pixel(x1), y1=axis_pixel(y1), x2=axis_pixel(x2), y2=axis_pixel(y2))
def check_orient(orient: str) -> None:
if orient not in ("bottom", "top", "left", "right"):
raise ValueError('orient must be bottom, top, left or right, received "%s"' % (orient,))
def axis_from_ticks(
positions: Sequence[float],
labels: Sequence[str],
range: Sequence[float], # noqa: A002 - the manifest names it range
orient: AxisOrient,
position: float,
tick_size: float,
) -> Axis:
"""Axis geometry from tick positions and labels, for any scale (d3-axis layout)."""
check_orient(orient)
if len(positions) != len(labels):
raise ValueError(
"positions and labels must be the same length, received %d and %d" % (len(positions), len(labels))
)
if len(range) != 2:
raise ValueError("range must have exactly 2 values, [from, to]; got %d" % len(range))
horizontal = orient in ("bottom", "top")
sign = 1 if orient in ("bottom", "right") else -1
mark_end = position + sign * tick_size
label_at = position + sign * (tick_size + _LABEL_PADDING)
ticks = []
for p, label in zip(positions, labels):
if horizontal:
ticks.append(
AxisTick(
position=axis_pixel(p),
label=label,
tick=axis_line(p, position, p, mark_end),
label_x=axis_pixel(p),
label_y=axis_pixel(label_at),
anchor="middle",
baseline="hanging" if orient == "bottom" else "alphabetic",
)
)
else:
ticks.append(
AxisTick(
position=axis_pixel(p),
label=label,
tick=axis_line(position, p, mark_end, p),
label_x=axis_pixel(label_at),
label_y=axis_pixel(p),
anchor="end" if orient == "left" else "start",
baseline="middle",
)
)
if horizontal:
line = axis_line(range[0], position, range[1], position)
else:
line = axis_line(position, range[0], position, range[1])
return Axis(orient=orient, position=axis_pixel(position), line=line, ticks=ticks)number_axis throws on bad input 7 tests
def number_axis(domain: Sequence[float], range: Sequence[float], count: int, orient: AxisOrient, position: float, tick_size: float) -> Axis
| domain | float[] | |
| range | float[] | |
| count | int | roughly how many ticks; nice values from charts.ticks |
| orient | AxisOrient | |
| position | float | |
| tick_size | float | |
| returns | Axis |
For example
number_axis(0, 100, 0, 500, 5, bottom, 300, 6)→ orient bottom, position 300, line …, ticks ×6 0 to 100 in steps of 20 along 500 pixelsnumber_axis(0, 1, 300, 0, 5, left, 40, 6)→ orient left, position 40, line …, ticks ×6 a y axis drawn upwards, labelled to one place because the step is 0.2number_axis(0, 5,000, 0, 100, 2, bottom, 0, 6)→ orient bottom, position 0, line …, ticks ×3 thousands are grouped
from fune.charts.axis import number_axis # charts.axis@^1
Imports name this capability’s declared dependencies, which fune builds next to it in your project; each one links to its page.
from typing import Sequence
from .charts_axis_axis_from_ticks import axis_from_ticks ← axisFromTicks, another function of this group · built into the same file, even by a slim install
from .charts_axis_types import Axis, AxisOrient
from .charts_format_format_tick import format_tick
from .charts_scale_linear_scale import linear_scale
from .charts_ticks_nice_ticks import nice_ticks
from .charts_ticks_tick_step import tick_step
def number_axis(
domain: Sequence[float],
range: Sequence[float], # noqa: A002 - the manifest names it range
count: int,
orient: AxisOrient,
position: float,
tick_size: float,
) -> Axis:
"""A linear number axis: nice ticks, placed by linear_scale, labelled for the step."""
if len(domain) != 2:
raise ValueError("domain must have exactly 2 values, [from, to]; got %d" % len(domain))
lo = min(domain[0], domain[1])
hi = max(domain[0], domain[1])
values = nice_ticks(domain[0], domain[1], count)
step = tick_step(lo, hi, count)
positions = [linear_scale(domain, range, v, False) for v in values]
labels = [format_tick(v, step) for v in values]
return axis_from_ticks(positions, labels, range, orient, position, tick_size)time_axis throws on bad input 4 tests
def time_axis(domain: Sequence[str], range: Sequence[float], count: int, orient: AxisOrient, position: float, tick_size: float) -> Axis
| domain | date[] | |
| range | float[] | |
| count | int | roughly how many ticks; the interval (day to year) is chosen to fit |
| orient | AxisOrient | |
| position | float | |
| tick_size | float | |
| returns | Axis |
For example
time_axis(2026-01-01, 2026-12-31, 0, 364, 4, bottom, 200, 6)→ orient bottom, position 200, line …, ticks ×4 a year in quarterstime_axis(2026-09-01, 2026-09-15, 0, 140, 7, bottom, 0, 6)→ orient bottom, position 0, line …, ticks ×8 a fortnight in days every 2 days, starting on the 1st of the month's odd daystime_axis(2026-12-31, 2026-01-01, 0, 364, 4, bottom, 0, 6)→ orient bottom, position 0, line …, ticks ×4 a date domain given backwards is placed backwards
from fune.charts.axis import time_axis # charts.axis@^1
Imports name this capability’s declared dependencies, which fune builds next to it in your project; each one links to its page.
from typing import Sequence
from .charts_axis_axis_from_ticks import axis_from_ticks ← axisFromTicks, another function of this group · built into the same file, even by a slim install
from .charts_axis_types import Axis, AxisOrient
from .charts_format_format_date import format_date
from .charts_scale_time_scale import time_scale
from .charts_ticks_time_tick_interval import time_tick_interval
from .charts_ticks_time_ticks import time_ticks
def time_axis(
domain: Sequence[str],
range: Sequence[float], # noqa: A002 - the manifest names it range
count: int,
orient: AxisOrient,
position: float,
tick_size: float,
) -> Axis:
"""A date axis: a calendar interval for about count ticks, labelled for that interval."""
if len(domain) != 2:
raise ValueError("domain must have exactly 2 values, [from, to]; got %d" % len(domain))
lo = min(domain[0], domain[1])
hi = max(domain[0], domain[1])
chosen = time_tick_interval(lo, hi, count)
values = time_ticks(lo, hi, chosen.interval, chosen.step)
positions = [time_scale(domain, range, v, False) for v in values]
labels = [format_date(v, chosen.interval) for v in values]
return axis_from_ticks(positions, labels, range, orient, position, tick_size)band_axis throws on bad input 4 tests
def band_axis(domain: Sequence[str], range: Sequence[float], padding_inner: float, padding_outer: float, orient: AxisOrient, position: float, tick_size: float) -> Axis
| domain | string[] | the categories, one tick at the centre of each band |
| range | float[] | |
| padding_inner | float | |
| padding_outer | float | |
| orient | AxisOrient | |
| position | float | |
| tick_size | float | |
| returns | Axis |
For example
band_axis(a, b, c, 0, 300, 0.2, 0.1, bottom, 100, 6)→ orient bottom, position 100, line …, ticks ×3 three categories, ticks at band centresband_axis(x, y, 0, 100, 0.5, 0, bottom, 0, 6)→ orient bottom, position 0, line …, ticks ×2 centres are rounded to 2 placesband_axis(north, south, 200, 0, 0, 0, left, 50, 6)→ orient left, position 50, line …, ticks ×2 a category axis on the left
from fune.charts.axis import band_axis # charts.axis@^1
Imports name this capability’s declared dependencies, which fune builds next to it in your project; each one links to its page.
from typing import Sequence
from .charts_axis_axis_from_ticks import axis_from_ticks ← axisFromTicks, another function of this group · built into the same file, even by a slim install
from .charts_axis_types import Axis, AxisOrient
from .charts_scale_band_scale import band_scale
def band_axis(
domain: Sequence[str],
range: Sequence[float], # noqa: A002 - the manifest names it range
padding_inner: float,
padding_outer: float,
orient: AxisOrient,
position: float,
tick_size: float,
) -> Axis:
"""A category axis: one tick at the centre of each band, labelled with the category."""
positions = [band_scale(domain, range, v, padding_inner, padding_outer, 0.5).center for v in domain]
return axis_from_ticks(positions, list(domain), range, orient, position, tick_size)grid_lines throws on bad input 6 tests
def grid_lines(axis: Axis, length: float) -> List[Line]
| axis | Axis | |
| length | float | how far across the plot each line runs, usually the plot's height or width |
| returns | Line[] |
For example
grid_lines(orient bottom, position 200, line …, ticks ×3, 180)→ ×3 from a bottom axis the lines run up across the plotgrid_lines(orient top, position 20, line …, ticks ×1, 100)→ ×1 from a top axis they run downgrid_lines(orient left, position 40, line …, ticks ×3, 460)→ ×3 from a left axis they run right
from fune.charts.axis import grid_lines # charts.axis@^1
Imports name this capability’s declared dependencies, which fune builds next to it in your project; each one links to its page.
import math
from typing import List
from .charts_axis_axis_from_ticks import axis_line, check_orient ← axisFromTicks, another function of this group · built into the same file, even by a slim install
from .charts_axis_types import Axis, Line
def grid_lines(axis: Axis, length: float) -> List[Line]:
"""One gridline per tick, from the axis line across the plot."""
check_orient(axis.orient)
if isinstance(length, bool) or not isinstance(length, (int, float)) or not math.isfinite(length) or length < 0:
raise ValueError("length must be a finite number of zero or more, received %r" % (length,))
pos = axis.position
out = []
for t in axis.ticks:
p = t.position
if axis.orient == "bottom":
out.append(axis_line(p, pos, p, pos - length))
elif axis.orient == "top":
out.append(axis_line(p, pos, p, pos + length))
elif axis.orient == "left":
out.append(axis_line(pos, p, pos + length, p))
else:
out.append(axis_line(pos, p, pos - length, p))
return outInstall
fune build
With that line in your source, in a Python project (language python in fune.project), fune build resolves it and its 4 dependencies, pins them in fune.lock, downloads only the Python package of each, and builds the code above into your project’s .fune/build, one readable file per capability with a header linking back here. Or pin a range in fune.project and build in one step:
fune add charts.axis
That builds the whole group. To build only what you call, and whatever it uses inside the group:
fune add charts.axis --only axisFromTicks
The manifest, vectors and README with only the Python implementation. Install it without the registry with fune add ./charts.axis-1.0.0-python.fune, or fetch it from a terminal with fune pull charts.axis@1.0.0:python.
The whole function, every language, is one file too: charts.axis-1.0.0.fune, 59,383 bytes, sha256 6268c1533bbe811a1db6266d76348046d8dcdf69ce89c3b86d059779b3efa45f. It installs into a project of any language.
Customise it in your app
The seams this capability offers. Put a marker directly above a function of your own and fune build wires it into the built code; the package on the registry is not changed, the built file’s header lists it under CUSTOMISED, and fune hooks lists every hook in the project. How hooks work.
before — your function gets the arguments and returns them, changed or not, or throws to refuse the call.
# fune: before charts.axis.axisFromTicks
# fune: before charts.axis.numberAxis
# fune: before charts.axis.timeAxis
# fune: before charts.axis.bandAxis
# fune: before charts.axis.gridLines
after — your function gets the result and the arguments, and returns the final result.
# fune: after charts.axis.axisFromTicks
# fune: after charts.axis.numberAxis
# fune: after charts.axis.timeAxis
# fune: after charts.axis.bandAxis
# fune: after charts.axis.gridLines
replace — inside this capability’s code only, calls to a dependency go to your function, with the same signature. Other capabilities that use it are unaffected; write in * to replace it everywhere.
# fune: replace charts.format in charts.axis
# fune: replace charts.scale in charts.axis
# fune: replace charts.ticks in charts.axis
# fune: replace math.round-float in charts.axis
step — your function runs at a numbered point inside a function’s body, receives the in-scope values it names as parameters, and may return replacements. List the points with fune show charts.axis --steps.
# fune: step charts.axis.<fn> after <n|label>
Tests
A version published now needs at least 8 tests for every function, and one that expects the error for each function that throws; the registry refuses it otherwise. fune verify --all runs each case in TypeScript, Python and Rust, and a project runs them again with fune verify. This page lists the cases; it does not run them. The exact JSON is vectors.json.
This version has fewer tests than the registry now requires. It was published before every function had to have 8. 1.0.1 meets it, and a project on ^1.0.0 installs that or newer.
- numberAxis has 7 tests; every function needs at least 8. Add 1 more to vectors.json ("fn": "numberAxis"): the ordinary case, the boundaries (zero, negative, the largest values), the rounding edge and every error it documents
- timeAxis has 4 tests; every function needs at least 8. Add 4 more to vectors.json ("fn": "timeAxis"): the ordinary case, the boundaries (zero, negative, the largest values), the rounding edge and every error it documents
- bandAxis has 4 tests; every function needs at least 8. Add 4 more to vectors.json ("fn": "bandAxis"): the ordinary case, the boundaries (zero, negative, the largest values), the rounding edge and every error it documents
- gridLines has 6 tests; every function needs at least 8. Add 2 more to vectors.json ("fn": "gridLines"): the ordinary case, the boundaries (zero, negative, the largest values), the rounding edge and every error it documents
axisFromTicks 10 tests
| Case | Arguments | Expected | |
|---|---|---|---|
| a bottom axis: marks point down, labels hang below them | 0, 50, 100, 0, 5, 10, 0, 100, bottom, 200, 6 | → | orient bottom, position 200, line …, ticks ×3 |
| a top axis: marks point up, labels sit on their baseline above | 10, 90, a, b, 0, 100, top, 20, 6 | → | orient top, position 20, line …, ticks ×2 |
| a left axis: marks point left, labels right-aligned beside them | 300, 150, 0, 0, 50, 100, 300, 0, left, 40, 6 | → | orient left, position 40, line …, ticks ×3 |
| a right axis: labels start after the marks | 0, 100, low, high, 0, 100, right, 500, 4 | → | orient right, position 500, line …, ticks ×2 |
| pixels are rounded to 2 places, half away from zero | 12.345, 12.345, x, y, 0.004, 99.996, bottom, 100.125, 6 | → | orient bottom, position 100.13, line …, ticks ×2 |
| zero-length marks put labels 3 pixels from the line | 5, 5, 0, 10, left, 0, 0 | → | orient left, position 0, line …, ticks ×1 |
| an axis with no ticks is just its line | , , 0, 300, bottom, 150, 6 | → | orient bottom, position 150, line …, ticks |
| a label per position is required | 0, 1, 0, 0, 1, bottom, 0, 6 | → | error: positions and labels must be the same length |
| an unknown orient is an error, not a left axis | 0, 0, 0, 1, middle, 0, 6 | → | error: orient must be bottom, top, left or right |
| a range needs two ends | 0, 0, 0, bottom, 0, 6 | → | error: range must have exactly 2 values |
numberAxis 7 tests
| Case | Arguments | Expected | |
|---|---|---|---|
| 0 to 100 in steps of 20 along 500 pixels | 0, 100, 0, 500, 5, bottom, 300, 6 | → | orient bottom, position 300, line …, ticks ×6 |
| a y axis drawn upwards, labelled to one place because the step is 0.2 | 0, 1, 300, 0, 5, left, 40, 6 | → | orient left, position 40, line …, ticks ×6 |
| thousands are grouped | 0, 5,000, 0, 100, 2, bottom, 0, 6 | → | orient bottom, position 0, line …, ticks ×3 |
| a domain that is not nice only gets the ticks inside it | 3, 97, 0, 94, 4, bottom, 0, 6 | → | orient bottom, position 0, line …, ticks ×4 |
| negative to positive | -10, 10, 0, 200, 4, top, 0, 6 | → | orient top, position 0, line …, ticks ×5 |
| count below 1 is an error | 0, 1, 0, 1, 0, bottom, 0, 6 | → | error: count must be a whole number of at least 1 |
| a domain needs two ends | 0, 0, 1, 5, bottom, 0, 6 | → | error: domain must have exactly 2 values |
timeAxis 4 tests
| Case | Arguments | Expected | |
|---|---|---|---|
| a year in quarters | 2026-01-01, 2026-12-31, 0, 364, 4, bottom, 200, 6 | → | orient bottom, position 200, line …, ticks ×4 |
| a fortnight in days every 2 days, starting on the 1st of the month's odd days | 2026-09-01, 2026-09-15, 0, 140, 7, bottom, 0, 6 | → | orient bottom, position 0, line …, ticks ×8 |
| a date domain given backwards is placed backwards | 2026-12-31, 2026-01-01, 0, 364, 4, bottom, 0, 6 | → | orient bottom, position 0, line …, ticks ×4 |
| an impossible date is an error | 2026-02-30, 2026-12-31, 0, 1, 4, bottom, 0, 6 | → | error: is not a real calendar date |
bandAxis 4 tests
| Case | Arguments | Expected | |
|---|---|---|---|
| three categories, ticks at band centres | a, b, c, 0, 300, 0.2, 0.1, bottom, 100, 6 | → | orient bottom, position 100, line …, ticks ×3 |
| centres are rounded to 2 places | x, y, 0, 100, 0.5, 0, bottom, 0, 6 | → | orient bottom, position 0, line …, ticks ×2 |
| a category axis on the left | north, south, 200, 0, 0, 0, left, 50, 6 | → | orient left, position 50, line …, ticks ×2 |
| a repeated category is an error | a, a, 0, 100, 0, 0, bottom, 0, 6 | → | error: domain has a repeated value |
gridLines 6 tests
| Case | Arguments | Expected | |
|---|---|---|---|
| from a bottom axis the lines run up across the plot | orient bottom, position 200, line …, ticks ×3, 180 | → | ×3 |
| from a top axis they run down | orient top, position 20, line …, ticks ×1, 100 | → | ×1 |
| from a left axis they run right | orient left, position 40, line …, ticks ×3, 460 | → | ×3 |
| from a right axis they run left | orient right, position 500, line …, ticks ×1, 460.004 | → | ×1 |
| no ticks, no gridlines | orient bottom, position 0, line …, ticks , 50 | → | |
| a negative length is an error | orient bottom, position 200, line …, ticks ×3, -1 | → | error: length must be a finite number of zero or more |
More from the author
- `numberAxis` for a linear number scale: nice tick values inside the domain (`charts.ticks` niceTicks), placed by `charts.scale` linearScale, labelled by `charts.format` formatTick with just enough decimals for the step (0.1, 0.2, 0.3, never 0.30000000000000004). - `timeAxis` for dates: `charts.ticks` picks the calendar interval (days, weeks, months, quarters, years) that gives about `count` ticks, puts ticks on its boundaries, and `charts.format` formatDate labels them for that interval. - `bandAxis` for categories: a tick at the centre of each band of `charts.scale` bandScale with the same padding as the bars. - `axisFromTicks` builds the geometry from any positions and labels, for scales this group does not cover (a log scale with hand-picked ticks). - `gridLines` runs a line from each tick across the plot.
## Layout (as d3-axis)
The mark points away from the plot: down from a bottom axis, up from a top one, left from a left axis, right from a right one, `tickSize` pixels long. The label sits 3 pixels past the end of the mark (d3's default tick padding). Under a bottom axis it is centred with `dominant-baseline: hanging`; above a top axis centred on its alphabetic baseline; beside a left axis right-aligned (`text-anchor: end`) and vertically centred; beside a right axis left-aligned. `position` is the axis line's fixed coordinate: its y for a bottom or top axis, its x for a left or right one.
Gridlines start on the axis line and run `length` pixels across the plot, the opposite way to the marks.
Every pixel value is rounded to 2 decimal places by `math.round-float`, half away from zero, so the numbers agree to the digit in every language. Labels are not measured here: how wide text is depends on the font, which only the renderer knows; `charts.layout` estimates widths when a layout needs them.
Source: d3-axis (github.com/d3/d3-axis), the conventions for mark direction, padding and anchors.