https://github.com/ghostery/apexsankey
Fork of the ApexSankey chart library
https://github.com/ghostery/apexsankey
Last synced: 6 months ago
JSON representation
Fork of the ApexSankey chart library
- Host: GitHub
- URL: https://github.com/ghostery/apexsankey
- Owner: ghostery
- Created: 2025-04-18T09:05:40.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-04-22T07:57:54.000Z (over 1 year ago)
- Last Synced: 2025-12-01T01:53:26.677Z (8 months ago)
- Size: 94.7 KB
- Stars: 1
- Watchers: 1
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
> This is a fork of the ApexCharts Sankey library. The original library is not available on GitHub anymore, and NPM version has a bug that prevents it from working. This the latest version of the original library.
# ApexSankey
A JavaScript library to create Sankey diagrams built on SVG
## Dependency
Include svg.js
```bash
```
## Installation
To add the ApexSankey to your project and its dependencies, install the package from npm.
```bash
npm install apexsankey
```
## Usage
```js
import ApexSankey from "apexsankey";
```
To create a basic sankey with minimal configuration, write as follows:
```html
```
```js
const data = {
...(data with format provided below)
}
const options = {
width: 800,
height: 800,
canvasStyle: 'border: 1px solid #caced0; background: #f6f6f6;',
spacing: 100,
nodeWidth: 20,
};
const sankey = new ApexSankey(document.getElementById('sankey-container'), options);
const graph = sankey.render(data);
```
## ApexSankey Options
The layout can be configured by either setting the properties in the table below by passing a second arg to ApexSankey with these properties set. The latter takes precedence.
| Options | Default | Description |
| ------------------ | -------------------------- | --------------------------------------------------------------------------------- |
| width | 800 | The width of graph container |
| height | 800 | The height of graph container |
| canvasStyle | None | The css styles for canvas root container |
| spacing | 100 | The spacing from top and left of graph container |
| nodeWidth | 20 | The width of graph nodes |
| nodeBorderWidth | 1 | The border width of the nodes in pixels |
| nodeBorderColor | none | The border color of the nodes |
| onNodeClick | empty function | The callback function for node click. Node object will be parameter for callback. |
| edgeOpacity | 0.4 | The opacity value for edges. Values must be between 0 to 1 and in fraction. |
| enableTooltip | false | Enable tooltip on hover of nodes |
| tooltipId | `sankey-tooltip-container` | The tooltip HTML element id |
| tooltipTemplate | tooltipTemplate | The HTML template for tooltip |
| tooltipBorderColor | `#BCBCBC` | The border color of tooltip |
| tooltipBGColor | `#FFFFFF` | The background color of tooltip |
| fontSize | `14px` | The size of font of nodes |
| fontFamily | None | The font family of nodes |
| fontWeight | 400 | The font weight of nodes |
| fontColor | `#000000` | The font color of nodes |
Default tooltip template
```js
const tooltipTemplate = ({source, target, value}) => {
return `
${source.title}
=>
${target.title}
: ${value}
`;
},
```
### Expected data format
Passed data should be an object containing nodes, edges and options. Nodes, edges and options should be in below format.
- _nodes_ : Passed node object should contain id and title. _Id_ is for uniquely identifying nodes and _title_ is for node titles. It will be also used for showing tooltips for node-to-node connections.
```json
{
"id": "1", // required
"title": "A" // required
}
```
- _edges_ : Passed edge object should contain source, target, value and type. _source_ is id value of source node for edge, _target_ is id value of target node for edge, _value_ indicates edge size and _type_ is for grouping nodes.
```json
{
"source": "a", // required
"target": "b", // required
"value": 1, // required
"type": "x", // optional
},
```
- _options_ : ApexSankey supports two options order and alightLinkTypes.
- _order_: optional list of layers
If order is not specified, the nodes are automatically assigned to layers. If order is specified, it is used directly and no rank assignment or ordering algorithm takes place.
The order structure has three nested lists: order is a list of layers, each of which is a list of bands, each of which is a list of node ids.
For example,
```json
{
"order": [
[["a", "b"]],
[["c"]],
],
},
```
- _alignLinkTypes_: boolean (default false). Whether to align link types across nodes, or order links to minimise crossings.
**Example**
```js
const data = {
nodes: [
{
id: "a",
title: "AAA",
},
{
id: "b",
title: "BBB",
},
{
id: "c",
title: "CCC",
},
],
edges: [
{
source: "a",
target: "c",
value: 1,
type: "A",
},
{
source: "b",
target: "c",
value: 2,
type: "A",
},
],
options: {
order: [[["a", "b"]], [["c"]]],
},
};
```