# gridy-chart-echarts

> GridyGrid chart component ECharts driver

Latest version **2.2.0** (published 2026-09-07) · ISC license · 0 weekly downloads

## Install

```sh
npm install gridy-chart-echarts
pnpm add gridy-chart-echarts
yarn add gridy-chart-echarts
bun add gridy-chart-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 | 2.2.0 |
| Published | 2026-09-07 |
| First published | 2021-12-09 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 12 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | syncro |

## Links

- npm: https://www.npmjs.com/package/gridy-chart-echarts
- npm.io page: https://npm.io/package/gridy-chart-echarts

## Dependencies (1)

- [sk-core](https://npm.io/package/sk-core.md) ^0.2.27

## Recent versions

- 2.2.0 (latest) — 2026-09-07
- 2.1.2 — 2022-10-27
- 2.1.1 — 2022-07-25
- 2.1.0 — 2022-06-19
- 2.0.29 — 2022-05-30
- 2.0.28 — 2022-05-17
- 2.0.27 — 2022-05-17
- 2.0.26 — 2022-05-17
- 2.0.25 — 2022-05-06
- 2.0.24 — 2022-04-13
- 2.0.23 — 2022-03-31
- 2.0.22 — 2022-03-15
- 2.0.21 — 2022-03-01
- 2.0.20 — 2022-02-15
- 2.0.19 — 2022-02-10
- … 5 more at https://npm.io/package/gridy-chart-echarts/versions

## README

# GridyGrid chart component ECharts driver

## Installation

```shell
npm i gridy-grid echarts gridy-chart-echarts gridy-grid-default sk-theme-default
```

and plug it to your page

```html
<script src="/node_modules/echarts/dist/echarts.js"></script>
```

then add element to your container or setup it programmatically

```html
    <gridy-grid id="gridyGrid" base-path="/node_modules/gridy-grid/src" sort-field="$.title">
    <gridy-data-source fields='[{ "title": "Name", "path": "$.name" },{ "title": "Value", "path": "$.value"}]'
                   datasource-type="DataSourceLocal" datapath="$.data"></gridy-data-source>

    <gridy-chart id="gridyChart2" legend='{"data": ["sales"]}' type="bar" dri="echarts" field-name="Name" field-value="Value" width="400" height="400"></gridy-chart>

</gridy-grid>
```

Multiple charts support

```html
<gridy-grid id="gridyGrid2" base-path="/node_modules/gridy-grid/src" sort-field="$.title">
    <gridy-data-source fields='[{ "title": "Name", "path": "$.name" },{ "title": "Value", "path": "$.value"},{ "title": "Group", "path": "$.group"}]'
                       datasource-type="DataSourceLocal" datapath="$.data"></gridy-data-source>
	<gridy-chart id="gridyChart2" options='{"xAxis": { "data": "names" }, "yAxis": {}}' legend='{"data": ["sales", "markt"]}' type="multi:bar:sales,line:markt" value-field dri="echarts" field-color="Color" field-name="Name" field-value="Value" field-group="Group" width="400" height="400"></gridy-chart>
    <gridy-pager id="gridyPager2"></gridy-pager>
</gridy-grid>
<script type="module">
    import { GridyGrid } from '/node_modules/gridy-grid/src/gridy-grid.js';
    let data = [];
    data.push({ name: 'FooBar1', value: 100, group: 'sales' });
    data.push({ name: 'FooBar1', value: 100, group: 'markt' });
    data.push({ name: 'FooBar2', value: 230, group: 'sales' });
    data.push({ name: 'FooBar2', value: 230, group: 'markt' });
    data.push({ name: 'FooBar3', value: 340, group: 'sales' });
    data.push({ name: 'FooBar3', value: 340, group: 'markt' });
    data.push({ name: 'FooBar4', value: 170, group: 'sales' });
    data.push({ name: 'FooBar4', value: 170, group: 'markt' });
    data.push({ name: 'FooBar5', value: 570, group: 'sales' });
    data.push({ name: 'FooBar5', value: 570, group: 'markt' });
    let grid = document.querySelector('#gridyGrid');
    grid.addEventListener('bootstrap', () => {
        grid.charts[0].addEventListener('skrender', (event) => {
            grid.dataSource.loadData(data);
        });
    });
    customElements.define('gridy-grid', GridyGrid);
</script>
```

## Options

you can specify options for echarts as attribute of gridy-chart.

When xAxis or yAxis specified as string it will be populated from chart driver
context by name. Note: some chart types may require at least empty x(y)Axis in options.

```html
	<gridy-chart id="gridyChart2" options='{"xAxis": { "data": "names" }, "yAxis": {}}' type="line" dri="echarts" field-name="Name" field-value="Value" field-group="Group" inner-radius="50" width="400" height="400"></gridy-chart> 
```

JSONPath expressions on the same chart driver context are also supported for 
data fields.

### attributes

**echarts-renderer** - renderer parameter for echarts init, possible options: 'svg', 'canvas' (default: 'canvas')

**echarts-theme** - theme parameter for echarts init (default: null)

**value-field** passes data extracted from specified field to option.series.data array, if not specified item is passed 'as-is' after mapping

---
_Source: https://npm.io/package/gridy-chart-echarts · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._