Skip to main content

​
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

PropTypeDefaultDescription
defaultExpandedstring–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

PropTypeDefaultDescription
defaultExpandedstring"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

PropTypeDefaultDescription
defaultExpandedstring–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

PropTypeDefaultDescription
defaultExpandedstring"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

PropTypeDefaultDescription
defaultExpandedstring–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

PropTypeDefaultDescription
defaultExpandedstring–The title of the section to expand by default
closePanel() => void–Optional callback invoked when panel should close
callOutPropsCallOutSectionProps–Optional props to pass to the CallOutSection

​
CallOutSection

The CallOutSection accepts an optional hiddenButtons prop to hide specific buttons:
PropTypeDescription
hiddenButtonsCallOutButton[]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

PropTypeDefaultDescription
defaultExpandedstring–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

PropTypeDescription
defaultExpandedstringThe 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>