Blocks

Blocks are the pieces of a slat. For a bulk scatter collection directly inside a Chart, use ManyDots. Values are on the chart’s scale. Every block also takes class, style (an object), ref, color, children, event handlers (onClick…) and HTML attributes (title, data-*, aria-*).

color is a theme name ("series-1" to "series-6", "positive", "negative", "ink", "muted", "grid", "surface", "low", "high") or any CSS color.

Bar, Dot, Tick, Label and Cell also take shape: an outline from shape() to draw instead of their rectangle (a Dot’s circle).

Bar

<Bar from={2} to={d.value} thick="10px" />

Prop	Default
from	0	where the bar starts
to	0	where it ends. Below from, the bar runs backward.
thick	the band less a margin	a size ("10px") or a share of the band (0.5)
color	series-1

Dot

<Dot at={d.value} size="14px" />

Prop	Default
at		its value
size	"10px"	its diameter
across	0.5	where it sits across the band, from 0 to 1
cross		its value on the chart’s second axis, instead of across
color	series-1

ManyDots

ManyDots draws one plain HTML point per data row, without a slat or rendering computation for each point. Place the collection directly inside a Chart with a cross scale.

<Chart scale={[0, 100]} cross={[0, 100]}>
  <ManyDots rows={samples} at={row => row.x} cross={row => row.y} key={row => row.id} />
</Chart>

Colors, sizes, shapes, classes, and styles can vary by point. Native hover, click, touch, and drag events remain available through collection handlers or event delegation. The dedicated ManyDots reference covers its props, a live example, source-build availability, and its differences from Dot.

Tick

<Tick at={d.goal} thick={0.8} />

Prop	Default
at		its value
thick	the band less a margin	its length across the band
color	ink

Label

<Label at={d.value}>{d.value}</Label>
<Label edge="start">{d.name}</Label>

Prop
at	a value	the text starts just past it
side	"before"	with at: the text ends just before the value instead
edge	"start" or "end"	outside the chart: before it (names) or after it
cross	a value	with at: its place on the chart’s second axis

Cell

<Cell value={h.count} />

Prop
value		colored from the theme’s low (at the scale’s min) to high (at its max)
color		a fixed color instead

Place

<Place at={d.value}><span class="badge">{d.value} kg</span></Place>

Draws nothing: no size, no color. What you put inside it sits at its value.

Prop	Default
at		its value
across	0.5	where it sits across the band, from 0 to 1
cross		its value on the chart’s second axis, instead of across

Area

<Area points={[[7, 1], [9, 4], [12, 7], [19, 1]]} mirror />

Prop	Default
points		[value, height] pairs, sorted by value
peak	the largest height	the height that fills the band
mirror	false	draw both ways from the band’s middle (violins)
smooth	false	join the points with curves instead of straight lines
color	series-1

Line

<Line points={[[1, 320], [2, 280], [3, 350], [4, 300]]} peak={400} fill />

Prop	Default
points		[value, y] pairs. Out of the value’s order, they make a connected scatter plot.
peak	the largest y	in a slat: the y that reaches the top of the band
fill	false	fill under the line: to the band’s edge, or on a second axis down to base
base	0	on a second axis: where the fill ends
smooth	false	join the points with curves instead of straight lines
color	series-1

In a slat, a Line is a sparkline across the band. On a chart with a second axis, its y is on that axis.