PureRenderer

PureRenderer renders a single read-only chart from a visualization specification. It has minimal UI — no toolbar, no chart tabs, no field list. This makes it ideal for embedding charts in dashboards, articles, or any context where you want a static visualization.

import { PureRenderer } from '@kanaries/graphic-walker';

When to Use

Component	Interactive	Toolbar	Multiple Charts	Field List
`GraphicWalker`	Full editing	Yes	Yes	Yes
`GraphicRenderer`	View only	Yes	Yes	No
`PureRenderer`	View only	No	No	No

Use PureRenderer when you need to display a chart with the smallest possible footprint.

Props

Local Mode (Client-Side Data)

Prop	Type	Required	Description
`rawData`	`IRow[]`	Yes	Array of data records.
`type`	`'local'`	No	Explicitly set local mode (default).

Remote Mode (Server-Side Data)

Prop	Type	Required	Description
`computation`	`IComputationFunction`	Yes	Computation function for server-side processing.
`type`	`'remote'`	Yes	Must be set to `'remote'`.

Visualization State

Prop	Type	Required	Description
`visualState`	`DraggableFieldState`	Yes	Field encodings (rows, columns, color, size, etc.).
`visualConfig`	`IVisualConfigNew`	Yes	Visualization configuration (aggregation, geom type, coord system).
`visualLayout`	`IVisualLayout`	No	Layout configuration (size, stack mode, formatting). Falls back to `visualConfig` if not provided.

Appearance Props

Prop	Type	Default	Description
`appearance`	`'media' \| 'light' \| 'dark'`	`'media'`	Dark mode setting.
`vizThemeConfig`	`IThemeKey \| GWGlobalConfig`	`undefined`	Chart theme.
`uiTheme`	`IUIThemeConfig`	`undefined`	Custom UI colors.
`overrideSize`	`{ mode: 'auto' \| 'fixed' \| 'full'; width: number; height: number }`	`undefined`	Override size from the spec.
`scales`	`IChannelScales`	`undefined`	Custom scale configurations.

Other Props

Prop	Type	Description
`name`	`string`	Chart name (used in export).
`className`	`string`	CSS class for the root element.
`locale`	`string`	Locale for number/date formatting. Defaults to `'en-US'`.
`disableCollapse`	`boolean`	Disable collapsible chart container.

Examples

Local Mode

import { PureRenderer } from '@kanaries/graphic-walker';
import type { DraggableFieldState, IVisualConfigNew, IVisualLayout } from '@kanaries/graphic-walker';
 
const data = [
  { category: 'A', value: 100 },
  { category: 'B', value: 200 },
  { category: 'C', value: 150 },
];
 
const visualState: DraggableFieldState = {
  dimensions: [],
  measures: [],
  rows: [{ fid: 'value', name: 'Value', analyticType: 'measure', semanticType: 'quantitative' }],
  columns: [{ fid: 'category', name: 'Category', analyticType: 'dimension', semanticType: 'nominal' }],
  color: [],
  opacity: [],
  size: [],
  shape: [],
  theta: [],
  radius: [],
  longitude: [],
  latitude: [],
  geoId: [],
  details: [],
  filters: [],
  text: [],
};
 
const visualConfig: IVisualConfigNew = {
  defaultAggregated: true,
  geoms: ['bar'],
  coordSystem: 'generic',
  limit: -1,
};
 
const visualLayout: IVisualLayout = {
  showTableSummary: false,
  stack: 'stack',
  showActions: false,
  interactiveScale: false,
  zeroScale: true,
  size: { mode: 'auto', width: 600, height: 400 },
  format: {},
  resolve: {},
};
 
function ChartEmbed() {
  return (
    <PureRenderer
      rawData={data}
      visualState={visualState}
      visualConfig={visualConfig}
      visualLayout={visualLayout}
    />
  );
}

Remote Mode

import { PureRenderer } from '@kanaries/graphic-walker';
import type { IComputationFunction } from '@kanaries/graphic-walker';
 
const computation: IComputationFunction = async (payload) => {
  const res = await fetch('/api/query', {
    method: 'POST',
    body: JSON.stringify(payload),
    headers: { 'Content-Type': 'application/json' },
  });
  return res.json();
};
 
function RemoteChart() {
  return (
    <PureRenderer
      type="remote"
      computation={computation}
      visualState={visualState}
      visualConfig={visualConfig}
      visualLayout={visualLayout}
    />
  );
}

With Fixed Size

<PureRenderer
  rawData={data}
  visualState={visualState}
  visualConfig={visualConfig}
  overrideSize={{ mode: 'fixed', width: 400, height: 300 }}
/>

Extracting State from GraphicWalker

You can get the visualState, visualConfig, and visualLayout from a GraphicWalker instance using storeRef, then pass them to PureRenderer:

import { useRef } from 'react';
import { GraphicWalker, PureRenderer } from '@kanaries/graphic-walker';
import type { VizSpecStore } from '@kanaries/graphic-walker';
 
function App() {
  const storeRef = useRef<VizSpecStore>(null);
 
  const handleExport = () => {
    if (!storeRef.current) return;
    const chart = storeRef.current.exportCurrentChart();
    // chart contains encodings, config, layout
    // Pass these to PureRenderer elsewhere
  };
 
  return <GraphicWalker data={data} fields={fields} storeRef={storeRef} />;
}