GraphProvider

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 graphyLightTheme if not provided.

import { graphyDarkTheme } from '@graphysdk/core';

<GraphProvider theme={graphyDarkTheme}>
  <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, graphyDarkTheme } 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={graphyDarkTheme}
      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>>>;
}

Graph - Chart rendering component
EditorProvider - Editor state management

Get Started

Graph types

Customisation

Configuration

Editor

Advanced

Reference

Basic usage

Props

Complete example

Type definitions

​Basic usage

​Props

​Complete example

​Type definitions

​Related

Basic usage

Props

Complete example

Type definitions

Related