Overview

Titles, axes, legend, headline numbers, number formatting and layout are configuration. You add them by piping a config(...) part into the spec.

import { createSpec, pipe, geom, scale, config } from '@graphysdk/react';

const spec = pipe(
  createSpec({ x: 'month', y: 'revenue' }),
  geom.line(),
  scale.x(),
  scale.y(),
  config({
    content: { title: 'Monthly revenue', isTitleVisible: true },
    axes: { y: { label: 'Revenue (£)' } },
    legend: { position: 'bottom' },
  })
);

How config composes

config is just another spec part, so it follows the same pipe rules as the rest — with one twist: config deep-merges. Piping several config(...) parts combines them rather than replacing, so you can layer a shared base with per-chart overrides:

const base = config({
  layout: { padding: 32 },
  numberFormat: { decimals: 0 },
});

const spec = pipe(
  createSpec({ x: 'month', y: 'revenue' }),
  geom.bar(),
  scale.x(),
  scale.y(),
  base,
  config({ content: { title: 'Q1', isTitleVisible: true } }) // merged onto base
);

Anything you don’t set keeps its resolved default.

Sections

Section	Controls	Page
`content`	Title, subtitle, caption, source, provenance mark	Content
`axes`	Labels, position, grid visibility, ticks	Axes
`legend`	Position, alignment and display mode	Legend
`headline`	Summary numbers above or inside the chart	Headline numbers
`numberFormat`	Decimals, abbreviation, separators, affixes	Number format
`panel`	How the plot area accommodates overflowing content	Layout
`layout`	Outer padding, per-region gaps, text scale	Layout

Data labels sit slightly apart — they’re a per-layer geom option rather than a config section, because labels attach to a specific observation.

Paint is a separate surface. The graph background, the panel border, grid and tick strokes and label typography all come from a stylesheet you pipe in as styles({...}) — see Styling.

appearance.textScale multiplies the size of every text element. Because it changes measured text — and therefore the size of every region — it’s documented with Layout.

Locale

'en-GB' | 'en-US' | 'ar' | 'pt-PT'

default:"en-US"

The locale used to interpret source values, and the fallback for formatting display output — axis labels, tick labels, tooltips and headline numbers. Pass formattingLocale to the renderer to override display only; it resolves as formattingLocale ?? parsingLocale.

config({ parsingLocale: 'en-GB' });

Get Started

Core concepts

Chart types

Annotations & emphasis

Rendering

Configuration

Advanced

Extending

How config composes

Sections

Locale

​How config composes

​Sections

​Locale

How config composes

Sections

Locale