PointlineJS

PointlineJS is an SVG based JS library for drawing tree diagrams. It relies on Treant-JS, Raphael for handling SVG and animations, JQuery.

Build status

Add to project

1. Install PointlineJS:

npm i pointlinejs

2. Import PointlineJS:

import { PointlineJS } from "pointlinejs";

3. Create DOM-element in html where draw PointlineJS chart:

<div id="tree-simple" style="height: 600px; width: 900px;"></div>

4. Describe config chart in typescript file:

const simple_chart_config = {
  chart: {
    container: "#tree-simple",
  },

  nodeStructure: {
    text: { name: "Parent node" },
    children: [
      {
        text: { name: "First child" },
      },
      {
        text: { name: "Second child" },
      },
    ],
  },
};
Copy

5. Draw chart:

const testTree = new PointlineJS(simple_chart_config);
testTree.getTree();
testTree.draw();
Copy

For run demo also see "Quick start" section.

Quick start

1. clone repository with command:

$ git clone https://github.com/egor-progger/pointlinejs-quick-start
Copy

2. to run this example you need to install some dependencies:

$ cd pointlinejs-quick-start
$ npm install
Copy

3. start local web-server:

$ npx webpack serve
Copy

4. open in browser address http://localhost:9001

For Docs, Examples, and everything else see: https://egor-progger.github.io/pointlinejs/documentation/

Development

Requirements

Node version: minimum 20.18.1

How to compile sources

npx webpack --config webpack.config.js

How to run dev-server for debugging

1. npm run start
2. open http://localhost:9000/documentation/ in browser