# grapesjs-echarts
> Grapesjs Echarts
Latest version **1.0.0** (published 2026-09-17) · MIT license · 0 weekly downloads
## Install
```sh
npm install grapesjs-echarts
pnpm add grapesjs-echarts
yarn add grapesjs-echarts
bun add grapesjs-echarts
```
## Health
**Score 55/100 (C)** — status: active.
Positive: no vulnerabilities; recently updated; high maintenance score.
Warnings: low downloads; no types; no esm support.
## Facts
| | |
|---|---|
| Version | 1.0.0 |
| Published | 2026-09-17 |
| First published | 2020-02-02 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 1.8 MB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 38 |
| Author | Julio Vasconez |
| Maintainers | jvas28 |
| Keywords | grapesjs, plugin |
## Links
- npm: https://www.npmjs.com/package/grapesjs-echarts
- Repository: https://github.com/jvas28/grapesjs-echarts
- Homepage: https://github.com/jvas28/grapesjs-echarts#readme
- Issues: https://github.com/jvas28/grapesjs-echarts/issues
- npm.io page: https://npm.io/package/grapesjs-echarts
## Dependencies (2)
- [vue](https://npm.io/package/vue.md) ^2.7.16
- [lodash](https://npm.io/package/lodash.md) ^4.17.21
## Recent versions
- 1.0.0 (latest) — 2026-09-17
- 0.0.20 — 2021-02-09
- 0.0.19 — 2020-06-04
- 0.0.18 — 2020-04-23
- 0.0.17 — 2020-04-23
- 0.0.16 — 2020-02-23
- 0.0.15 — 2020-02-23
- 0.0.14 — 2020-02-23
- 0.0.13 — 2020-02-23
- 0.0.12 — 2020-02-21
- 0.0.11 — 2020-02-21
- 0.0.10 — 2020-02-10
- 0.0.9 — 2020-02-10
- 0.0.8 — 2020-02-09
- 0.0.7 — 2020-02-09
- … 5 more at https://npm.io/package/grapesjs-echarts/versions
## README
# Grapesjs Echarts
Adds :chart_with_upwards_trend: chart components to [GrapesJS](https://grapesjs.com/docs/api/component.html) using the [ECharts](https://www.echartsjs.com/) library — 12 chart types, live-editable from the canvas.
As of `v1.0.0` this is a stable release: rebuilt on the current GrapesJS and ECharts APIs (see [Requirements](#requirements) below), with a modern build pipeline and a much larger set of chart types than earlier `0.0.x` releases.
> The old [Code Pen](https://codepen.io/jvas28/pen/ZEGByOq) / [basic result](https://codepen.io/jvas28/pen/qBdRWBp) demos were built against a `0.0.x` release and are out of date — follow [Usage](#usage) below for the current setup instead.
## Available Components :bar_chart:
- `Bars Chart`
- `Horizontal Bar Chart`
- `Stacked Bar Chart`
- `Lines Chart`
- `Area Chart`
- `Pie Chart`
- `Donut Chart`
- `Rose Chart`
- `Radar Chart`
- `Funnel Chart`
- `Gauge Chart`
- `Scatter Chart`
And a special one, the `Custom Chart` which will allow you to create any type of chart by adding `echarts.options` in JSON string format.
## Available Settings
- Theme — the full set of [ECharts built-in themes](https://echarts.apache.org/en/download-theme.html), loaded on demand
- Items — automatically applied as you edit, no explicit save step
- Name
- Value (or, for Scatter, X/Y points)
- Color — native color picker, defaults to an auto-assigned palette
- Min / Max — `Gauge Chart` only
These settings are available for all components but `Custom Chart`.
## I18n Support
If you want to customize some strings used in this app you can use pluginOpts to pass a set of translations or if you just want to change the language you can pass your prefered local (Between english and spanish for now ), I'm open to PRs for other languages, still small plugin so not that much to translate. :wink:
```
...
pluginsOpts: {
"grapesjs-echarts": {
intl: {
locale: "en", // "es" also available
messages: {
en: {
components: {
bars: { name: "My new bars name" },
},
},
},
},
},
},
...
```
Reference [locale](https://github.com/jvas28/grapesjs-echarts/tree/master/src/locale) folder to get the idea of the structure for labels.
## Requirements
This plugin does not bundle `grapesjs` or `echarts` — both are peer
dependencies, so your app supplies a single shared copy of each (this also
avoids the "two different echarts instances" errors some bundlers, like
Vite, would otherwise throw). Supported versions:
- `grapesjs` >= 0.19
- `echarts` ^5 or ^6
## Usage
Directly in the browser
```html
```
Modern javascript
```js
import grapesjs from 'grapesjs';
import plugin from 'grapesjs-echarts';
import 'grapesjs/dist/css/grapes.min.css';
// echarts must be installed (it's a peer dependency), no import needed here
const editor = grapesjs.init({
container : '#gjs',
// ...
plugins: [plugin],
pluginsOpts: {
[plugin]: { /* options */ }
}
// or
plugins: [
editor => plugin(editor, { /* options */ }),
],
});
```
## Development
Clone the repository
```sh
$ git clone https://github.com/jvas28/grapesjs-echarts.git
$ cd grapesjs-echarts
```
Install dependencies
```sh
$ npm i
```
Start the dev server
```sh
$ npm start
```
Build the source
```sh
$ npm run build
```
## Credits
### Icons
The original Bars, Pie, Donut and Custom chart icons were designed by [Smartline](https://www.flaticon.com/authors/smartline) from [www.flaticon.com](www.flaticon.com). The icons for the newer chart types are simple hand-drawn SVGs.
## Roadmap
`v1.0.0`:
- [x] Basic Bars, Pie, Donut and Lines charts
- [x] Area, Stacked Bar, Horizontal Bar, Rose, Radar, Funnel, Gauge and Scatter charts
- [x] Live preview while editing (no more explicit Save step)
- [x] Color picker for items
- [x] Rebuilt on current GrapesJS / ECharts APIs
Next:
- [ ] Tooltip trait
- [ ] Toolbox trait
- [ ] Legend trait
- [ ] Grid trait
## Screenshots
### New in this version
### Original charts
## License
MIT
---
_Source: https://npm.io/package/grapesjs-echarts · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._
