Skip to main content

​
1. Install the Graphy SDK

npm install @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. Pass isEditable to 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 isEditable />
    </GraphProvider>
  );
}

​
Next steps