Chart.js Graphs Dot Parser

Helper package for chartjs-chart-graph for parsing DOT files and generate the data structure for the chart.js plugin.

Input:

graph {
    a -- { b c d };
    b -- { c e };
    c -- { e f };
    d -- { f g };
    e -- h;
    f -- { h i j g };
    g -- k;
    h -- { o l };
    i -- { l m j };
    j -- { m n k };
    k -- { n r };
    l -- { o m };
    m -- { o p n };
    n -- { q r };
    o -- { s p };
    p -- { s t q };
    q -- { t r };
    r -- t;
    s -- z;
    t -- z;
}

Parsed:

Install

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

Usage

see Samples on Github

CodePens

• Simple Dot File

Supported Dot Features

graph types: graph, digraph

graph attributes:

• label ... set as dataset label

node attributes

• label ... set the node label
• color ... set as node border color
• fillcolor ... set a node background color
• shape ... only supports: circle, diamond, and box

edge attributes (note: only works with the 3.0.x version of the chartjs-chart-graph plugin due to renaming)

• color ... set as edge line/border color
• penwidth ... set as edge line/border width

Development Environment

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

Building

yarn install
yarn build