Skip to content

sgratzl/chartjs-chart-graph-dot-parser

Repository files navigation

Chart.js Graphs Dot Parser

NPM Package Github Actions

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:

image

Install

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

Usage

see Samples on Github

CodePens

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