Chart.js Graphs

Chart.js module for charting graphs. Adding new chart types: graph, forceDirectedGraph, dendogram, and tree.

Works only with Chart.js >= 3.0.0

Works great with https://github.com/chartjs/chartjs-plugin-datalabels or https://github.com/chrispahm/chartjs-plugin-dragdata

Install

npm install --save chart.js@next chartjs-chart-graph@next

Usage

see Samples on Github

CodePens

• Force Directed Layout
• Tree Layouts
• Tree With Data Labels

Styling

The new chart types are based on the existing line controller. Tho, instead of showing a line per dataset it shows edges as lines. Therefore, the styling options for points and lines are the same. See also https://www.chartjs.org/docs/latest/charts/line.html. However, to avoid confusion, the line options have a default line prefix, e..g lineBorderColor to specify the edge border color and pointBorderColor to specify the node border color.

Data Structure

data: {
  labels: ['A', 'B', 'C'], // node labels
  datasets: [{
    data: [ // nodes as objects
      { x: 1, y: 2 }, // x, y will be set by the force directed graph and can be omitted
      { x: 3, y: 1 },
      { x: 5, y: 3 }
    ],
    edges: [ // edge list where source/target refers to the node index
      { source: 0, target: 1},
      { source: 0, target: 2}
    ]
  }]
},

Alternative structure for trees

data: {
  labels: ['A', 'B', 'C'], // node labels
  datasets: [{
    data: [ // nodes as objects
      { x: 1, y: 2 }, // x, y will be set by the force directed graph and can be omitted
      { x: 3, y: 1, parent: 0 },
      { x: 5, y: 3, parent: 0 }
    ]
  }]
},

Force Directed Graph

chart type: forceDirectedGraph

Computes the x,y position of nodes based on a force simulation. It is based on https://github.com/d3/d3-force/.

Options

Dendogram, Tree

chart types: dendogram, tree

The tree and dendograms layouts are based on https://github.com/d3/d3-hierarchy.

Dendogram Horizontal

Dendogram Vertical

Dendogram Radial

Tidy Tree Horizontal

Tidy Tree Vertical

Tidy Tree Radial

Options

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, LinearScale, Point } from 'chart.js';
import { ForceDirectedGraphController, EdgeLine } from 'chartjs-chart-graph';

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

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

Variant B:

import { ForceDirectedGraphChart } from 'chartjs-chart-graph';

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

Development Environment

npm i -g yarn
yarn set version 2
yarn
yarn pnpify --sdk vscode

Building

yarn install
yarn build