@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 spec = pipe(createSpec({ x: 'month', y: 'revenue' }), geom.bar(), scale.x(), scale.y());

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

Docs

• Quickstart
• Provider and renderer

Editable charts

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

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

Hiding the mark

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

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

Chart count

Production browser builds send one anonymous count the first time a chart appears. The count includes the chart type and similar flags. It does not include cell values, column names, or labels. Development builds print one console line and send nothing.

<GraphProvider data={data} spec={spec} telemetry={false}>
  <GraphRenderer />
</GraphProvider>

Custom geoms

Plugin authoring uses the same package. Geom, the value readers, defineGeomRenderer, and createGraphyKit are all exported from @graphysdk/react — there is no need to add @graphysdk/viz-engine or @graphysdk/react-renderer as direct dependencies.

import { Geom, createGraphyKit, defineGeomRenderer } from '@graphysdk/react';

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.