FAQ

General

What is Graphic Walker?

Graphic Walker is an open-source React component for interactive data visualization. It provides a Tableau-like drag-and-drop interface for building charts, powered by a grammar-of-graphics approach. Unlike traditional BI platforms, it embeds directly into your React (or any web) application.

What license does Graphic Walker use?

Graphic Walker is released under the Apache-2.0 License (opens in a new tab).

Which browsers are supported?

Graphic Walker works in all modern browsers: Chrome, Firefox, Safari, and Edge (latest two versions). Internet Explorer is not supported.

What is the bundle size?

The @kanaries/graphic-walker package is approximately 1.5MB minified (including Vega-Lite rendering engine). With gzip compression, the transfer size is roughly 400KB.

Can I use Graphic Walker without React?

Yes. The package exports embedGraphicWalker, embedGraphicRenderer, embedPureRenderer, and embedTableWalker functions that mount components into any DOM element. See the Vanilla JS Embedding documentation.

Data

How much data can Graphic Walker handle?

In client-side mode (passing the data prop), performance depends on browser memory. As a guideline:

For large datasets, use the computation prop to delegate processing to your server.

What data formats are supported?

Graphic Walker accepts data as an array of JavaScript objects (Record<string, any>[]). You can convert from any format:

• CSV: Use Papa Parse (opens in a new tab) or the built-in file upload
• JSON: Parse directly
• Database: Query your database and pass results to the computation prop
• API: Fetch data and pass to the data prop

Can I connect to a database directly?

Not directly from the browser component. Use the server-side computation mode: implement a computation function that queries your database and returns results. See the Computation Guide.

Rendering

Does Graphic Walker support SSR (Server-Side Rendering)?

Graphic Walker requires a browser environment for rendering. In SSR frameworks like Next.js, use dynamic imports with ssr: false:

import dynamic from 'next/dynamic';
 
const GraphicWalker = dynamic(
  () => import('@kanaries/graphic-walker').then(m => m.GraphicWalker),
  { ssr: false }
);

Can I use SVG instead of Canvas for rendering?

Yes. Set useSvg: true in the layout configuration or the defaultConfig prop:

<GraphicWalker
  data={data}
  fields={fields}
  defaultConfig={{
    layout: { useSvg: true },
  }}
/>

SVG rendering produces sharper output but may be slower for large datasets.

How do I set a fixed chart size?

Use the defaultConfig prop:

<GraphicWalker
  data={data}
  fields={fields}
  defaultConfig={{
    layout: {
      size: { mode: 'fixed', width: 800, height: 600 },
    },
  }}
/>

Customization

Can I hide parts of the UI?

Yes. Use these props to control UI visibility:

How do I save and restore chart configurations?

The chart prop accepts IChart[] — an array of chart specifications. Save this array to your backend or localStorage, and pass it back to restore the state:

// Save
const charts = storeRef.current?.exportAllCharts();
localStorage.setItem('gw-charts', JSON.stringify(charts));
 
// Restore
const saved = JSON.parse(localStorage.getItem('gw-charts') || '[]');
<GraphicWalker data={data} fields={fields} chart={saved} />

Troubleshooting

Charts don't render — blank white area

Common causes:

1. Missing data: Ensure data is a non-empty array
2. Missing fields: Ensure fields array matches keys in your data
3. SSR issue: If using Next.js, import with ssr: false (see above)
4. Container size: The parent element must have a defined height

"Field not found" errors

Ensure the fid values in your fields array exactly match the property names in your data objects. Field IDs are case-sensitive.

Dark mode doesn't work

Make sure you're using the appearance prop (not the deprecated dark prop):

<GraphicWalker appearance="dark" data={data} fields={fields} />

Performance is slow

• Reduce the dataset size or switch to server-side computation
• Disable profiling with hideProfiling={true}
• Use Canvas rendering (default) instead of SVG