Editor panels - Graphy SDK

Overview

All editor panels must be rendered inside EditorProvider and GraphProvider to function correctly:

import { GraphProvider, graphyLightTheme } from '@graphysdk/core';
import { EditorProvider, GraphPanel } from '@graphysdk/editor';
import { useState } from 'react';

function MyEditor() {
  const [config, setConfig] = useState(initialConfig);

  return (
    <GraphProvider theme={graphyLightTheme} config={config} onChange={(update) => setConfig({ ...config, ...update })}>
      <EditorProvider>
        <GraphPanel />
        {/* ... or other panels ... */}
      </EditorProvider>
    </GraphProvider>
  );
}

Size panel

Controls for setting graph size using presets or custom values.

import { SizePanel } from '@graphysdk/editor';

<SizePanel />;

Props

Prop	Type	Default	Description
`defaultExpanded`	`string`	–	The title of the section to expand by default

Sections

SizePresetsSection – Predefined size options (e.g., social media formats)
CustomSizeSection – Custom width and height inputs

Custom composition

import { SizePanel, SizePresetsSection, CustomSizeSection } from '@graphysdk/editor';

<SizePanel>
  <SizePresetsSection />
  <CustomSizeSection />
</SizePanel>;

Graph panel

Core graph configuration including type, legend and number formatting.

import { GraphPanel } from '@graphysdk/editor';

<GraphPanel />;

Props

Prop	Type	Default	Description
`defaultExpanded`	`string`	`"Graph type"`	The title of the section to expand by default

Sections

GraphTypeSection – Choose chart type (column, bar, line, pie, etc.)
GraphOptionsSection – Chart-specific options
LegendPositionSection – Control legend visibility and position
HeadlineNumberSection – Configure headline number display
NumberFormatSection – Number formatting options (prefix, suffix, decimals)

Custom composition

import {
  GraphPanel,
  GraphTypeSection,
  GraphOptionsSection,
  LegendPositionSection,
  HeadlineNumberSection,
  NumberFormatSection,
} from '@graphysdk/editor';

<GraphPanel>
  <GraphTypeSection />
  <GraphOptionsSection />
  <LegendPositionSection />
  <HeadlineNumberSection />
  <NumberFormatSection />
</GraphPanel>;

Axes panel

Customize the main and cross axes.

import { AxesPanel } from '@graphysdk/editor';

<AxesPanel />;

Props

Prop	Type	Default	Description
`defaultExpanded`	`string`	–	The title of the section to expand by default

Sections

MainAxisSection – Configure the primary axis (usually y-axis)
CrossAxisSection – Configure the secondary axis (usually x-axis)

Custom composition

import { AxesPanel, MainAxisSection, CrossAxisSection } from '@graphysdk/editor';

<AxesPanel>
  <MainAxisSection />
  <CrossAxisSection />
</AxesPanel>;

Color panel

Manage graph colors, backgrounds and border styles.

import { ColorPanel } from '@graphysdk/editor';

<ColorPanel />;

Props

Prop	Type	Default	Description
`defaultExpanded`	`string`	`"Palette"`	The title of the section to expand by default

Sections

ThemeSection – Select from dark or light mode
PaletteSection – Pick a graph color palette
ChartBackgroundSection – Set graph background color
ChartBorderSection – Set graph border style
HighlightColorSection – Set highlight color

Custom composition

import {
  ColorPanel,
  ThemeSection,
  PaletteSection,
  ChartBackgroundSection,
  ChartBorderSection,
  HighlightColorSection,
} from '@graphysdk/editor';

<ColorPanel>
  <ThemeSection />
  <PaletteSection />
  <ChartBackgroundSection />
  <ChartBorderSection />
  <HighlightColorSection />
</ColorPanel>;

Elements panel

Control visibility and styling of chart text elements.

import { ElementsPanel } from '@graphysdk/editor';

<ElementsPanel />;

Props

Prop	Type	Default	Description
`defaultExpanded`	`string`	–	The title of the section to expand by default

Sections

TextVisibilitySection – Toggle visibility of titles, labels and annotations
SourceSection – Add and edit data source attribution
TextSizeSection – Adjust font sizes for graph elements

Custom composition

import { ElementsPanel, TextVisibilitySection, SourceSection, TextSizeSection } from '@graphysdk/editor';

<ElementsPanel>
  <TextVisibilitySection />
  <SourceSection />
  <TextSizeSection />
</ElementsPanel>;

Annotate panel

Add annotations like call-outs and highlights to draw attention to specific data points.

import { AnnotatePanel } from '@graphysdk/editor';

<AnnotatePanel />;

Sections

CallOutSection – Text annotations, arrows, boxes and difference arrows
HighlightSection – Highlight specific data points, lines or groups of data points

Custom composition

import { AnnotatePanel, CallOutSection, HighlightSection } from '@graphysdk/editor';

<AnnotatePanel>
  <CallOutSection />
  <HighlightSection />
