---
title: "ECharts Renderer"
description: "Draws charts with ECharts, as SVG."
canonical_url: "https://tiptap.dev/docs/diagrams/renderers/echarts"
---

# ECharts Renderer

Draws charts with ECharts, as SVG.

## Quick start

```bash
npm install echarts
```

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

| Option  | Type     | Description                              |
| ------- | -------- | ---------------------------------------- |
| `id`    | `string` | The id charts store. Default `'echarts'` |
| `label` | `string` | The 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:

```ts
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.