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

Data

required

The data table the spec draws from.

input

SpecInput

required

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

theme

'light' | 'dark'

default:"light"

The active theme. See Theming.

themeOverrides

ThemeOverrides

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

formattingLocale

Locale

Locale for formatting displayed values. See Formatting & locale.

fontList

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

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

onError

(errors: VizDiagnostic[]) => void

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

onWarnings

(warnings: VizDiagnostic[]) => void

Fires with any warnings a successful compile produced.

onChange

(next: CompilerInput) => void

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

plugins

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>.

sizing

GraphSizing

default:"{ mode: 'responsive' }"

How the chart claims space. See Sizing.

mode

'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.

showTooltips

boolean

default:"true"

Whether hover tooltips are shown. See Interactivity.

isAnimated

boolean

Animate transitions between compiled states.

slots

GraphSlots

Per-region component overrides. See Slots.

onResize

(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>
  );
}

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
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