</AnnotatePanel>;

Props

AnnotatePanel

Prop	Type	Default	Description
`defaultExpanded`	`string`	–	The title of the section to expand by default
`closePanel`	`() => void`	–	Optional callback invoked when panel should close
`callOutProps`	`CallOutSectionProps`	–	Optional props to pass to the CallOutSection

CallOutSection

The CallOutSection accepts an optional hiddenButtons prop to hide specific buttons:

Prop	Type	Description
`hiddenButtons`	`CallOutButton[]`	Array of button names to hide. Options: `'text'`, `'arrow'`, `'shape'`, `'differenceArrows'`

import { AnnotatePanel } from '@graphysdk/editor';

// Hide the shape and difference arrows buttons
<AnnotatePanel callOutProps={{ hiddenButtons: ['shape', 'differenceArrows'] }} />;

Or use CallOutSection directly:

import { CallOutSection } from '@graphysdk/editor';

<CallOutSection hiddenButtons={['shape', 'differenceArrows']} />;

Power-ups panel

Add goals, trend lines and average lines.

import { PowerUpPanel } from '@graphysdk/editor';

<PowerUpPanel />;

Props

Prop	Type	Default	Description
`defaultExpanded`	`string`	–	The title of the section to expand by default

Sections

GoalPowerUpSection – Add goal lines to set targets
TrendPowerUpSection – Add trend lines to show the trend of a series
AveragePowerUpSection – Add average lines to show the average value of a series

Custom composition

import { PowerUpPanel, GoalPowerUpSection, TrendPowerUpSection, AveragePowerUpSection } from '@graphysdk/editor';

<PowerUpPanel>
  <GoalPowerUpSection />
  <TrendPowerUpSection />
  <AveragePowerUpSection />
</PowerUpPanel>;

Panel composition

All panels support custom composition by passing children. This allows you to:

Reorder sections within a panel
Include only specific sections
Add custom controls alongside built-in sections

import { GraphPanel, GraphTypeSection, NumberFormatSection } from '@graphysdk/editor';

// Custom "Graph" panel with only graph type and number formatting sections
<GraphPanel>
  <GraphTypeSection />
  <NumberFormatSection />
  {/* GraphOptionsSection, LegendPositionSection and HeadlineNumberSection are excluded */}
</GraphPanel>;

Building a custom panel

You can build completely custom panels and sections using the EditorPanel layout primitives.

Custom panel structure

A custom panel is built using EditorPanel.Root and EditorPanel.Section:

import { EditorPanel } from '@graphysdk/editor';

export const CustomPanel = () => {
  return (
    <EditorPanel.Root>
      {/* import existing sections */}
      <NumberFormatSection />
      {/* or build your own custom sections from scratch */}
      <EditorPanel.Section title="My section">{/* controls go here */}</EditorPanel.Section>
    </EditorPanel.Root>
  );
};

EditorPanel.Root props

Prop	Type	Description
`defaultExpanded`	`string`	The title of the section to expand by default. If not provided, all collapsible sections start collapsed.

// Expand "Number format" section by default
<EditorPanel.Root defaultExpanded="Number format">
  <GraphTypeSection />
  <NumberFormatSection />
</EditorPanel.Root>

Creating custom sections

Sections can have three layouts: fixed, collapsible or inline:

import { EditorPanel } from "@graphysdk/editor";

// Fixed section (always expanded)
<EditorPanel.Section layout="fixed" title="My Section">
  {/* Controls go here */}
</EditorPanel.Section>

// Collapsible section (can be expanded/collapsed)
<EditorPanel.Section layout="collapsible" title="My Section">
  {/* Controls go here */}
</EditorPanel.Section>

// Inline section (controls shown inline with title)
<EditorPanel.Section layout="inline" title="My Section">
  {/* Controls go here */}
</EditorPanel.Section>

​Overview

​Size panel

​Props

​Sections

​Custom composition

​Graph panel

​Props

​Sections

​Custom composition

​Axes panel

​Props

​Sections

​Custom composition

​Color panel

​Props

​Sections

​Custom composition

​Elements panel

​Props

​Sections

​Custom composition

​Annotate panel

​Sections

​Custom composition

​Props

​AnnotatePanel

​CallOutSection

​Power-ups panel

​Props

​Sections

​Custom composition

​Panel composition

​Building a custom panel

​Custom panel structure

​EditorPanel.Root props

​Creating custom sections

Overview

Size panel

Props

Sections

Custom composition

Graph panel

Props

Sections

Custom composition

Axes panel

Props

Sections

Custom composition

Color panel

Props

Sections

Custom composition

Elements panel

Props

Sections

Custom composition

Annotate panel

Sections

Custom composition

Props

AnnotatePanel

CallOutSection

Power-ups panel

Props

Sections

Custom composition

Panel composition

Building a custom panel

Custom panel structure

EditorPanel.Root props

Creating custom sections