Charts

Quick start

editor.commands.insertFromText({ text: 'Month | Sales\nJan | 2\nFeb | 3' })

• insertFromText reads the text as a paste would. Rows become a chart.
• The rows are written in the chart syntax.

More about charts

Each page beside this one covers one part of the Chart Spec.

Chart types

A chart stores its type as spec.type. Each type reads the same rows in one of these ways:

• A Renderer without the type leaves the chart to the next Renderer that has it. Not every Renderer draws every type.
• A sankey link that would close a loop is dropped.
• A type you register with the chartTypes option is stored, offered to a model and drawn by any Renderer that lists it.
• A type this editor does not know is kept in the document, unchanged.

Combo charts

Matrix

matrix is a grid of words such as a RACI matrix: the tasks in the label column, a column per role and a letter in each cell.

Task   | Lead | Team | Board
Plan   | A    | R    | I
Build  | C    | R    |

• Each distinct cell text gets a color from the series colors.
• R, A, C and I come first, in that order.
• A matrix is drawn by the ECharts Renderer.
• A matrix cannot be written as Mermaid.
• In a Word document, a matrix is a table with shaded cells.

How a chart is stored

A chart's attributes hold everything needed to draw it again:

The drawn picture, its size and its loading state are never stored.

In HTML

• A chart is a <figure data-type="chart">.
• Its data is a <table>, so the numbers survive an HTML or Markdown export and are read by a screen reader.
• Its title is the <figcaption>.
• The spec and the source travel in data-tt-chart-* attributes.

Commands

insertChart

Inserts a chart at the selection, or at pos, and selects it.

editor.commands.insertChart({
  type: 'bar',
  data: {
    columns: [
      { id: 'month', label: 'Month', role: 'label' },
      { id: 'revenue', label: 'Revenue', role: 'series' },
    ],
    rows: [
      ['Jan', 120],
      ['Feb', 150],
    ],
  },
})

• An empty paragraph at the selection is replaced.
• With a chart selected, the new one goes after it.

insertChartFrom

Inserts a chart written in a registered format.

editor.commands.insertChartFrom({
  format: 'chart-syntax',
  content: 'Month | Revenue\nJan | 120\nFeb | 150',
})

Returns false when the content cannot be read.

importMermaidChart

Inserts a chart from Mermaid chart source.

editor.commands.importMermaidChart({ source: 'pie\n  "Dogs" : 386\n  "Cats" : 85' })

These Mermaid kinds are charts:

• A title comes from title, or from frontmatter for sankey and treemap.
• How Mermaid colors it (classDef, showLegend, ticks, graticule) is left out.
• Back to Mermaid, toMermaidSource and the mermaid format write the same kinds.
• A value below zero has no place in Mermaid's pie, radar and treemap, which read no minus sign. Written back, a pie slice or a treemap node below zero is left out, and a radar value is written as zero.

Pasting Mermaid chart source calls it, when the source is:

• bare: one of these kinds on the first line and at least one data row,
• in a ```mermaid fence,
• or a code block with the language mermaid.

Pasting into a code block keeps the text.

Returns false for any other Mermaid diagram.

convertCodeBlockToChart

Replaces a code block with the chart its Mermaid chart source describes.

if (editor.can().convertCodeBlockToChart()) editor.commands.convertCodeBlockToChart()

• Any Node with code: true in its spec counts as a code block.
• editor.can().convertCodeBlockToChart() says whether to offer it.
• Mod-Enter in the code block runs it too, unless codeBlockShortcut says otherwise.

Returns false for a code block holding anything else.

insertDiagramInput

Opens an empty Quick Input at the selection, as typing the trigger does.

editor.chain().focus().insertDiagramInput({ type: 'pie' }).run()