Node's Pretty Magical

    chartjs-chart-graph
    TypeScript icon, indicating that this package has built-in type declarations

    3.8.0 • Public • Published

    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 Samples on Github

    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

    Install

    npm i chartjs-chart-graph

    DownloadsWeekly Downloads

    188

    Version

    3.8.0

    License

    MIT

    Unpacked Size

    661 kB

    Total Files

    29

    Last publish

    Collaborators

    • sgratzl