Quickstart

1. Install the Graphy SDK

npm install @graphysdk/core

yarn add @graphysdk/core react react-dom styled-components @tiptap/core @tiptap/extension-blockquote @tiptap/extension-bold @tiptap/extension-document @tiptap/extension-hard-break @tiptap/extension-heading @tiptap/extension-italic @tiptap/extension-link @tiptap/extension-list @tiptap/extension-paragraph @tiptap/extension-strike @tiptap/extension-text @tiptap/extension-text-align @tiptap/extension-text-style @tiptap/extension-underline @tiptap/extensions @tiptap/pm @tiptap/react

pnpm add @graphysdk/core

bun add @graphysdk/core

Because @graphysdk/core is a private package, you’ll need to configure your npm auth token. Create an .npmrc in your repository root (or user-level) with:

.npmrc

//registry.npmjs.org/:_authToken=${NPM_TOKEN}
@graphysdk:registry=https://registry.npmjs.org/

2. Create your first graph

There are two main components required to render a Graphy chart: GraphProvider is the state manager for Graphy charts and can be placed anywhere in the React tree. It provides state to the charting components as well as any components used to edit these charts. Graph is the component used to render the graph itself.

import { GraphProvider, Graph } from '@graphysdk/core';

export function App() {
  const config: GraphConfig = {
    type: 'column', // Graph type (column, bar, line, pie, etc.)
    data: {
      columns: [
        { key: 'month', label: 'Month' },
        { key: 'sales', label: 'Sales' },
      ],
      rows: [
        { month: 'January', sales: 1000 },
        { month: 'February', sales: 1200 },
        { month: 'March', sales: 1450 },
        { month: 'April', sales: 1500 },
      ],
    },
  };

  return (
    <GraphProvider config={config}>
      <Graph />
    </GraphProvider>
  );
}

Graphy will automatically select sensible defaults for any properties that are not provided. See the graph types reference for all available chart types.

3. Customize your graph

You have fine-grained control over every aspect of your chart. Here are some common customizations:

const config: GraphConfig = {
  data: {
    columns: [
      { key: 'month', label: 'Month' },
      { key: 'sales', label: 'Sales' },
    ],
    rows: [
      { month: 'January', sales: 1000 },
      { month: 'February', sales: 1200 },
      { month: 'March', sales: 1450 },
      { month: 'April', sales: 1500 },
    ],
  },
  type: 'line',
  options: {
    isSmoothLine: true,
    showPoints: true,
  },
  axes: {
    y: {
      label: 'Revenue (£)',
      min: 0,
    },
  },
  appearance: {
    numberFormat: {
      abbreviation: 'auto',
      decimalPlaces: 0,
    },
  },
  content: {
    title: 'Monthly sales',
    subtitle: 'Q1 2024',
    source: {
      label: 'Internal sales data',
      url: 'https://example.com/data',
    },
  },
};

4. Make it editable

By default, graphs are read-only. Use mode="editor" on the Graph component to allow users to edit titles, add annotations and make other modifications. Use the onChange handler on GraphProvider to persist these changes:

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

  return (
    <GraphProvider
      config={config}
      onChange={(update) => setConfig((current) => ({ ...current, ...update }))}
    >
      <Graph mode="editor" />
    </GraphProvider>
  );
}

The mode prop has three options:

readonly (default) - Full interactivity with tooltips and hover effects, but no editing
editor - Same as readonly, plus the ability to edit the graph
static - No interactivity, useful for image exports

Next steps

Learn about the data structure and how columns and rows work
Explore all available graph types
Discover configuration options to customize your charts
See all GraphProvider props and Graph props
Read the complete schema reference

Get Started

Graph types

Customisation

Configuration

Editor

Advanced

Reference

1. Install the Graphy SDK

2. Create your first graph

3. Customize your graph

4. Make it editable

Next steps

​1. Install the Graphy SDK

​2. Create your first graph

​3. Customize your graph

​4. Make it editable

​Next steps

1. Install the Graphy SDK

2. Create your first graph

3. Customize your graph

4. Make it editable

Next steps