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

modern

Inter

editorial

Playfair Display

dark

Inter

neon

Space Mono

pastel

Nunito

technical

JetBrains Mono

Try them

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

Playfair Display

Setting a theme is one property:

{ "theme": "editorial" }

Which theme for what

Context	Recommended
Data journalism, reports	`editorial`
Product dashboards, SaaS	`modern`
Dark UI, presentations	`dark`, `neon`
Dashboards, technical reports	`technical`
Consumer-facing, friendly	`pastel`

Color palettes

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

modernInter

sequential

editorialPlayfair Display

sequential

darkInter

sequential

neonSpace Mono

sequential

pastelNunito

sequential

technicalJetBrains Mono

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, 600

Playfair Display

400, 700

JetBrains Mono

400

Space Mono

400, 700

Nunito

400, 600

Any Google Font (Pro)

On a Pro plan, you can use any of 1,938+ 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 modern theme. Override any of these via themeOverrides.

Property	Type	Default (modern)	Description
`backgroundColor`	string	`"#ffffff"`	Chart canvas background.
`sequentialRange`	[string, string]	`["#e0ecf4","#4c78a8"]`	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.
`fontSize`	number	`12`	Base font size for tick labels.
`titleFontWeight`	string	`"600"`	Title font weight.
`titleFontSize`	number	`18`	Title font size in pixels.
`subtitleFontSize`	number	`13`	Subtitle font size in pixels.
`titleColor`	string	`"#111"`	Title text color.
`subtitleColor`	string	`"#777"`	Subtitle text color.
`titleSubtitleGap`	number	`6`	Space between title and subtitle.
`headerGap`	number	`12`	Space between header block and plot area.
`axisLineWidth`	number	`0.6`	Axis line thickness.
`axisColor`	string	`"#bbb"`	Axis line color.
`axisLabelColor`	string	`"#444"`	Axis label text color.
`axisLabelFontWeight`	string	`"600"`	Axis label font weight.
`gridLineWidth`	number	`0.5`	Grid line thickness.
`gridColor`	string	`"#f0f0f0"`	Grid line color.
`tickSize`	number	`4`	Tick mark length in pixels.
`tickPadding`	number	`4`	Space between tick mark and label.
`tickLabelColor`	string	`"#666"`	Tick label text color.
`tickLabelFontWeight`	string	`"400"`	Tick label font weight.

On this page