---
title: "ECharts Renderer"
description: "The ECharts Renderer draws charts with ECharts, as SVG."
canonical_url: "https://tiptap-docs.lin52025i.qzz.io/diagrams/renderers/echarts"
---

# ECharts Renderer

The 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

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](https://tiptap-docs.lin52025i.qzz.io/diagrams/charts/appearance.md#series-line-styles) and of
  [axes](https://tiptap-docs.lin52025i.qzz.io/diagrams/charts/axes.md), and [reference lines](https://tiptap-docs.lin52025i.qzz.io/diagrams/charts/references.md) are drawn.
- **A double click on a text** renames it, see [Editing in the chart](https://tiptap-docs.lin52025i.qzz.io/diagrams/charts/editing.md).
- **Animation.** It animates a chart in the editor, unless the
  [`animation`](https://tiptap-docs.lin52025i.qzz.io/diagrams/api-reference/options.md#animation) option or the user's system turns it off.

## Options

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

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