> ## Documentation Index
> Fetch the complete documentation index at: https://docs.graphy.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Quickstart

### 1. Install the Graphy SDK

<CodeGroup>
  ```shell npm theme={null}
  npm install @graphysdk/core
  ```

  ```shell yarn theme={null}
  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
  ```

  ```shell pnpm theme={null}
  pnpm add @graphysdk/core
  ```

  ```shell bun theme={null}
  bun add @graphysdk/core
  ```
</CodeGroup>

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:

```ini .npmrc theme={null}
//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.

```tsx theme={null}
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>
  );
}
```

<GraphPreview
  config={{
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 },
  ],
},
}}
/>

Graphy will automatically select sensible defaults for any properties that are not provided. See the [graph types reference](/sdk/graph-types/index) 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:

```tsx theme={null}
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',
    },
  },
};
```

<GraphPreview
  config={{
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:

```tsx theme={null}
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](/sdk/core/data-structure) and how columns and rows work
* Explore all available [graph types](/sdk/graph-types/index)
* Discover [configuration options](/sdk/config/type-options) to customize your charts
* See all [GraphProvider props](/sdk/reference/graph-provider) and [Graph props](/sdk/reference/graph)
* Read the complete [schema reference](/sdk/reference/graph-config)