# @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](https://graphy.dev).

## Install

```bash
npm install @graphysdk/react
```

Requires React 19. There is no stylesheet to import.

## Usage

```tsx
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](https://docs.graphy.dev/sdk-next/quickstart)
- [Provider and renderer](https://docs.graphy.dev/sdk-next/rendering/provider-and-renderer)

## Editable charts

```tsx
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

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

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

## 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.

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

## Other packages

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

- [`@graphysdk/react-renderer`](https://www.npmjs.com/package/@graphysdk/react-renderer) — same React components, mark off by default
- [`@graphysdk/viz-engine`](https://www.npmjs.com/package/@graphysdk/viz-engine) — the engine alone, for non-React hosts

## Agent skills

Install the Graphy agent skills from [github.com/graphysdk/skills](https://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](https://docs.graphy.dev/licence/evaluation).

For a commercial licence, [talk to us](https://graphy.dev/license).

## Support

Questions and community help: [Discord](https://discord.gg/yGmYCjkSr).