Skip to main content
@graphysdk/react-renderer is the React half of the SDK. It takes the compiled spec and turns it into an interactive SVG chart — owning everything the framework-agnostic engine deliberately leaves out.

​
What the renderer owns

  • Layout — measuring text and packing the header, legend, axes and plot into pixel rectangles.
  • Formatting — turning raw values into locale-aware numbers, dates and currencies.
  • Theme — light/dark palettes, colors, fonts and the chrome tokens.
  • Interactivity — hover, tooltips and hit-testing.
  • Animation — transitioning between compiled states.
The engine owns the rest — mappings, scales, statistics, positions.

​
The two components

Rendering is always a <GraphProvider> (holds the data and spec, compiles them) wrapping a <GraphRenderer> (paints the result):
The split exists so the compiled spec has a single owner: commands and updates operate on the provider’s spec, and any renderer beneath it reflects them. Provider & renderer covers both in full.

​
In this section

Provider & renderer

The two components and their props.

Sizing

Responsive, fixed and aspect-ratio modes.

Theming

Light/dark, token overrides and fonts.

Formatting & locale

Locale-aware numbers and dates.

Interactivity

Hover and tooltips.
To replace how a region renders — a custom header, legend, or tooltip — see Slots under Extending.