The edit menu

Select a chart element in edit mode to open its menu. The header names the selection and offers visibility or selection-level controls; the rows below edit its appearance. Changes use commands and support undo and redo.

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

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

Where it opens

The menu opens 8 px from the selection, preferably on its right. It moves left, below or above as needed to stay on screen, and can overlap the selection when space is limited. Click another element to move the menu to it. Press Escape or click outside the chart to close it and clear the selection. The menu receives focus when it opens and returns focus to the chart when it closes. See Selecting. Hiding the selected element, such as an axis, leaves the menu in its last position.

The title

Guides use the titles “Axis”, “Legend” and “Grid lines”; the background uses “Chart”. Data selections use labels from their first observation:

An observation: its group and band, “North, Q4 ‘25”.
A band: the axis title and the value, “Quarter: Q4 ‘25”.
A group: the grouping variable’s label and the value, “Region: North”.

If the title is too wide, the menu shows only the value. An ungrouped layer uses its plotted variable’s label, or “All”.

The visibility button

The eye button toggles visibility for axes, legends and grid lines. Data selections and the chart background have no visibility button.

Target	Hide	Show
Legend	`SetLegendPositionCommand({ position: 'none' })`	the position it had before, or `'auto'`
Axis	`SetAxisVisibilityCommand({ axis, visible: false })`	`visible: true`
Grid lines	`SetGridVisibilityCommand({ axis, visible: false })`	the setting it had before, else `visible: true`

The button remembers the previous setting while the menu stays open. Showing a hidden legend restores its position; showing grid lines restores their previous setting, including automatic visibility. A later menu restores the legend at 'auto'. Hiding an axis uses keepSecondaryAxis: true, so hiding y leaves the secondary axis unchanged. Hidden guides keep their menu rows visible but disabled.

Levels

After a direct click on a mark, the header offers its available selection levels: the observation, band and group. Labels use the chart’s terms, such as “This bar”, “All of Q4 ‘25” and “All of North”. Pie and donut marks use “This slice”; points with a size mapping use “This bubble”. Choose a level to narrow or broaden the selection. Only levels with controls appear, and the selector is hidden when fewer than two are available. Lines have only group controls, so they have no selector. Bands selected by a near miss also have none because the click did not identify an individual observation.

Rows per target

Controls depend on the selected element. Companion layers, such as a line’s dots, use their host’s menu. The command names below link these controls to the command reference.

Chart

The Chart menu applies settings across all compatible layers. Multi-layer changes use SequenceCommand so they remain one undo step.

Controls	Commands
Chart type; Arrange: grouped, stacked, filled or lines	`SetGraphTypeCommand`
Data labels, percentages, stack totals and category labels	`ToggleDataLabelsCommand`, `SetDataLabelsFormatCommand`, `ToggleStackTotalsCommand`, `ToggleCategoryLabelsCommand`
Title, subtitle and caption visibility	`ToggleContentVisibilityCommand`
Smooth lines and missing values	`SetLineCurveCommand`, `SetLineMissingValuesCommand`
Line width, style, fill, points and point size	`SetLineStyleCommand`, `ToggleLinePointsCommand`, `SetPointSizeCommand`
Palette	`SetScaleRangeCommand`

The chart type picker excludes combo charts. Arrange appears for grouped or combo charts. Line controls apply to line and area layers.

Data marks

Target	Controls	Commands
Bar	Fill color; thickness: 0.4, 0.7 or 0.95 of the band	`SetObservationsColorCommand`, `SetBarWidthCommand`
Line or area	Color; width: 1, 2 or 4 px; style: solid, dashed or dotted; fill; show points; point size: 6, 8 or 10 px; point shape	`SetObservationsColorCommand`, `SetLineStyleCommand`, `ToggleLinePointsCommand`, `SetPointSizeCommand`, `SetPointSymbolCommand`
Point	Fill color; size: 6, 8 or 10 px; shape	`SetObservationsColorCommand`, `SetPointSizeCommand`, `SetPointSymbolCommand`
Rule or tile	No menu	—

Color controls offer the palette’s first six colors, the current color if different, and a custom color picker. Bar thickness is hidden on pies and donuts. Lines and areas support group selection only; the fill toggle is available only for cartesian lines. Point shape controls offer built-in symbols, registered glyphs and custom images. Line and area menus show these controls when points are visible. Grouped bars support band selection. Stacked bars and lines do not offer a band menu.

Axes

Cartesian axes offer these rows when applicable:

Control	Available on	Command
Title	All cartesian axes	`SetAxisLabelCommand`
Labels: auto or edges	Continuous and datetime scales	`SetAxisTickModeCommand`
Position: left or right	Continuous y-axis with no side legend	`SetAxisPositionCommand`
Scale: linear or log	Continuous y-axis not anchored at zero	`SetScaleTransformCommand`
Start from	Continuous y-axis, not logarithmic or anchored at zero	`SetScaleDomainCommand`
End at	Continuous y-axis, not logarithmic	`SetScaleDomainCommand`

Polar axes offer only the visibility button.

Grid lines and legend

Grid lines: solid, dashed or dotted; thickness of 1, 2 or 4 px. Uses SetGridLineStyleCommand. Polar grids offer only the visibility button.
Legend: eight positions around the chart. Uses SetLegendPlacementCommand.

Controls show the selection’s effective values, including theme defaults and group overrides. If selected elements have different values, no option is checked. Text and number fields update as you type and commit on blur, so editing a title creates one undo step.

Palette presets

Pass named palettes through palettePresets to add a Palette row to the Chart menu. It offers those palettes plus the theme’s colors, previewing the first three colors of each:

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

const palettePresets = {
  Brand: ['#0B5FFF', '#FF6A00', '#00B37E', '#8A2BE2'],
  Muted: ['#5B6B7A', '#9AA5B1', '#C5CDD4', '#E2E7EB'],
};

<EditableGraphRenderer mode="edit" palettePresets={palettePresets} />;

PalettePresets

Readonly<Record<string, readonly string[]>>, keyed by display name. Selecting a preset dispatches SetScaleRangeCommand with its colors; selecting the theme sets range: null. The matching preset is checked, or none if the current range matches no preset. The row requires at least one preset and a discrete color scale.

Use editMenus to replace a menu or combine built-in rows with your own. See Custom menus.

Selecting — what a press selects, and when a target opens no menu
Commands & history — every command a row dispatches
Custom menus — the editMenus contract
Provider & renderer — EditableGraphRenderer props

Get Started

Core concepts

Chart types

Rendering

Editing

Themes

Annotations & emphasis

Configuration

Advanced

Extending

Where it opens

The title

The visibility button

Levels

Rows per target

Chart

Data marks

Axes

Grid lines and legend

Palette presets

Replacing a menu

​Where it opens

​The title

​The visibility button

​Levels

​Rows per target

​Chart

​Data marks

​Axes

​Grid lines and legend

​Palette presets

​Replacing a menu

​Related

Where it opens

The title

The visibility button

Levels

Rows per target

Chart

Data marks

Axes

Grid lines and legend

Palette presets

Replacing a menu

Related