@graphysdk/react

The Graphy charting SDK for React. Build a chart spec and render it from one package. The "Powered by Graphy" mark is on by default.

Learn more at graphy.dev.

Install

npm install @graphysdk/react

Requires React 19. There is no stylesheet to import.

Usage

import { GraphProvider, GraphRenderer, createSpec, pipe, geom, scale } from '@graphysdk/react';

const input = pipe(createSpec({ x: 'month', y: 'revenue' }), geom.bar(), scale.x(), scale.y());

export function Chart({ data }) {
  return (
    <GraphProvider data={data} input={input}>
      <GraphRenderer />
    </GraphProvider>
  );
}

Docs

• Quickstart
• Provider and renderer

Editable charts

import { GraphProvider } from '@graphysdk/react';
import { EditableGraphRenderer } from '@graphysdk/react/editable';

export function EditableChart({ data, input, isEditing }) {
  return (
    <GraphProvider data={data} input={input}>
      <EditableGraphRenderer mode={isEditing ? 'editable' : 'readonly'} />
    </GraphProvider>
  );
}

Hiding the mark

import { config, createSpec, geom, pipe } from '@graphysdk/react';

const input = pipe(
  createSpec({ x: 'month', y: 'revenue' }),
  geom.bar(),
  config({ content: { isBrandMarkVisible: false } })
);

Other packages

An explicit setting always wins over this package's default.

• @graphysdk/react-renderer — same React components, mark off by default
• @graphysdk/viz-engine — the engine alone, for non-React hosts

Agent skills

Install the Graphy agent skills from github.com/graphysdk/skills to set up the SDK and author charts from Cursor, Claude Code, and other coding agents.

Licence

This package is available under PolyForm Noncommercial, Small Business, or a 32-day Free Trial. Free Trial is local or internal evaluation only — it does not cover a public page. See what you can do under the trial.

For a commercial licence, talk to us.

Support

Questions and community help: Discord.