Overview

Everything beyond the data-to-ink mapping — titles, axes, legend, appearance, layout — is configuration. You add it by piping a config(...) part into the spec.

import { createSpec, pipe, geom, scale, config } from '@graphysdk/viz-engine';

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({
  appearance: { background: { type: 'solid', color: '#fff' } },
});

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	Content
`axes`	Labels, position, grid, ticks, baseline	Axes
`legend`	Position and display mode	Legend
`headline`	Summary numbers above or inside the chart	Headline numbers
`numberFormat`	Decimals, abbreviation, separators, affixes	Number format
`appearance`	Background, border, corner radius, text scale	Appearance
`layout`	Outer padding and per-region gaps	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.

Get Started

Core concepts

Chart types

Annotations & emphasis

Rendering

Configuration

Advanced

Extending

How config composes

Sections

​How config composes

​Sections

How config composes

Sections