Skip to main content
Import <GraphProvider> and <GraphRenderer> from @graphysdk/react. They take the compiled spec and turn it into an interactive SVG chart — layout, formatting, interactivity, animation, and the chrome theme. The engine owns everything else.

​
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.
  • Chrome theme — the CSS custom properties behind the HTML around the plot: legend, tooltip, headline, footer.
  • Interactivity — pointer plumbing, hover overlays and tooltips.
  • Animation — transitioning between compiled states.
The engine owns the rest — mappings, scales, statistics, positions, hit-testing and the style cascade. Paint is decided by the spec: mark colors, grid lines, tick marks, the panel border, the graph background and the type on axis, tick and data labels all resolve from the stylesheet piped onto it.

​
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

Color scheme and the chrome tokens around the plot.

Formatting & locale

Locale-aware numbers, dates and currencies, UI strings and text direction.

Interactivity

Hover, tooltips and animation.

Styling

The stylesheet on the spec — every mark and chrome element the chart draws.
To replace how a region renders — a custom header, legend, or tooltip — see Slots under Extending.