import{AreaChart}from"@/components/ui/area-chart"// Hours read on the studio's journal, by where the readers came from.constreading=[{label:"January",value:310,search:180,letter:90,direct:40},{label:"February",value:360,search:200,letter:110,direct:50},{label:"March",value:420,search:210,letter:150,direct:60},{label:"April",value:390,search:190,letter:140,direct:60},{label:"May",value:510,search:260,letter:170,direct:80},{label:"June",value:470,search:230,letter:160,direct:80},{label:"July",value:560,search:280,letter:190,direct:90},{label:"August",value:530,search:250,letter:190,direct:90},{label:"September",value:690,search:330,letter:240,direct:120},]constsources=[{key:"search",label:"from search"},{key:"letter",label:"from the letter"},{key:"direct",label:"direct"},]exportdefaultfunctionExample(){return(<divclassName="grid gap-y-16"><AreaChartdata={reading}label="Hours read by month, 2026"unit="hours read"className="max-w-[44rem]"/><AreaChartvariant="smooth"data={reading}series={sources}label="Hours read by month and source, 2026"unit="hours"className="max-w-[44rem]"/></div>)}
Contract
Underneath: line-chart's ChartLines, plus a hook.
Anatomy: <figure class="ot-chart ot-area-chart" data-variant="linear | smooth | step">, as line-chart, each series' <g> also holding a <pattern> of one-pixel rules and a .ot-area-chart-drops path filled with it.
SPECTRA's barcode laid under a line. There is no fill: the volume is drawn as hairlines dropped from the line to the baseline at a close, even rhythm (one every three pixels, pencil), so the shape is made of the barcode's own marks and the space between them. The line along the top is ink; the rings and the pointed drop are line-chart's, and so is the rolling number.
Series stack in order from the baseline, and each band keeps its own rhythm, three, six and twelve pixels apart (the second and third in rule-strong), so the bands read by density, not colour; the readout's swatches are samples of each rhythm. The readout lists each band, then a rule and the sum ("690 hours in all"). Written for up to three.
The path styles are line-chart's. Stepped, the drops stand as a histogram.
Keyboard: chart's. Forced colours: the drops are GrayText.
One point per entry, in order. With one series the number is value; with several, each series reads its own key.
series
{ key: string; label: string }[]
Two or more bands, stacked in order from the baseline. Each keeps its own rhythm of drops, three, six and twelve pixels apart, and the readout lists each with a rule and the sum under it. Written for up to three.
label
string
Names the chart for assistive tech. Each point is a button labelled with its values and, stacked, the sum.
unit
string
What the values count. The readout reads visits in September, or visits in all under a sum.
now
number
last
Index of the point the number rests on. Its ring is the accent.
max
number
The value at the top of the plot. Defaults to the next round number above the largest, or the largest sum.
format
(value: number) => string
Formats the numbers and the point labels. Defaults to en-GB grouping.
variant
"linear" | "smooth" | "step"
"linear"
The line along the top of the drops, as in line-chart: straight, one monotone sweep, or level across each column (the drops then stand as a histogram).
Craft
Where its move comes from
Where its move comes from
Component
Reference
Move
Area chart
SPECTRA barcode
No fill: the volume is hairlines dropped at barcode rhythm; stacked bands differ by density
How it moves
How it moves
Component
Articulation
What moves
Area chart
Roll
As line-chart: the drop runs down through the barcode and the numbers roll