Provider & renderer

Every chart is a <GraphProvider> wrapping a <GraphRenderer>. The provider owns the data and spec and compiles them; the renderer paints the result.

import { GraphProvider, GraphRenderer } from '@graphysdk/react-renderer';

<GraphProvider input={spec} data={data} theme="light">
  <GraphRenderer sizing={{ mode: 'responsive' }} />
</GraphProvider>;

GraphProvider

Holds the inputs and produces the compiled spec. It recompiles whenever input, data or theme change.

Data

required

The data table the spec draws from.

SpecInput

required

The chart to compile — a spec from createSpec/pipe.

'light' | 'dark'

default:"light"

The active theme. See Theming.

ThemeOverrides

Per-token overrides layered over the base theme. See Theming.

Locale

Locale for formatting displayed values. See Formatting & locale.

Array<{ id: string; fontFamily: string }>

Maps font ids referenced by the spec to CSS font-family strings.

(errors: VizDiagnostic[]) => void

Fires when a compile produces errors. The chart also renders an error panel in place rather than blanking.

(warnings: VizDiagnostic[]) => void

Fires with any warnings a successful compile produced.

(next: SpecInput) => void

Fires when an interactive edit (in editable mode) mutates the spec — persist the result here. See Commands & history.

Ref<GraphHandle>

Filled with the graph’s dispatch, undo and redo, for a toolbar or key handler mounted outside the provider. See Commands & history.

Plugin[]

Custom geoms, stats and transforms registered for this graph. Frozen at mount.

GraphRenderer

Paints the provider’s compiled spec. It must be a descendant of a <GraphProvider>.

GraphSizing

default:"{ mode: 'responsive' }"

How the chart claims space. See Sizing.

'readonly' | 'editable'

default:"readonly"

'readonly' displays the chart with full interactivity; 'editable' adds inline editing of titles and labels, reported through the provider’s onChange.

boolean

default:"true"

Whether hover tooltips are shown. See Interactivity.

boolean

Animate transitions between compiled states.

GraphSlots

Per-region component overrides. See Slots.

(size) => void

Called when the container resizes, in every sizing mode.

Keep inputs stable

The provider recompiles when input or data change by reference. If you build the spec or data inline in a component, memoize them so an unrelated re-render doesn’t trigger a needless recompile:

function Chart({ rows }) {
  const spec = useMemo(
    () =>
      pipe(
        createSpec({ x: 'month', y: 'revenue' }),
        geom.line(),
        scale.x(),
        scale.y()
      ),
    []
  );
  const data = useMemo(() => ({ columns, rows }), [rows]);

  return (
    <GraphProvider input={spec} data={data}>
      <GraphRenderer />
    </GraphProvider>
  );
}

A new input costs more than the recompile: it is a new baseline, so it also clears the undo history. Watch the memo’s dependencies as well as the memo itself — a spec knob the host drives from its own state, like a palette dropdown or a highlight-style toggle, produces a new input every time it moves and drops the user’s undo stack with it. Drive knobs you want undoable through commands instead.

Errors never blank the page

A compile failure or a render-time throw is caught and shown as an error panel in place of the chart, so a bad spec degrades gracefully instead of taking down the surrounding UI. Use onError to log or surface the diagnostics yourself.

How a chart is built — the compile → render model
Commands & history — editing the spec in place, with undo/redo
Sizing · Theming · Slots

Get Started

Core concepts

Chart types

Annotations & emphasis

Rendering

Configuration

Advanced

Extending

GraphProvider

GraphRenderer

Keep inputs stable

Errors never blank the page

​GraphProvider

​GraphRenderer

​Keep inputs stable

​Errors never blank the page

​Related

GraphProvider

GraphRenderer

Keep inputs stable

Errors never blank the page

Related