---
title: "Register your own chart type"
description: "A chart type is the id a chart stores in spec.type, such as bar."
canonical_url: "https://tiptap-docs.lin52025i.qzz.io/diagrams/renderers/custom-chart-types"
---

# Register your own chart type

A chart type is the id a chart stores in spec.type, such as bar.

## Quick start

```ts
import { Diagrams, chartLinks, type ChartRenderer } from '@tiptap-pro/extension-diagrams'

const chordRenderer: ChartRenderer = {
  id: 'chord',
  label: 'Chord',
  types: ['chord'],
  mount(target, input) {
    // chartLinks(input.data) gives { nodes, links }, read the way sankey and network read them.
    // Draw into target, then return { update, destroy }.
  },
  async toSVG(input) {
    // ...
  },
}

Diagrams.configure({
  renderers: [echartsRenderer(), chordRenderer],
  chartTypes: [
    {
      id: 'chord',
      label: 'Chord',
      shape: 'graph',
      word: 'image',
      description: 'Flows between groups drawn around a circle: from, to and how much.',
    },
  ],
})
```

[Members](https://tiptap-docs.lin52025i.qzz.io/diagrams/renderers/custom.md#members) has the rest of a Renderer.

## Fields of a chart type

| Field         | Type                                                                        | Description                                                                                                                |
| ------------- | --------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------- |
| `id`          | `string`                                                                    | What the chart stores in `spec.type`: letters, digits, `_` and `-`, at most 64 characters                                  |
| `label`       | `string`                                                                    | For a menu                                                                                                                 |
| `shape`       | `'cartesian' \| 'radial' \| 'single' \| 'hierarchy' \| 'matrix' \| 'graph'` | The data layout: how the type reads its columns and rows. The Quick Input shows example rows in that layout                |
| `word`        | `'chart' \| 'table' \| 'image'`                                             | How a Word document holds a chart of this type: as a Word chart, as a Word table, or as an image. Use `'image'`, see below |
| `description` | `string`                                                                    | Optional. One sentence for an AI model that chooses a type                                                                 |

The data layouts of `shape`:

| `shape`     | Columns and rows                                       | Built-in types, for example |
| ----------- | ------------------------------------------------------ | --------------------------- |
| `cartesian` | A label column and one or more series                  | line, bar, radar, combo     |
| `radial`    | A label column and one series, the parts of a whole    | pie, funnel                 |
| `single`    | One value                                              | gauge                       |
| `hierarchy` | Labels as paths, such as `A / B`, and a value per leaf | treemap, tree               |
| `matrix`    | Words in a grid                                        | matrix (RACI)               |
| `graph`     | A source column, a target column and a value per link  | sankey, network             |

### Word charts and tables

The extension writes a Word chart or a Word table only for built-in types. A type of your own
becomes an image in Word, even with `word: 'chart'` or `word: 'table'`. So give it
`word: 'image'`. See [Export](https://tiptap-docs.lin52025i.qzz.io/diagrams/export.md) for what Word gets.

## Where a registered type appears

- **The Quick Input.** You can type it after `:::`.
- **`setDiagramInputType`** can choose it.
- **AI models.** The tools and `describeCapabilities()` offer it to an AI model.
- **A built-in type id.** An entry with the id of a built-in type replaces that type's definition,
  such as its label and description.

## Reading rows like the built-in types

| Function               | Reads rows the way                | Returns                                                                                   |
| ---------------------- | --------------------------------- | ----------------------------------------------------------------------------------------- |
| `chartHierarchy(data)` | the built-in `hierarchy` types do | A tree of `{ name, path, value, total, children }`, from paths such as `Europe / Germany` |
| `chartLinks(data)`     | the built-in `graph` types do     | `{ nodes, links }`, one link per row                                                      |