Getting Started

Installation

npm install pivotick  # (Coming soon)

Basic Usage

As a module

const container = document.getElementById('graph-container')
const data = {
    nodes: [
        { id: 1, data: { label: 'A' } },
        { id: 2, data: { label: 'B' } }
    ],
    edges: [
        { from: 1, to: 2 }
    ]
}

// Pivotick global is your main Graph class
const graph = new Pivotick(
    container,
    data
)

graph.addNode({ id: 3, data: { label: 'C' } })
graph.addEdge({ from: 2, to: 3 })

As a bundle

const container = document.getElementById('graph-container')
const data = {
    nodes: [
        { id: 1, data: { label: 'A' } },
        { id: 2, data: { label: 'B' } }
    ],
    edges: [
        { from: 1, to: 2 }
    ]
}

// Pivotick global is your main Graph class
const graph = new Pivotick(
    container,
    data
)

graph.addNode({ id: 3, data: { label: 'C' } })
graph.addEdge({ from: 2, to: 3 })

Styling

Pivotick comes with default styles included in pivotick.css:

You can customize the look in two ways:

• Use Pivotick's built-in classes.
• Override styles using CSS variables.

<style>
  :root {
    --pvt-node-color: #FDDA24;
    --pvt-node-stroke: #000000;
    --pvt-edge-stroke: #EF3340;
  }
</style>

API

• Add node
• Add edge