Chart.js Graphs Dagre Layout

Adds another graph controller dagre to chart.js based on chartjs-chart-graph which uses the Dagre library for performing the graph layout.

Related Plugins

Check out also my other chart.js plugins:

• chartjs-chart-boxplot for rendering boxplots and violin plots
• chartjs-chart-error-bars for rendering errors bars to bars and line charts
• chartjs-chart-geo for rendering map, bubble maps, and choropleth charts
• chartjs-chart-graph for rendering graphs, trees, and networks
• chartjs-chart-pcp for rendering parallel coordinate plots
• chartjs-chart-venn for rendering venn and euler diagrams
• chartjs-chart-wordcloud for rendering word clouds
• chartjs-plugin-hierarchical for rendering hierarchical categorical axes which can be expanded and collapsed

Install

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

Usage

see 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.

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:

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:

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

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

Development Environment

npm i -g yarn
yarn install
yarn sdks vscode

Building

yarn install
yarn build