Tiptap Docs

ECharts Renderer

Draws charts with ECharts, as SVG.
Pro ExtensionAlphaPilot program

Quick start 

npm install echarts
import { echartsRenderer } from '@tiptap-pro/extension-diagrams/echarts'

Diagrams.configure({ renderers: [echartsRenderer()] })

Chart types

Line, bar, area, scatter, pie, doughnut, matrix, radar, funnel, gauge, treemap, combo, tree, sankey and network.

  • Matrix is a heatmap of colored cells with their text in them. Its legend lists each value.
  • Network is laid out on a circle, so it looks the same every time it is drawn.

Options

OptionTypeDescription
idstringThe id charts store. Default 'echarts'
labelstringThe name for a menu. Default 'ECharts'

Animation

  • In the editor charts animate as they are drawn and changed.
  • animation: false on Diagrams turns this off.
  • A request for reduced motion from the reader's system turns this off.
  • Exports are never animated.

Options a chart can store

Fields under spec.renderer.echarts are laid over the ECharts option the Renderer builds, one level deep:

editor.commands.updateChartSpec({
  spec: { renderer: { echarts: { grid: { left: 80 }, legend: { icon: 'circle' } } } },
})
  • An object merges with the option of the same name.
  • Anything else replaces it.
  • A tooltip's formatter and extraCssText are ignored.

Export and servers

  • toSVG uses ECharts' server-side rendering and needs no DOM, so a chart can be turned into SVG in Node.
  • toEChartsOption(data, spec, theme) returns the ECharts option for a chart, for drawing it with your own ECharts setup.
PreviouslyRenderers