szum. Themes

Some features on this page require a paid plan. See Plans & Limits.

Pick a theme and get typography, colors, axes, and grid – all coherent, no tweaking required.

All themes

editorial

Inter

clean

Inter Tight

noir

Geist

loud

Archivo

soft

Nunito

technical

IBM Plex Sans

Try them

Click a theme to see it applied to the same chart.

Inter

Setting a theme is one property:

{ "theme": "editorial" }

Which theme for what

Context	Recommended
Data journalism, reports	`editorial`
Product dashboards, SaaS	`clean`
Dark UI, presentations	`noir`, `loud`
Dashboards, technical reports	`technical`
Consumer-facing, friendly	`soft`

Color palettes

Every theme ships with a 10-color categorical palette and a sequential gradient.

editorialInter

sequential

cleanInter Tight

sequential

noirGeist

sequential

loudArchivo

sequential

softNunito

sequential

technicalIBM Plex Sans

sequential

Customizing

themeOverrides merges with the base theme – only specify what you want to change. Requires a Pro plan.

Available fonts

Each built-in theme ships with a curated font pairing. Every text element in the chart – title, subtitle, axis labels, tick labels – uses the theme's fontFamily.

Inter

400, 700

Fraunces

600

Inter Tight

400, 600, 700

Geist

400, 500, 600

Archivo

400, 700, 600, 800, 500

Unbounded

800

Nunito

400, 600

Baloo 2

700

IBM Plex Sans

400, 500, 600

IBM Plex Mono

400

Any Google Font (Pro)

On a Pro plan, you can use any of 1,943 Google Fonts families via themeOverrides.fontFamily. Fonts are embedded in SVG output automatically.

{
  "theme": "editorial",
  "themeOverrides": {
    "fontFamily": "Cormorant Garamond"
  }
}

Free plans use the five built-in theme fonts above.

All properties

Every theme property with its type and default value. Defaults shown are from the editorial theme. Override any of these via themeOverrides.

Property	Type	Default (editorial)	Description
`backgroundColor`	string	`"#f9f7f4"`	Chart canvas background.
`sequentialRange`	[string, string]	`["#e7e0d5","#23314c"]`	Start and end colors for sequential scales.
`colors`	string[]	`[10 items]`	Categorical color palette (up to 10).
`fontFamily`	string	`"Inter"`	Any Google Fonts family name (body text: ticks, labels).
`titleFontFamily`	string	`"Fraunces"`	Display family for the title (defaults to the body family).
`numericFontFamily`	string	`"Inter"`	Family for numeric axis tick labels – set a monospace for tabular figures.
`fontSize`	number	`12`	Base font size for tick labels.
`titleFontWeight`	string	`"600"`	Title font weight.
`titleFontSize`	number	`24`	Title font size in pixels.
`subtitleFontSize`	number	`14`	Subtitle font size in pixels.
`titleColor`	string	`"#1a1a1a"`	Title text color.
`subtitleColor`	string	`"#6b6b6b"`	Subtitle text color.
`titleSubtitleGap`	number	`8`	Space between title and subtitle.
`headerGap`	number	`14`	Space between header block and plot area.
`footerFontSize`	number	`11`	Footer caption font size in pixels.
`footerColor`	string	`"#8a8276"`	Footer caption text color.
`footerLinkColor`	string	`"#4f7ca8"`	Color of auto-detected links in the footer.
`footerGap`	number	`18`	Space between the plot area and the footer caption.
`axisLineWidth`	number	`0.75`	Axis line thickness.
`axisColor`	string	`"#a89f8e"`	Axis line color.
`axisLabelColor`	string	`"#4a4a4a"`	Axis label text color.
`axisLabelFontWeight`	string	`"700"`	Axis label font weight.
`gridLineWidth`	number	`0.3`	Grid line thickness.
`gridColor`	string	`"#e6e0d6"`	Grid line color.
`tickSize`	number	`0`	Tick mark length in pixels.
`tickPadding`	number	`7`	Space between tick mark and label.
`tickLabelColor`	string	`"#6b6b6b"`	Tick label text color.
`tickLabelFontWeight`	string	`"400"`	Tick label font weight.
`tickDensity`	number	`0.6`	Fraction of tick marks to keep, 0–1 (1 = all; lower drops intermediate ticks, keeping the ends).
`gridLines`	"none" \| "value" \| "both"	`"value"`	Which axis carries gridlines (value = the measure axis only).
`axisFrame`	"none" \| "baseline" \| "lShape" \| "full"	`"baseline"`	Axis enclosure: frameless, just the baseline, an L-shape, or a full box.
`curve`	"linear" \| "monotone" \| "step"	`"linear"`	Line/area interpolation (a line/area mark's curve overrides). monotone smooths without overshoot.
`barPadding`	number	`0.18`	Gap between bars as a fraction of the band (0–1).
`barCornerRadius`	number	`0`	Corner radius on the value end of bars (a bar mark's cornerRadius overrides).
`pieCornerRadius`	number	`0`	Corner radius on pie/donut slices (a pie mark's cornerRadius overrides).
`lineStrokeWidth`	number	`2.25`	Default line thickness (a line mark's strokeWidth overrides).
`dotRadius`	number	`3`	Default dot/scatter radius (a dot mark's r overrides).
`labelColor`	string	`"#1a1a1a"`	Value label text color (used off-mark, e.g. above a bar).
`labelFontSize`	number	`12`	Value label font size in pixels.
`labelFontWeight`	string	`"700"`	Value label font weight.
`labelHaloWidth`	number	`2.5`	Halo thickness behind value labels for legibility (0 off).
`labelMutedFontWeight`	string	`"400"`	Font weight for a muted (secondary) part of a composite label.
`labelMutedOpacity`	number	`0.7`	Opacity for a muted (secondary) part of a composite label.

Themes

On this page