Overview

Click a bar, line, axis, legend, grid line or chart background to open its editing controls. Every change uses a command, supports undo and redo, and reaches the provider’s onSpecChange callback.

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

<GraphProvider spec={spec} data={data} onSpecChange={saveSpec}>
  <EditableGraphRenderer mode="edit" />
</GraphProvider>;

EditableGraphRenderer

Replace GraphRenderer with EditableGraphRenderer to add menus, selection outlines and inline text editors. It accepts the same props, plus editMenus and palettePresets. Setting mode="edit" on a plain GraphRenderer does not enable editing. The editor has a separate entry so read-only charts do not load it. Import GraphProvider and builders from @graphysdk/react; import EditableGraphRenderer and command classes from @graphysdk/react/editable.

Modes

mode controls chart interaction and defaults to 'readonly'.

Mode	Interaction	Tooltips	Annotations
`'readonly'`	View the chart	Yes	Visible
`'annotate'`	Add, move and edit annotations	No	Editable
`'edit'`	Select chart elements and open their controls	No	Hidden
`'static'`	Display for exports and print, without hover or animation	No	Visible

This section covers 'edit' mode. It replaces the usual hover styling with selection outlines and temporarily hides annotations. Switching back restores them. See Annotations for annotation configuration and commands.

Install

npm install @graphysdk/react

pnpm add @graphysdk/react

yarn add @graphysdk/react

bun add @graphysdk/react

The /editable entry also requires these TipTap v3 packages for inline text editing:

npm install @tiptap/core @tiptap/pm @tiptap/react @tiptap/extensions \
  @tiptap/extension-bold @tiptap/extension-document @tiptap/extension-hard-break \
  @tiptap/extension-heading @tiptap/extension-italic @tiptap/extension-link \
  @tiptap/extension-paragraph @tiptap/extension-text @tiptap/extension-text-align \
  @tiptap/extension-text-style @tiptap/extension-underline

pnpm add @tiptap/core @tiptap/pm @tiptap/react @tiptap/extensions \
  @tiptap/extension-bold @tiptap/extension-document @tiptap/extension-hard-break \
  @tiptap/extension-heading @tiptap/extension-italic @tiptap/extension-link \
  @tiptap/extension-paragraph @tiptap/extension-text @tiptap/extension-text-align \
  @tiptap/extension-text-style @tiptap/extension-underline

yarn add @tiptap/core @tiptap/pm @tiptap/react @tiptap/extensions \
  @tiptap/extension-bold @tiptap/extension-document @tiptap/extension-hard-break \
  @tiptap/extension-heading @tiptap/extension-italic @tiptap/extension-link \
  @tiptap/extension-paragraph @tiptap/extension-text @tiptap/extension-text-align \
  @tiptap/extension-text-style @tiptap/extension-underline

bun add @tiptap/core @tiptap/pm @tiptap/react @tiptap/extensions \
  @tiptap/extension-bold @tiptap/extension-document @tiptap/extension-hard-break \
  @tiptap/extension-heading @tiptap/extension-italic @tiptap/extension-link \
  @tiptap/extension-paragraph @tiptap/extension-text @tiptap/extension-text-align \
  @tiptap/extension-text-style @tiptap/extension-underline

No stylesheet import is needed. Each entry injects its own styles when it loads.

A chart with an edit toggle

Keep mode in state and toggle it from a button. This example also keeps edits in React state and uses handleRef to enable undo and redo shortcuts:

import { useRef, useState } from 'react';
import {
  createSpec,
  type Data,
  geom,
  type GraphHandle,
  type GraphMode,
  GraphProvider,
  pipe,
  scale,
  useGraphHistoryShortcuts,
} from '@graphysdk/react';
import { EditableGraphRenderer } from '@graphysdk/react/editable';

function EditableChart({ data }: { data: Data }) {
  const [mode, setMode] = useState<GraphMode>('readonly');
  const handleRef = useRef<GraphHandle>(null);
  useGraphHistoryShortcuts(handleRef);

  const [spec, setSpec] = useState(() =>
    pipe(
      createSpec({ x: 'month', y: 'revenue' }),
      geom.bar(),
      scale.x(),
      scale.y()
    )
  );

  return (
    <>
      <button onClick={() => setMode(mode === 'edit' ? 'readonly' : 'edit')}>
        {mode === 'edit' ? 'Done' : 'Edit'}
      </button>
      <GraphProvider
        spec={spec}
        data={data}
        handleRef={handleRef}
        onSpecChange={setSpec}
      >
        <EditableGraphRenderer mode={mode} />
      </GraphProvider>
    </>
  );
}

Switching mode preserves the chart and its undo history, but clears the selection and closes the menu. A user can change a color, click Done and still undo it. Passing the exact value from onSpecChange back as spec preserves history. An independently created spec starts a new history. To keep edits after a reload, see Saving the chart.

In this section

Selecting

Select chart elements, narrow a selection and use the keyboard.

The edit menu

Controls available for each chart element.

Commands & history

Dispatch edits, group live changes, undo, redo and save.

Custom menus

Replace or extend a target’s menu with editMenus, reusing Graphy’s rows.

Editor panel

Build a settings panel from ready-made sections.

Without a bundler

Add editing to a plain HTML page with a CDN bundle.

Provider & renderer — onSpecChange, handleRef, the mode prop
Commands & history — the path every edit takes
Serializable spec — the spec onSpecChange hands you, and how to store it

Get Started

Core concepts

Chart types

Rendering

Editing

Themes

Annotations & emphasis

Configuration

Advanced

Extending

EditableGraphRenderer

Modes

Install

A chart with an edit toggle

In this section

Selecting

The edit menu

Commands & history

Custom menus

Editor panel

Without a bundler

​EditableGraphRenderer

​Modes

​Install

​A chart with an edit toggle

​In this section

Selecting

The edit menu

Commands & history

Custom menus

Editor panel

Without a bundler

​Related

EditableGraphRenderer

Modes

Install

A chart with an edit toggle

In this section

Related