axes section controls how each position scale is drawn: its label, side, grid lines and ticks. It is keyed by axis: x, y, and ySecondary for combo charts.
Per-axis options
string | null
default:"null"
Axis title. With
null the axis shows the column’s label from the
data when one is declared, otherwise no title.boolean
default:"true"
Whether the axis is drawn at all.
'left' | 'right' | 'top' | 'bottom'
Which side the axis sits on. Defaults to
'bottom' for x and 'right' for
y. A side that does not match the axis orientation is ignored: on a flipped
graph x runs vertically, so 'bottom' gives way to the side the coord
assigns.object
Grid lines for this axis — see below.
object
Ticks for this axis — see below.
Grid lines
Each axis owns its grid. Config decides whether the lines are drawn:boolean | null
default:"null"
true or false forces visibility. null lets the geom decide: bars hide
the band-axis grid, tiles hide both. With nothing to decide from, the x and
y grids show and a secondary y grid stays hidden.gridLine target.
The built-in stylesheet draws y grid lines dashed and gives x grid lines strokeWidth: 0, so
vertical grid lines appear only once you give them a width, even where config allows them:
Ticks
boolean
Whether tick marks, the short lines that step out of the axis, are drawn.
Defaults to
true for x and false for y. Tick labels render either way.
Their paint lives on the stylesheet’s tickLabel target; the marks’ paint on
tickLine.tickLine has strokeWidth: 0 and length: 0, so tick marks stay invisible until
the stylesheet sizes them. ticks.visible then decides whether they are drawn and whether their
length reserves space:
'auto' | 'edges'
default:"auto"
'auto' places ticks across the axis. 'edges' keeps only the two domain
endpoints of a continuous or datetime axis. Discrete axes keep their full
domain either way.The axis controls labels, ticks and grid. The range comes from its
scale: use
scale.y.continuous({ domainMin: 0, nice: true }) to pin bounds.The second y axis
ySecondary is a sparse override of the primary y axis, for
combo charts that pair two value scales. Every field you leave unset
is inherited at compile time:
ySecondary.position, it keeps that side however y moves.
Panel border and baseline
The panel is the plot area. Its border is painted from the stylesheet, one entry per edge. That is how you draw a single baseline under the bars, or a full frame around the plot:.top, .right, .bottom, .left) takes stroke, strokeWidth and
dashArray. An edge with strokeWidth: 0 is hidden and reserves no space, so the bare
style.panelBorder({ strokeWidth: 0 }) entry above clears all four before the baseline is put back.
A tick that lands on a drawn edge draws no grid line of its own; the edge stands in for it.
Corner rounding applies to the whole panel and lives on the bare builder:
cornerRadius: 6. See
Styling for how entries resolve.
Related
- Scales — the axis range and type
- Styling — grid, tick, panel-border and frame paint
- Layout › Panel overflow — how the panel makes room for labels that spill past its edge