Skip to main content
Import <GraphProvider> and <GraphRenderer> from @graphysdk/react. They take the scene and turn it into an interactive SVG chart: layout, formatting, interactivity, animation and the chrome tokens. 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 tokens: the CSS custom properties behind the HTML around the plot (legend, tooltip, headline, footer).
  • Interactivity: pointer handling, hover paint and tooltips.
  • Animation: transitions between compiled states.
The engine owns the rest: mappings, scales, statistics, positions, hit-testing and the style cascade. The spec decides paint. Geom 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. A theme passed to the provider sits beneath the spec’s own styles.

​
The two components

Rendering is always a <GraphProvider>, which holds the data and spec and compiles them, wrapping a <GraphRenderer>, which paints the result:
The split gives the scene one owner: commands and updates act on the provider’s spec, and every 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, the theme prop 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 geom and chrome element the chart draws.
To replace how a region renders (a custom header, legend or tooltip), see Slots under Extending.