Angular wrapper for ApexSankey - A JavaScript library to create Sankey diagrams.
npm install ngx-apexsankey apexsankey @svgdotjs/svg.jsImportant: You must load ApexSankey before using the Angular component. Choose one of the following methods:
Add the scripts to your index.html:
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/@svgdotjs/svg.js"></script>
<script src="https://cdn.jsdelivr.net/npm/apexsankey/apexsankey.min.js"></script>
</head>
<body>
<app-root></app-root>
</body>
</html>Add to the scripts array in your angular.json:
{
"architect": {
"build": {
"options": {
"scripts": [
"node_modules/@svgdotjs/svg.js/dist/svg.min.js",
"node_modules/apexsankey/apexsankey.min.js"
]
}
}
}
}import { Component } from "@angular/core";
import {
NgxApexsankeyComponent,
GraphData,
SankeyOptions,
} from "ngx-apexsankey";
@Component({
selector: "app-example",
standalone: true,
imports: [NgxApexsankeyComponent],
template: `
<ngx-apexsankey
[data]="data"
[options]="options"
(nodeClick)="onNodeClick($event)"
>
</ngx-apexsankey>
`,
})
export class ExampleComponent {
data: GraphData = {
nodes: [
{ id: "oil", title: "Oil" },
{ id: "gas", title: "Natural Gas" },
{ id: "fossil", title: "Fossil Fuels" },
{ id: "energy", title: "Energy" },
],
edges: [
{ source: "oil", target: "fossil", value: 15 },
{ source: "gas", target: "fossil", value: 20 },
{ source: "fossil", target: "energy", value: 35 },
],
};
options: Partial<SankeyOptions> = {
width: 800,
height: 600,
nodeWidth: 20,
};
onNodeClick(node: any) {
console.log("Node clicked:", node);
}
}If you have a commercial license, set it once at app initialization:
// app.config.ts
import { setApexSankeyLicense } from "ngx-apexsankey";
setApexSankeyLicense("your-license-key-here");
export const appConfig: ApplicationConfig = {
providers: [],
};| Input | Type | Required | Description |
|---|---|---|---|
data |
GraphData |
Yes | Sankey diagram data (nodes and edges) |
options |
Partial<SankeyOptions> |
No | Configuration options for the diagram |
| Output | Type | Description |
|---|---|---|
nodeClick |
EventEmitter<SankeyNode> |
Emits when a node is clicked |
interface SankeyNode {
id: string; // unique identifier
title: string; // display label
color?: string; // optional custom color
}interface SankeyEdge {
source: string; // source node id
target: string; // target node id
value: number; // edge weight/size
type?: string; // optional grouping type
color?: string; // optional custom color
}| Option | Type | Default | Description |
|---|---|---|---|
width |
number | string |
800 |
Width of graph container |
height |
number | string |
800 |
Height of graph container |
canvasStyle |
string |
"" |
CSS styles for canvas root container |
spacing |
number |
100 |
Spacing from top and left of graph container |
nodeWidth |
number |
20 |
Width of graph nodes |
nodeBorderWidth |
number |
1 |
Border width of nodes in pixels |
nodeBorderColor |
string |
"" |
Border color of nodes |
onNodeClick |
(node) => void |
undefined |
Callback function for node click |
edgeOpacity |
number |
0.4 |
Opacity value for edges (0 to 1) |
edgeGradientFill |
boolean |
true |
Enable gradient fill based on node colors |
enableTooltip |
boolean |
false |
Enable tooltip on hover |
enableToolbar |
boolean |
false |
Enable/disable graph toolbar |
tooltipId |
string |
"sankey-tooltip-container" |
Tooltip HTML element id |
tooltipTemplate |
(content) => string |
default template | HTML template for tooltip |
tooltipBorderColor |
string |
"#BCBCBC" |
Border color of tooltip |
tooltipBGColor |
string |
"#FFFFFF" |
Background color of tooltip |
fontSize |
string |
"14px" |
Font size of node labels |
fontFamily |
string |
"" |
Font family of node labels |
fontWeight |
string |
"400" |
Font weight of node labels |
fontColor |
string |
"#000000" |
Font color of node labels |
const data: GraphData = {
nodes: [...],
edges: [...],
options: {
order: [
[['a', 'b']], // first layer
[['c']] // second layer
]
}
};const options: Partial<SankeyOptions> = {
enableTooltip: true,
tooltipTemplate: ({ source, target, value }) => `
<div style="padding: 8px;">
<strong>${source.title}</strong> → <strong>${target.title}</strong>
<br />Value: ${value}
</div>
`,
};All types are exported:
import {
NgxApexsankeyComponent,
GraphData,
SankeyNode,
SankeyEdge,
SankeyOptions,
SankeyGraph,
setApexSankeyLicense,
} from "ngx-apexsankey";- Angular 17+
- Modern browsers (Chrome, Firefox, Safari, Edge)
See LICENSE file for details.