# chartjs-chart-graph-dagre

> Chart.js graph chart extension using the dagre layout

Latest version **3.1.0** (published 2021-06-05) · MIT license · 0 weekly downloads

## Install

```sh
npm install chartjs-chart-graph-dagre
pnpm add chartjs-chart-graph-dagre
yarn add chartjs-chart-graph-dagre
bun add chartjs-chart-graph-dagre
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 3.1.0 |
| Published | 2021-06-05 |
| First published | 2020-05-20 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 4 |
| Unpacked size | 1.4 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3 |
| Author | Samuel Gratzl |
| Maintainers | sgratzl |
| Keywords | chart.js, graph, force-directed, tree |

## Links

- npm: https://www.npmjs.com/package/chartjs-chart-graph-dagre
- Repository: https://github.com/sgratzl/chartjs-chart-graph-dagre
- Issues: https://github.com/sgratzl/chartjs-chart-graph-dagre/issues
- npm.io page: https://npm.io/package/chartjs-chart-graph-dagre

## Dependencies (4)

- [dagre](https://npm.io/package/dagre.md) ^0.8.5
- [graphlib](https://npm.io/package/graphlib.md) ^2.1.8
- [@types/dagre](https://npm.io/package/@types/dagre.md) ^0.7.44
- [@types/graphlib](https://npm.io/package/@types/graphlib.md) ^2.1.7

## Alternatives

- [d3-force-3d](https://npm.io/package/d3-force-3d.md) — 1.0M weekly downloads
- [ng2-charts](https://npm.io/package/ng2-charts.md) — 486.8K weekly downloads
- [@arcgis/core](https://npm.io/package/@arcgis/core.md) — 257.8K weekly downloads
- [react-sparklines](https://npm.io/package/react-sparklines.md) — 249.3K weekly downloads
- [react-native-gifted-charts](https://npm.io/package/react-native-gifted-charts.md) — 182.3K weekly downloads

## Recent versions

- 3.1.0 (latest) — 2021-06-05
- 3.0.0-beta.1 (next) — 2020-09-11
- 3.0.0 — 2021-04-06
- 1.0.0 — 2020-05-20

## README

# Chart.js Graphs Dagre Layout

[![NPM Package][npm-image]][npm-url] [![Github Actions][github-actions-image]][github-actions-url]

Adds another graph controller `dagre` to chart.js based on [chartjs-chart-graph](https://github.com/sgratzl/chartjs-chart-graph) which uses the [Dagre](https://github.com/dagrejs/dagre) library for performing the graph layout.

## Related Plugins

Check out also my other chart.js plugins:

- [chartjs-chart-boxplot](https://github.com/sgratzl/chartjs-chart-boxplot) for rendering boxplots and violin plots
- [chartjs-chart-error-bars](https://github.com/sgratzl/chartjs-chart-error-bars) for rendering errors bars to bars and line charts
- [chartjs-chart-geo](https://github.com/sgratzl/chartjs-chart-geo) for rendering map, bubble maps, and choropleth charts
- [chartjs-chart-graph](https://github.com/sgratzl/chartjs-chart-graph) for rendering graphs, trees, and networks
- [chartjs-chart-pcp](https://github.com/sgratzl/chartjs-chart-pcp) for rendering parallel coordinate plots
- [chartjs-chart-venn](https://github.com/sgratzl/chartjs-chart-venn) for rendering venn and euler diagrams
- [chartjs-chart-wordcloud](https://github.com/sgratzl/chartjs-chart-wordcloud) for rendering word clouds
- [chartjs-plugin-hierarchical](https://github.com/sgratzl/chartjs-plugin-hierarchical) for rendering hierarchical categorical axes which can be expanded and collapsed

## Install

```bash
npm install --save chart.js chartjs-chart-graph chartjs-chart-graph-dagre
```

## Usage

see [Samples](https://github.com/sgratzl/chartjs-chart-graph-dagre/tree/main/samples) on Github

## Options

The options are wrapper for specifying dagre graph, node, and edge options. see https://github.com/dagrejs/dagre/wiki#configuring-the-layout.

```ts
interface IDagreOptions {
  dagre: {
    /**
     * dagre graph options
     */
    graph: {};
    /**
     * dagre node options or a function generating the option per node
     */
    node: ((i: number) => {}) | {};
    /**
     * dagre edge options or a function generating the option per edge
     */
    edge: ((source: number, target: number) => {}) | {};
  };
}
```

### ESM and Tree Shaking

The ESM build of the library supports tree shaking thus having no side effects. As a consequence the chart.js library won't be automatically manipulated nor new controllers automatically registered. One has to manually import and register them.

Variant A:

```js
import Chart from 'chart.js';
import { EdgeLine } from 'chartjs-chart-graph';
import { DagreGraphController } from 'chartjs-chart-graph-dagre';

// register controller in chart.js and ensure the defaults are set
Chart.register(DagreGraphController, EdgeLine);
...

new Chart(ctx, {
  type: DagreGraphController.id,
  data: [...],
});
```

Variant B:

```js
import { DagreGraphChart } from 'chartjs-chart-graph-dagre';

new DagreGraphChart(ctx, {
  data: [...],
});
```

## Development Environment

```sh
npm i -g yarn
yarn set version 2
yarn install
yarn pnpify --sdk vscode
```

### Building

```sh
yarn install
yarn build
```

[npm-image]: https://badge.fury.io/js/chartjs-chart-graph-dagre.svg
[npm-url]: https://npmjs.org/package/chartjs-chart-graph-dagre
[github-actions-image]: https://github.com/sgratzl/chartjs-chart-graph-dagre/workflows/ci/badge.svg
[github-actions-url]: https://github.com/sgratzl/chartjs-chart-graph-dagre/actions
[codepen]: https://img.shields.io/badge/CodePen-open-blue?logo=codepen

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