Skip to content
Graphs for Chart.js
JavaScript
Branch: master
Clone or download
sgratzl Merge pull request #5 from sgratzl/dependabot/npm_and_yarn/handlebars…
…-4.5.3

Bump handlebars from 4.2.0 to 4.5.3
Latest commit adabcfe Dec 31, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github add github infos Oct 25, 2019
samples work on v2.9.2 compatibility Nov 6, 2019
src work on v2.9.2 compatibility Nov 6, 2019
.editorconfig intial commit Sep 19, 2019
.eslintrc intial commit Sep 19, 2019
.gitignore distribute pack, too Sep 28, 2019
.release-it.json distribute pack, too Sep 28, 2019
LICENSE intial commit Sep 19, 2019
README.md fix typo Oct 18, 2019
babel.config.js intial commit Sep 19, 2019
jest.config.js intial commit Sep 19, 2019
package-lock.json Bump handlebars from 4.2.0 to 4.5.3 Dec 30, 2019
package.json Release 2.2.0 Nov 6, 2019
rollup.config.js rename esm build type Sep 19, 2019

README.md

Chart.js Graphs

NPM Package Github Actions

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

Works only with Chart.js >= 2.8.0

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

CodePen

Install

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

Usage

see Samples on Github

CodePens

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

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 posiiton of nodes based on a force simulation. It is based on https://github.com/d3/d3-force/.

force

CodePen

Options

interface IForceDirectedOptions {
  simulation: {
    /**
     * auto restarts the simulation upon dataset change, one can manually restart by calling: `chart.relayout()`
     *
     * @default true
     */
    autoRestart: boolean;

    forces: {
      /**
       * center force
       * https://github.com/d3/d3-force/#centering
       *
       * @default true
       */
      center: boolean | ICenterForce,

      /**
       * collision betweeen nodes
       * https://github.com/d3/d3-force/#collision
       *
       * @default false
       */
      collide: boolean | ICollideForce,

      /**
       * link force
       * https://github.com/d3/d3-force/#links
       *
       * @default true
       */
      link: boolean | ILinkForce,

      /**
       * link force
       * https://github.com/d3/d3-force/#many-body
       *
       * @default true
       */
      manyBody: boolean | IManyBodyForce,

      /**
       * x positioning force
       * https://github.com/d3/d3-force/#forceX
       *
       * @default false
       */
      x: boolean | IForceXForce,

      /**
       * y positioning force
       * https://github.com/d3/d3-force/#forceY
       *
       * @default false
       */
      y: boolean | IForceYForce,

      /**
       * radial positioning force
       * https://github.com/d3/d3-force/#forceRadial
       *
       * @default false
       */
      radial: boolean | IRadialForce,
    }
  }
}

declare ID3NodeCallback = (d: IDataNode, i: number) => number;
declare ID3EdgeCallback = (d: IDataEdge, i: number) => number;

interface ICenterForce {
  x?: number;
  y?: number;
}

interface ICollideForce {
  radius?: number | ID3NodeCallback;
  strength?: number | ID3NodeCallback;
}

interface ILinkForce {
  id?: (d: IDataEdge) => string | number;
  distance?: number | ID3EdgeCallback;
  strength?: number | ID3EdgeCallback;
}

interface IManyBodyForce {
  strength?: number | ID3NodeCallback;
  theta?: number;
  distanceMin?: number;
  distanceMax?: number;
}

interface IForceXForce {
  x?: number;
  strength?: number;
}

interface IForceYForce {
  y?: number;
  strength?: number;
}

interface IRadialForce {
  x?: number;
  y?: number;
  radius?: number;
  strength?: number;
}

Dendogram, Tree

chart types: dendogram, tree

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

Dendogram Horizontal

dend_h

CodePen

Dendogram Vertical

dend_v

CodePen

Dendogram Radial

radial

CodePen

Tidy Tree Horizontal

tree_h

CodePen

Tidy Tree Vertical

tree_v

CodePen

Tidy Tree Radial

radial

CodePen

Options

interface ITreeOptions {
  tree: {
    /**
     * tree (cluster) or dendogram layout default depends on the chart type
     */
    mode: 'dendogram' | 'tree';
    /**
     * orientation of the tree layout
     * @default horizontal
     */
    orientation: 'horizontal' | 'vertical' | 'radial';
    /**
     * line tension (factor for the bezier control point as distance between the nodes)
     * @default 0.4
     */
    lineTension: number;
  }
}

Building

npm install
npm run build
You can’t perform that action at this time.