Extending

The engine ships with a fixed set of built-in geoms, stats, and transforms — but the grammar is open. You can register your own and they become first-class: a typed builder method, compiled through the same pipeline, painted through the same renderer registry. This is the advanced surface; most charts never need it. There are two ways in. Plugins extend the grammar itself — new geoms, stats, and transforms that compile and render like the built-ins. Slots are lighter: they replace how one region of the chart renders (a header, legend, or tooltip) without touching the grammar. Most of this section is about plugins; slots are a self-contained escape hatch on the renderer.

Before writing a plugin, check whether a render-only override or an existing geom composed differently gets you there. A new geom is the right tool for a genuinely new shape, not a restyle of an existing one.

One array, both halves

Everything you add is registered through a single plugins array. Passing it once seeds two things at once — what you can write (the typed builder methods) and what can compile and render — so the authoring surface and the runtime can never drift apart.

import { createGraphyKit, defineGeomRenderer } from '@graphysdk/react-renderer';

const lollipop = defineGeomRenderer(new LollipopGeom(), lollipopRenderer);

const kit = createGraphyKit({ plugins: [lollipop] });
// kit.geom.lollipop(...) now exists and is typed from the definition

Two entry points

createGraphyKit

react-renderer

The ergonomic one. Returns the typed builder (geom / stat / transform / scale / coord / createSpec / pipe) and a GraphProvider already bound to the same plugins. Reach for this in a React app.

createGraphyBuilder + <GraphProvider plugins>

viz-engine

The primitives createGraphyKit wraps. Use createGraphyBuilder({ plugins }) for the headless authoring surface and pass the same array to <GraphProvider plugins={...}>. Choose this for framework-agnostic or advanced wiring.

Both take the same plugins array. The kit is pure sugar — it calls createGraphyBuilder and pre-binds a provider, nothing more.

What you can add

Extension	Adds	Halves
Custom geom	A new kind of shape	Compile half (`Geom`) + render half (`defineGeomRenderer`)
Render-only override	A restyle of a built-in geom’s paint	Render half only — geometry unchanged
Custom stat	A per-layer data reshaping before mapping	Compile half only
Custom transform	A dataset reshaping	Compile half only

A geom has two halves because it both places observations (compile) and paints them (render). Stats and transforms only touch data, so they’re compile-only — no renderer.

Slots

Replace a region’s render — no plugin, no geom.

Custom geoms

Define a new shape with Geom — position roles, aesthetics, and the compile step.

Geom renderers

defineGeomRenderer, render-only overrides, hit-testing, and hover.

Custom stats

A layer-scoped data reshaping that runs before mapping.

Custom transforms

Reshape the dataset before it becomes a layer.

How a chart is built — the pipeline your plugin joins
Rendering — the renderer that hosts slots and geom renderers

Get Started

Core concepts

Chart types

Annotations & emphasis

Rendering

Configuration

Advanced

Extending

One array, both halves

Two entry points

What you can add

Slots

Custom geoms

Geom renderers

Custom stats

Custom transforms

​One array, both halves

​Two entry points

​What you can add

Slots

Custom geoms

Geom renderers

Custom stats

Custom transforms

​Related

One array, both halves

Two entry points

What you can add

Related