line

A path through a run of points. x: and y: hold one axis each, paired by position — numbers written out, or dataset columns (x: #co2.year; y: #co2.ppm). Drawn straight between the points by default; interpolate: step instead holds each value until the next x and then jumps, giving a staircase, and marks each jump with a dot: filled where the function lands, hollow where it left.

lineNode
Only withxyargandpolarplane
A pink line through three points and a grey stepped line beside it.A pink line through three points and a grey stepped line beside it.

A line reads x / y the way a scatter does, and takes interpolate: linear joins the readings, bezier rounds the corners off with a cubic through every one of them, and step holds each value until the next x and then jumps. A rounded line claims the quantity varied smoothly in between, so it belongs on a trajectory and not on a tally. polygon takes linear and bezier the same way.

#Attributes

On any plane
slice
The column this mark is SLICED by — long-format data, one row per thing per slice, showing the one the scene's parameter over that column holds. A column with a number line interpolates, so a reader stopped between two values sees half way; a column of names selects the rows carrying the name they picked.
reference
colourAnimatable
Colour of the path.
bluelight-bluedark-blueredlight-reddark-redorangelight-orangedark-orangeyellowlight-yellowdark-yellowteallight-tealdark-tealgreenlight-greendark-greenpinklight-pinkdark-pinkpurplelight-purpledark-purplegreylight-greydark-greyneutralhex(…)rgb(…)
Also written: color
Defaultpink
widthAnimatable
Stroke width.
parametised-number
Default2
interpolateAnimatable
How it gets from one reading to the next: linear joins them, step holds and jumps, bezier rounds the corners off with a cubic through every reading whose handles sit at the midpoints of the legs either side (t = 0.5, so it cannot overshoot). A curve says the quantity varied smoothly between the readings; a tally did not.
linearstepbezier
Also written: interpolation
Defaultlinear
endpoints
On a step, the dots at each jump — filled where the value is taken, hollow where it is not.
boolean
Also written: dots
Defaulttrue
risers
On a step, the vertical joins between treads. Off by default: a function has one value at each x.
boolean
Also written: connect
Defaultfalse
label
Text drawn beside the line — rich text.
rich-text
hiddenAnimatable
Declared and framed, but not drawn.
boolean
Defaultfalse
lock
A reader may not edit it on an editable graph.
boolean
Also written: locked
Defaultfalse
text-sizeAnimatable
Size of the label.
number
Default20
layerAnimatable
Paint order among the marks: a higher layer is drawn later, on top; equal or omitted, the marks stack in document order (later on top). Written z: before the argand plane took that letter for its coordinate.
parametised-number
Only withxyplane
xImplicitAnimatable
The x readings: numbers (0, 1, 2 — entries may be expressions of parameters), or a dataset column (#co2.year). A column of names reads against a categorical axis (x format:, or the axis’s auto rule); an ISO date column reads as fractional years (2024-03-15 → ≈2024.2), and auto labels them in years. Paired with y by position.
series
Can be written as shorthand: line:value
yAnimatable
The y readings, paired with x by position.
series
Only withargandplane
zAnimatable
On the argand plane, the readings as complex numbers: written out (1 + i, 2 - i, -3i, a bare number a real), or a column of complex literals bound whole (#roots.z). Instead of re/im.
complex-series
reAnimatable
On the argand plane, the readings' real parts, one per reading — numbers written out or a column — paired with im by position.
series
imAnimatable
On the argand plane, the readings' imaginary parts, paired with re by position.
series
Only withpolarplane
rAnimatable
On the polar plane, the readings' distances from the origin, paired with theta by position.
series
thetaAnimatable
On the polar plane, the readings' angles in radians (60deg for degrees), paired with r by position; names on a categorical theta.
series

#Allowed in

canvas.graph { }cue { }cue.draw { }cue.trace { }cue.highlight { }cue.spotlight { }

#Examples

A pink line joining three points.A pink line joining three points.
canvas.graph{
    line(x: 0, 2, 4; y: 0, 2, 1; colour: pink)
}
A line drawn as a staircase through three points, flat and then rising at each one.A line drawn as a staircase through three points, flat and then rising at each one.
canvas.graph{
    line(x: 0, 1, 2; y: 0, 0.5, 1; interpolate: step)
}
Atmospheric CO₂ in parts per million rising every decade from 1960 to 2020.Atmospheric CO₂ in parts per million rising every decade from 1960 to 2020.
canvas.graph{
    line(x: #co2.year; y: #co2.ppm)
}

Last updated