@graphein/react

The React wrapper for Graphein — a beautiful, high-performance, agent-first data visualization library.

Install alongside react (18+, a peer dependency):

npm install @graphein/react react

import { Chart } from '@graphein/react';
import type { ChartSpec } from 'graphein';

const spec: ChartSpec = {
  type: 'bar',
  data: [
    { quarter: 'Q1', revenue: 240 },
    { quarter: 'Q2', revenue: 310 },
    { quarter: 'Q3', revenue: 280 },
    { quarter: 'Q4', revenue: 360 },
  ],
  encoding: { x: { field: 'quarter' }, y: { field: 'revenue' } },
};

export function Dashboard() {
  return (
    <div style={{ height: 360 }}>
      <Chart spec={spec} />
    </div>
  );
}

<Chart spec={…} /> renders into a fill-by-default container; pass a new spec to update in place, and it tears down on unmount. For headless control over your own element, use the useChart(spec) hook (returns a ref to attach).

Documentation

• README
• Agent Guide
• Spec Reference

MIT © Sachin Patney