Skip to main content
GraphProvider is the root component that wraps your graphs and provides configuration, theming and state management.

​
Basic usage

import { useState } from 'react';
import { GraphProvider, Graph } from '@graphysdk/core';
import type { GraphConfig } from '@graphysdk/core';

function MyGraph() {
  const [config, setConfig] = useState<GraphConfig>();

  return (
    <GraphProvider
      config={config}
      onChange={(update) => {
        setConfig((currentValues) => ({ ...currentValues, ...update }));
      }}
    >
      <Graph />
    </GraphProvider>
  );
}

​
Props

​
children
React.ReactNode
Components to render within the provider. Typically includes Graph and optionally editor components.
​
config
GraphConfig
The graph configuration object. See GraphConfig schema for all available options.
const config: GraphConfig = {
  data: {
    columns: [
      { key: 'month', label: 'Month' },
      { key: 'sales', label: 'Sales' }
    ],
    rows: [
      { month: 'Jan', sales: 1000 },
      { month: 'Feb', sales: 1200 }
    ]
  },
  type: 'column',
  content: {
    title: 'Monthly sales'
  }
};

<GraphProvider config={config}>
  <Graph />
</GraphProvider>
​
onChange
function
Callback invoked when the graph configuration changes (typically from editor interactions).Signature: (changedValues: Partial<GraphConfig>, currentValues: GraphConfig) => void
  • changedValues - Only the properties that changed
  • currentValues - The complete updated configuration
<GraphProvider
  config={config}
  onChange={(changedValues, currentValues) => {
    console.log('Changed:', changedValues);
    console.log('Current:', currentValues);
    setConfig(currentValues);
  }}
>
  <Graph />
</GraphProvider>
​
theme
GraphTheme
Custom theme for the graph. See GraphTheme reference for all available properties.Defaults to graphyThemeLight if not provided.
import { graphyThemeDark } from '@graphysdk/core';

<GraphProvider theme={graphyThemeDark}>
  <Graph />
</GraphProvider>
​
fontList
FontList
Array of custom fonts available for use in graphs. Each font definition includes an id, label and fontFamily.See Fonts for usage details.
const fontList = [
  {
    id: 'custom-serif',
    label: 'Custom Serif',
    fontFamily: 'Garamond, Baskerville, serif'
  }
];

<GraphProvider fontList={fontList}>
  <Graph />
</GraphProvider>
​
customPalettes
CustomPaletteCatalog
Array of custom color palettes available for graphs. Each palette includes an id, name and array of colors.See Custom color palettes for usage details.
const customPalettes = [
  {
    id: 'brand',
    name: 'Brand Palette',
    colors: [
      { id: '1', hex: '#3b82f6', name: 'Blue' },
      { id: '2', hex: '#ef4444', name: 'Red' }
    ]
  }
];

<GraphProvider customPalettes={customPalettes}>
  <Graph />
</GraphProvider>
​
uiLocale
Locale
Locale for UI text (editor labels, buttons, etc.). Accepts 'en-GB' or 'en-US'.Defaults to 'en-US'.
​
formattingLocale
Locale
Locale for formatting numbers and dates in the UI. Accepts 'en-GB' or 'en-US'.Defaults to 'en-US'.
This is different from data._metadata.parsingLocale, which controls how data is parsed. This prop controls how values are displayed in the editor UI.
<GraphProvider
  uiLocale="en-GB"
  formattingLocale="en-GB"
>
  <Graph />
</GraphProvider>
​
canvasColorToVariableName
CanvasColorToVariableName
Advanced: Maps canvas color IDs to CSS variable names for custom styling.
​
i18nOverrides
object
Advanced: Override specific translation strings in the UI. Use this to customize text labels in the editor.Type: Partial<Record<TranslationKey, OverridePhrase<TranslationKey>>>

​
Complete example

import { useState } from 'react';
import { GraphProvider, Graph, graphyThemeDark } from '@graphysdk/core';
import type { GraphConfig } from '@graphysdk/core';

const fontList = [
  {
    id: 'custom-sans',
    label: 'Custom Sans',
    fontFamily: 'Helvetica Neue, Arial, sans-serif'
  }
];

const customPalettes = [
  {
    id: 'brand',
    name: 'Brand Palette',
    colors: [
      { id: '1', hex: '#3b82f6', name: 'Blue' },
      { id: '2', hex: '#10b981', name: 'Green' }
    ]
  }
];

function MyGraph() {
  const [config, setConfig] = useState<GraphConfig>({
    data: {
      columns: [
        { key: 'category', label: 'Category' },
        { key: 'value', label: 'Value' }
      ],
      rows: [
        { category: 'A', value: 100 },
        { category: 'B', value: 150 }
      ]
    },
    type: 'column',
    appearance: {
      paletteId: 'brand',
      textStyle: {
        body: {
          fontId: 'custom-sans'
        }
      }
    }
  });

  return (
    <GraphProvider
      config={config}
      onChange={(changedValues, currentValues) => {
        setConfig(currentValues);
      }}
      theme={graphyThemeDark}
      fontList={fontList}
      customPalettes={customPalettes}
      uiLocale="en-GB"
      formattingLocale="en-GB"
    >
      <Graph />
    </GraphProvider>
  );
}

​
Type definitions

type Locale = 'en-GB' | 'en-US';

interface GraphProviderProps {
  children?: React.ReactNode;
  config?: GraphConfig;
  onChange?: (changedValues: Partial<GraphConfig>, currentValues: GraphConfig) => void;
  uiLocale?: Locale;
  formattingLocale?: Locale;
  fontList?: FontList;
  customPalettes?: CustomPaletteCatalog;
  canvasColorToVariableName?: CanvasColorToVariableName;
  theme?: GraphTheme;
  i18nOverrides?: Partial<Record<TranslationKey, OverridePhrase<TranslationKey>>>;
}