Skip to content

sgratzl/chartjs-chart-graph

Repository files navigation

Chart.js Graphs

NPM Package Github Actions

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

force

dend_h

tree_v

radial

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

data label

Open in CodePen

Related Plugins

Check out also my other chart.js plugins:

Install

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

Usage

see Examples

CodePens

Graphviz Dot File Parsing

A Graphviz Dot File parsing package is located at https://github.com/sgratzl/chartjs-chart-graph-dot-parser. It creates compatible data structures to be consumed by this plugin.

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

force

Open in CodePen

Options

Dendrogram, Tree

chart types: dendrogram, tree

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

Dendrogram Horizontal

dend_h

Open in CodePen

Dendrogram Vertical

dend_v

Open in CodePen

Dendrogram Radial

radial

Open in CodePen

Tidy Tree Horizontal

tree_h

Open in CodePen

Tidy Tree Vertical

tree_v

Open in CodePen

Tidy Tree Radial

radial

Open in CodePen

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, PointElement } 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, PointElement);
...

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 install
yarn sdks vscode

Building

yarn install
yarn build