Tiptap Docs

ECharts Renderer

The ECharts Renderer draws charts with ECharts, as SVG. It draws every built-in chart type.
AlphaPilot program

Quick start 

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

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

Chart types

The ECharts Renderer draws line, bar, area, scatter, pie, doughnut, matrix, radar, funnel, gauge, treemap, combo, tree, sankey and network charts.

  • Matrix is a heatmap of colored cells with their text inside. Its legend lists each value.
  • Network is laid out on a circle, so it looks the same every time it is drawn.
  • Bars on their side in bar and combo charts, every field of series line styles and of axes, and reference lines are drawn.
  • A double click on a text renames it, see Editing in the chart.
  • Animation. It animates a chart in the editor, unless the animation option or the user's system turns it off.

Options

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

Options a chart can store

A chart can store ECharts options under spec.renderer.echarts. The Renderer lays them over the ECharts option it 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.
  • Any other value replaces it.
  • A tooltip's formatter and extraCssText are ignored.
  • A color must be a CSS color, such as #1d3557, rgb(…) or var(…). Any other color is ignored.
  • Text with a double quote is ignored. So is a font family with ;, <, > or brackets.
  • A link or sublink that is not an http: or https: address is ignored.

Export and servers

toSVG uses ECharts' server-side rendering and needs no DOM, so you can make SVG files in Node.js.

toEChartsOption(data, spec, theme) returns the ECharts option for a chart, to draw it with your own ECharts setup.

PreviouslyRenderers