---
title: "Register your own chart type"
description: "A chart type is an id in spec.type."
canonical_url: "https://tiptap.dev/docs/diagrams/renderers/custom-chart-types"
---

# Register your own chart type

A chart type is an id in spec.type.

## 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
  },
  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.',
    },
  ],
})
```

## 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'` | How the type reads its rows. The Quick Input shows example rows of that shape                                        |
| `word`        | `'chart' \| 'table' \| 'image'`                                             | `'image'`: a Word document gets a picture of the chart. Only the built-in types are written as Word charts or tables |
| `description` | `string`                                                                    | Optional. One sentence for a model choosing a type                                                                   |

## Where a registered type appears

- **The Quick Input:** it can be typed after `:::`.
- **`setDiagramInputType`** can choose it.
- **A model** is offered it by the tools and by `describeCapabilities()`.
- **An entry with the id of a built-in type** replaces that type's 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                                                      |