Register your own chart type
A chart type is an id in
spec.type. Register one with the chartTypes option, and list it in the types of the Renderer that draws it.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
},
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
:::. setDiagramInputTypecan 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 |