Skip to main content
The axes section controls how each position scale is drawn — its label, side, grid lines and ticks. It’s keyed by axis: x, y, and ySecondary for combo charts.

​
Per-axis options

​
label
string | null
Axis title text. null means no label.
​
isVisible
boolean
default:"true"
Whether the axis is drawn at all.
​
position
'left' | 'right' | 'top' | 'bottom'
Which side the axis sits on. Defaults to 'bottom' for x and 'right' for y.
​
grid
object
Grid lines for this axis — see below.
​
ticks
object
Ticks for this axis — see below.

​
Grid lines

Each axis owns its grid. Toggle visibility and style the lines:
​
grid.isVisible
boolean | null
true/false to force visibility; null lets the engine decide from the geom (e.g. bar charts hide the category-axis grid by default).
​
grid.lineStyle
'solid' | 'dashed' | 'dotted'
default:"dashed"
Dash pattern of the grid lines.
​
grid.lineWidth
number | null
Grid line width in px. null inherits the theme’s grid line width.

​
Ticks

​
ticks.isVisible
boolean
Whether tick labels are shown for this axis.
​
ticks.mode
'auto' | 'edges'
'auto' places ticks across the axis; 'edges' shows only the first and last.
The axis controls labels, ticks and grid; the range of an axis comes from its scale — use scale.y.continuous({ domainMin: 0, nice: true }) to pin bounds.

​
Panel border and baseline

The panel is the plot area. Its border is configured per edge, which is how you draw a single baseline under the bars or a full frame around the plot:
Each edge (top, right, bottom, left) takes isVisible, lineStyle, lineWidth (px, null inherits the theme), and color (any CSS color or theme token, null inherits). A corner is rounded only when both edges meeting at it are visible.

​
Related

  • Scales — the axis range and type
  • Appearance — the border ring around the whole chart