# gridy-chart-chartjs

> GridyGrid chart component ChartJS driver

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

## Install

```sh
npm install gridy-chart-chartjs
pnpm add gridy-chart-chartjs
yarn add gridy-chart-chartjs
bun add gridy-chart-chartjs
```

## 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-10-29 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 4.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | syncro |

## Links

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

## 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
- … 8 more at https://npm.io/package/gridy-chart-chartjs/versions

## README

# GridyGrid chart component ChartsJS driver

## Installation

```shell
npm i gridy-grid chart.js gridy-chart-chartjs gridy-grid-default sk-theme-default
```

and plug it to your page

```html
<script src="/node_modules/chart.js/dist/chart.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": "Price1", "path": "$.price1", "borderColor": "red", "backgroundColor": "green", "borderWidth": 1 },{ "title": "Price2", "path": "$.price2", "borderColor": "green", "backgroundColor": "yellow", "borderWidth": 1 }]'
                       datasource-type="DataSourceLocal" datapath="$.data"></gridy-data-source>
    
        <gridy-chart dri="chart-js" type="line" field-price1="Price1" field-price2="Price2" width="400" height="300" options='{"scales":{"y":{ "beginAtZero": true }}}'></gridy-chart>
    
    </gridy-grid>
    <script type="module">
        import { GridyGrid } from '/node_modules/gridy-grid/src/gridy-grid.js';
        let data = [];
        for (let i = 0; i < 10; i++) {
            data.push({ price1: 200 * i, price2: 100 * i })
        }
        let grid = document.querySelector('#gridyGrid');
        grid.addEventListener('bootstrap', () => {
            grid.charts[0].addEventListener('skrender', (event) => {
                grid.dataSource.loadData(data);
            });
        });
        customElements.define('gridy-grid', GridyGrid);
    </script>
    
```

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