Theming

The renderer draws with a theme — a set of tokens for colors, fonts and chrome. Pick a base theme with the theme prop, then layer per-token overrides with themeOverrides.

<GraphProvider input={spec} data={data} theme="dark">
  <GraphRenderer />
</GraphProvider>

Light and dark

theme

'light' | 'dark'

default:"light"

Selects the base token set. Drives series palettes, text colors, grid and tooltip chrome.

Overriding tokens

themeOverrides is a partial map of theme tokens layered over the base. Most tokens take a CSS string; the measured font tokens (fontTickLabel, fontAxisLabel, fontLegendLabel, fontDataLabel, and a few more) take a structured object so text measurement and paint stay in sync.

import type { ThemeOverrides } from '@graphysdk/react-renderer';

const overrides: ThemeOverrides = {
  textPrimary: '#1A1A1A',
  textSecondary: '#8F8F8F',
  gridLineColor: '#E9E9E9',
  gridLineWidth: '1px',
  fontFamilyDefault: "'Inter', sans-serif",
  fontFamilyHeading: "'Golos Text', sans-serif",
  fontAxisLabel: {
    family: "'Inter', sans-serif",
    size: { value: 10.5, unit: 'px' },
    weight: 500,
  },
};

<GraphProvider
  input={spec}
  data={data}
  theme="light"
  themeOverrides={overrides}
>
  <GraphRenderer />
</GraphProvider>;

An omitted field keeps the base theme’s value, so { weight: 600 } on a font token changes only the weight.

Font token shape

A structured font override (FontTokenOverride) accepts any subset of:

family

string

CSS font-family.

weight

number

Numeric font weight.

style

FontStyle

e.g. 'normal' or 'italic'.

size

{ value: number; unit: 'px' | 'em' }

Font size.

lineHeight

number

Unitless multiplier; sizes HTML line boxes (canvas measurement ignores it).

Custom fonts

If your spec references fonts by id (for example in rich-text titles), map those ids to CSS font-family strings with fontList:

<GraphProvider
  input={spec}
  data={data}
  fontList={[{ id: 'golos', fontFamily: "'Golos Text', sans-serif" }]}
>
  <GraphRenderer />
</GraphProvider>

Make sure the fonts are actually loaded on the page (via @font-face or a font service) — the SDK references them, it doesn’t load them.

Background and borders

Chart-level background, border ring and corner radius are part of the spec’s appearance config, not the theme, because they travel with the chart. The theme governs the token defaults those settings fall back to.

Appearance — background, border and corner radius
Provider & renderer — where theme and themeOverrides are set

Get Started

Core concepts

Chart types

Annotations & emphasis

Rendering

Configuration

Advanced

Extending

Light and dark

Overriding tokens

Font token shape

Custom fonts

Background and borders

​Light and dark

​Overriding tokens

​Font token shape

​Custom fonts

​Background and borders

​Related

Light and dark

Overriding tokens

Font token shape

Custom fonts

Background and borders

Related