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 />

​
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 />

​
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 />

​
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 />

​
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 />

​
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

PropTypeDescription
closePanel() => voidOptional callback invoked when panel should close
callOutPropsCallOutSectionPropsOptional 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 />

​
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>
  );
};

​
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>