> ## Documentation Index
> Fetch the complete documentation index at: https://docs.graphy.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Editor panels

> Easy-to-use panels to change how your graph looks and works

## Overview

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

```tsx theme={null}
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.

```tsx theme={null}
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

```tsx theme={null}
import { SizePanel, SizePresetsSection, CustomSizeSection } from '@graphysdk/editor';

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

## Graph panel

Core graph configuration including type, legend and number formatting.

```tsx theme={null}
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

```tsx theme={null}
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.

```tsx theme={null}
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

```tsx theme={null}
import { AxesPanel, MainAxisSection, CrossAxisSection } from '@graphysdk/editor';

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

## Color panel

Manage graph colors, backgrounds and border styles.

```tsx theme={null}
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

```tsx theme={null}
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.

```tsx theme={null}
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

```tsx theme={null}
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.

```tsx theme={null}
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

```tsx theme={null}
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'` |

```tsx theme={null}
import { AnnotatePanel } from '@graphysdk/editor';

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

Or use `CallOutSection` directly:

```tsx theme={null}
import { CallOutSection } from '@graphysdk/editor';

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

## Power-ups panel

Add goals, trend lines and average lines.

```tsx theme={null}
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

```tsx theme={null}
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

```tsx theme={null}
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`:

```tsx theme={null}
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. |

```tsx theme={null}
// 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`:

```tsx theme={null}
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>
```