Skip to main content
The appearance section styles the chart frame — its background fill, its border ring, corner rounding and global text scale.

​
Background

​
background
object
default:"{ type: 'theme' }"
Chart background fill:
  • { type: 'theme' } — inherit the active theme’s background token.
  • { type: 'solid', color } — an explicit CSS color. Use 'transparent' for no fill.
  • { type: 'tinted', color? } — the theme background mixed with an anchor color; defaults to the first palette color.

​
Border ring

A border ring is painted inside the chart bounds — increasing its width shrinks the plot area. This is distinct from the panel border, which frames the plot area itself.
​
border
object
default:"{ type: 'none' }"
  • { type: 'none' } — no ring.
  • { type: 'solid', color, width } — a solid ring; pass a theme token for a theme-aware color.
  • { type: 'tinted', color?, width } — a ring tinted for the active color scheme.
  • { type: 'gradient', color?, width } — a gradient derived from color.
  • { type: 'preset', preset, width } — a named built-in gradient.

​
Corner radius

​
cornerRadius
number
default:"8"
Corner rounding in pixels for the chart frame and its content. Use 0 for square corners.

​
Text scale

​
textScale
number
default:"1"
Multiplier applied to every text element. 1.25 makes all text 25% larger; layout adjusts to match.

​
Highlight style

​
highlightStyle
'dim' | 'desaturate'
default:"dim"
How non-matched observations are de-emphasised when a highlight is active. 'dim' lowers their opacity; 'desaturate' replaces their color with neutral grey.

​
Related