Skip to main content
The Graphy SDK is a charting library for React, built on a grammar of graphics. Rather than picking a chart from a fixed menu, you describe a chart by composing a handful of parts — which columns map to which aesthetics, what shapes to draw, and how values become positions and colors. The same parts recombine into everything from a line chart to a polar racetrack.

​
Two packages

The SDK is split along a clean seam:
  • @graphysdk/viz-engine — a framework-agnostic engine. You author a spec (a small, immutable description of a chart) and the engine compiles it, resolving scales, statistics, positions and guides. No DOM, no React.
  • @graphysdk/react-renderer — a React renderer that paints a compiled spec to SVG. It owns layout, theming, locale-aware formatting, interactivity and animation.
You author a spec once and hand it, with your data, to the renderer. Because the engine is framework-agnostic, the same spec can drive other renderers or run on a server — but for most apps you’ll use it through React.

​
Anatomy of a spec

A spec is assembled from a few kinds of part, folded together with pipe:
Each part has a concept page that explains it in depth: The builders are convenience — what they produce is a plain, JSON-serializable object. You can store a spec in a database and load it back to render, no builder required. See Serializable spec.

​
Where to start

Quickstart

Install the packages and render your first chart.

How a chart is built

The spec pipeline and the compile → render model.

Data structure

The data table and how mappings reference it.

Chart types

Recipes for line, bar, pie, scatter and more.