Register your own chart type

A chart type is the id a chart stores in spec.type, such as bar. To add a type of your own, register it with the chartTypes option. Then list it in the types of the Renderer that draws it.

AlphaPilot program

Quick start

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 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 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

PreviouslyDrawing on a canvas

Next upYour own Diagram Renderer