Nodes in Vue Sankey Chart component

18 Nov 201824 minutes to read

Nodes are the fundamental building blocks of a Sankey Chart, representing sources, targets, and intermediate entities in flow diagrams. The Sankey Chart provides extensive customization options for node appearance, enabling you to create visually meaningful and interactive flow diagrams.

This guide covers node customization including styling, individual appearance changes, opacity control, positioning, and dynamic rendering events.

Node Appearance

The nodeStyle property allows you to customize the visual appearance of all nodes in the Sankey Chart. This provides a unified style for all nodes, which can be overridden at the individual node level or through rendering events.

Node Style Properties

Property	Type	Default	Description
width	number	20	Width of the node rectangle in pixels.
padding	number	10	Spacing between nodes and their labels.
fill	string	null	Fill color of nodes. If not specified, theme color is used.
stroke	string	’’	Stroke color of node borders.
strokeWidth	number	1	Width of the node border stroke.
opacity	number	1	Opacity of the node (0 to 1).
highlightOpacity	number	1	Opacity of node when highlighted.
inactiveOpacity	number	0.3	Opacity of inactive nodes (when interacting with others).

Global Node Customization

Customize the global node appearance by configuring the nodeStyle property with properties such as fill color, stroke, width, padding, and opacity levels. Here is an example:

Composition API (~/src/App.vue)
Options API (~/src/App.vue)
<template>
  <div class="control-pane">
    <div class="control-section">

      <EjsSankey
        id="sankey-container"
        width="90%"
        height="450px"
        :nodeStyle="nodeStyle"
      >
        <ESankeyNodesCollection>
          <ESankeyNode id="Agricultural Waste" />
          <ESankeyNode id="Biomass Residues" />
          <ESankeyNode id="Bio-conversion" />
          <ESankeyNode id="Liquid Biofuel" />
          <ESankeyNode id="Electricity" />
          <ESankeyNode id="Heat" />
        </ESankeyNodesCollection>

        <ESankeyLinksCollection>
          <ESankeyLink sourceId="Agricultural Waste" targetId="Bio-conversion" :value="84.152" />
          <ESankeyLink sourceId="Biomass Residues" targetId="Bio-conversion" :value="24.152" />
          <ESankeyLink sourceId="Bio-conversion" targetId="Liquid Biofuel" :value="10.597" />
          <ESankeyLink sourceId="Bio-conversion" targetId="Electricity" :value="36.862" />
          <ESankeyLink sourceId="Bio-conversion" targetId="Heat" :value="60.845" />
        </ESankeyLinksCollection>

      </EjsSankey>

    </div>
  </div>
</template>

<script setup>
import { provide } from "vue";

import {
  SankeyComponent as EjsSankey,
  SankeyNodesCollectionDirective as ESankeyNodesCollection,
  SankeyNodeDirective as ESankeyNode,
  SankeyLinksCollectionDirective as ESankeyLinksCollection,
  SankeyLinkDirective as ESankeyLink,
  SankeyTooltip,
  SankeyLegend
} from "@syncfusion/ej2-vue-charts";

const nodeStyle = {
  fill: "#4472C4",
  stroke: "#2E5090",
  strokeWidth: 2,
  width: 20,
  opacity: 0.8
};

provide("sankey", [SankeyTooltip, SankeyLegend]);
</script>

<style>
#sankey-container {
  height: 450px;
}
</style>
<template>
  <div id="app" class="control-pane">
    <div class="control-section">

      <ejs-sankey
        id="sankey-container"
        width="90%"
        height="450px"
        :nodeStyle="nodeStyle"
      >
        <e-sankey-nodes-collection>
          <e-sankey-node id="Agricultural Waste" />
          <e-sankey-node id="Biomass Residues" />
          <e-sankey-node id="Bio-conversion" />
          <e-sankey-node id="Liquid Biofuel" />
          <e-sankey-node id="Electricity" />
          <e-sankey-node id="Heat" />
        </e-sankey-nodes-collection>

        <e-sankey-links-collection>
          <e-sankey-link sourceId="Agricultural Waste" targetId="Bio-conversion" :value="84.152" />
          <e-sankey-link sourceId="Biomass Residues" targetId="Bio-conversion" :value="24.152" />
          <e-sankey-link sourceId="Bio-conversion" targetId="Liquid Biofuel" :value="10.597" />
          <e-sankey-link sourceId="Bio-conversion" targetId="Electricity" :value="36.862" />
          <e-sankey-link sourceId="Bio-conversion" targetId="Heat" :value="60.845" />
        </e-sankey-links-collection>

      </ejs-sankey>

    </div>
  </div>
</template>

<script>
import {
  SankeyComponent,
  SankeyNodesCollectionDirective,
  SankeyNodeDirective,
  SankeyLinksCollectionDirective,
  SankeyLinkDirective,
  SankeyTooltip,
  SankeyLegend
} from "@syncfusion/ej2-vue-charts";

export default {
  name: "App",

  data() {
    return {
      nodeStyle: {
        fill: "#4472C4",
        stroke: "#2E5090",
        strokeWidth: 2,
        width: 20,
        opacity: 0.8
      }
    };
  },

  components: {
    "ejs-sankey": SankeyComponent,
    "e-sankey-nodes-collection": SankeyNodesCollectionDirective,
    "e-sankey-node": SankeyNodeDirective,
    "e-sankey-links-collection": SankeyLinksCollectionDirective,
    "e-sankey-link": SankeyLinkDirective
  },

  provide: {
    sankey: [SankeyTooltip, SankeyLegend]
  }
};
</script>

<style>
#sankey-container {
  height: 450px;
}
</style>

Individual Node Customization

Beyond global styling, you can customize the appearance of specific nodes by setting individual properties. Each node can have its own color, styling, and appearance settings that override the global nodeStyle configuration. This approach is useful when you want certain nodes to stand out or follow a specific color scheme:

Composition API (~/src/App.vue)
Options API (~/src/App.vue)
<template>
  <div class="control-pane">
    <div class="control-section">

      <EjsSankey
        id="sankey-container"
        width="90%"
        height="450px"
      >
        <ESankeyNodesCollection>
          <ESankeyNode id="Agricultural Waste" color="#f41212"/>
          <ESankeyNode id="Biomass Residues" color="#aed62c"/>
          <ESankeyNode id="Bio-conversion" color="#259bc3"/>
          <ESankeyNode id="Liquid Biofuel" color="#0e11af"/>
          <ESankeyNode id="Electricity" color="#7a0e92"/>
          <ESankeyNode id="Heat" color="#c5b9bb"/>
        </ESankeyNodesCollection>

        <ESankeyLinksCollection>
          <ESankeyLink sourceId="Agricultural Waste" targetId="Bio-conversion" :value="84.152" />
          <ESankeyLink sourceId="Biomass Residues" targetId="Bio-conversion" :value="24.152" />
          <ESankeyLink sourceId="Bio-conversion" targetId="Liquid Biofuel" :value="10.597" />
          <ESankeyLink sourceId="Bio-conversion" targetId="Electricity" :value="36.862" />
          <ESankeyLink sourceId="Bio-conversion" targetId="Heat" :value="60.845" />
        </ESankeyLinksCollection>

      </EjsSankey>

    </div>
  </div>
</template>

<script setup>
import { provide } from "vue";

import {
  SankeyComponent as EjsSankey,
  SankeyNodesCollectionDirective as ESankeyNodesCollection,
  SankeyNodeDirective as ESankeyNode,
  SankeyLinksCollectionDirective as ESankeyLinksCollection,
  SankeyLinkDirective as ESankeyLink,
  SankeyTooltip,
  SankeyLegend
} from "@syncfusion/ej2-vue-charts";

provide("sankey", [SankeyTooltip, SankeyLegend]);
</script>

<style>
#sankey-container {
  height: 450px;
}
</style>
<template>
  <div id="app" class="control-pane">
    <div class="control-section">

      <ejs-sankey
        id="sankey-container"
        width="90%"
        height="450px"
      >
        <e-sankey-nodes-collection>
          <e-sankey-node id="Agricultural Waste" color="#f41212"/>
          <e-sankey-node id="Biomass Residues" color="#aed62c"/>
          <e-sankey-node id="Bio-conversion" color="#259bc3"/>
          <e-sankey-node id="Liquid Biofuel" color="#0e11af"/>
          <e-sankey-node id="Electricity" color="#7a0e92"/>
          <e-sankey-node id="Heat" color="#c5b9bb" />
        </e-sankey-nodes-collection>

        <e-sankey-links-collection>
          <e-sankey-link sourceId="Agricultural Waste" targetId="Bio-conversion" :value="84.152" />
          <e-sankey-link sourceId="Biomass Residues" targetId="Bio-conversion" :value="24.152" />
          <e-sankey-link sourceId="Bio-conversion" targetId="Liquid Biofuel" :value="10.597" />
          <e-sankey-link sourceId="Bio-conversion" targetId="Electricity" :value="36.862" />
          <e-sankey-link sourceId="Bio-conversion" targetId="Heat" :value="60.845" />
        </e-sankey-links-collection>

      </ejs-sankey>

    </div>
  </div>
</template>

<script>
import {
  SankeyComponent,
  SankeyNodesCollectionDirective,
  SankeyNodeDirective,
  SankeyLinksCollectionDirective,
  SankeyLinkDirective,
  SankeyTooltip,
  SankeyLegend
} from "@syncfusion/ej2-vue-charts";

export default {
  name: "App",

  components: {
    "ejs-sankey": SankeyComponent,
    "e-sankey-nodes-collection": SankeyNodesCollectionDirective,
    "e-sankey-node": SankeyNodeDirective,
    "e-sankey-links-collection": SankeyLinksCollectionDirective,
    "e-sankey-link": SankeyLinkDirective
  },

  provide: {
    sankey: [SankeyTooltip, SankeyLegend]
  }
};
</script>

<style>
#sankey-container {
  height: 450px;
}
</style>

Opacity and Interaction

Control how nodes appear during user interactions. The Sankey Chart provides three opacity properties:

opacity: The default opacity of nodes in their normal state (0 to 1)
highlightOpacity: The opacity when a node is highlighted or hovered
inactiveOpacity: The opacity of nodes that are not actively being interacted with

Configure these properties to provide visual feedback and improve the interactivity experience:

Composition API (~/src/App.vue)
Options API (~/src/App.vue)
<template>
  <div class="control-pane">
    <div class="control-section">

      <EjsSankey 
        id="sankey-container"
        width="90%"
        height="450px"
        :nodeStyle="nodeStyle"
      >
        <ESankeyNodesCollection>
          <ESankeyNode id="Agricultural Waste" />
          <ESankeyNode id="Biomass Residues" />
          <ESankeyNode id="Bio-conversion" />
          <ESankeyNode id="Liquid Biofuel" />
          <ESankeyNode id="Electricity" />
          <ESankeyNode id="Heat" />
        </ESankeyNodesCollection>

        <ESankeyLinksCollection>
          <ESankeyLink sourceId="Agricultural Waste" targetId="Bio-conversion" :value="84.152" />
          <ESankeyLink sourceId="Biomass Residues" targetId="Bio-conversion" :value="24.152" />
          <ESankeyLink sourceId="Bio-conversion" targetId="Liquid Biofuel" :value="10.597" />
          <ESankeyLink sourceId="Bio-conversion" targetId="Electricity" :value="36.862" />
          <ESankeyLink sourceId="Bio-conversion" targetId="Heat" :value="60.845" />
        </ESankeyLinksCollection>

      </EjsSankey>

    </div>
  </div>
</template>

<script setup>
import { provide } from "vue";

import {
  SankeyComponent as EjsSankey,
  SankeyNodesCollectionDirective as ESankeyNodesCollection,
  SankeyNodeDirective as ESankeyNode,
  SankeyLinksCollectionDirective as ESankeyLinksCollection,
  SankeyLinkDirective as ESankeyLink,
  SankeyTooltip,
  SankeyLegend
} from "@syncfusion/ej2-vue-charts";

const nodeStyle = {
  opacity: 0.9,
  highlightOpacity: 1,
  inactiveOpacity: 0.3
};

provide("sankey", [SankeyTooltip, SankeyLegend]);
</script>

<style>
#sankey-container {
  height: 450px;
}
</style>
<template>
  <div id="app" class="control-pane">
    <div class="control-section">

      <ejs-sankey 
        id="sankey-container"
        width="90%"
        height="450px"
        :nodeStyle="nodeStyle"
      >
        <e-sankey-nodes-collection>
          <e-sankey-node id="Agricultural Waste" />
          <e-sankey-node id="Biomass Residues" />
          <e-sankey-node id="Bio-conversion" />
          <e-sankey-node id="Liquid Biofuel" />
          <e-sankey-node id="Electricity" />
          <e-sankey-node id="Heat" />
        </e-sankey-nodes-collection>

        <e-sankey-links-collection>
          <e-sankey-link sourceId="Agricultural Waste" targetId="Bio-conversion" :value="84.152" />
          <e-sankey-link sourceId="Biomass Residues" targetId="Bio-conversion" :value="24.152" />
          <e-sankey-link sourceId="Bio-conversion" targetId="Liquid Biofuel" :value="10.597" />
          <e-sankey-link sourceId="Bio-conversion" targetId="Electricity" :value="36.862" />
          <e-sankey-link sourceId="Bio-conversion" targetId="Heat" :value="60.845" />
        </e-sankey-links-collection>

      </ejs-sankey>

    </div>
  </div>
</template>

<script>
import {
  SankeyComponent,
  SankeyNodesCollectionDirective,
  SankeyNodeDirective,
  SankeyLinksCollectionDirective,
  SankeyLinkDirective,
  SankeyTooltip,
  SankeyLegend
} from "@syncfusion/ej2-vue-charts";

export default {
  name: "App",

  data() {
    return {
      nodeStyle: {
        opacity: 0.9,
        highlightOpacity: 1,
        inactiveOpacity: 0.3
      }
    };
  },

  components: {
    "ejs-sankey": SankeyComponent,
    "e-sankey-nodes-collection": SankeyNodesCollectionDirective,
    "e-sankey-node": SankeyNodeDirective,
    "e-sankey-links-collection": SankeyLinksCollectionDirective,
    "e-sankey-link": SankeyLinkDirective
  },

  provide: {
    sankey: [SankeyTooltip, SankeyLegend]
  }
};
</script>

<style>
#sankey-container {
  height: 450px;
}
</style>

Node Offset

Use the offset property to adjust node positions vertically (in Horizontal orientation) or horizontally (in Vertical orientation). The offset direction depends on the chart orientation:

In Horizontal orientation: Offset adjusts node positions vertically
In Vertical orientation: Offset adjusts node positions horizontally

This property is useful for manually arranging nodes to avoid overlaps or create specific flow patterns:

Composition API (~/src/App.vue)
Options API (~/src/App.vue)
<template>
  <div class="control-pane">
    <div class="control-section">
      <EjsSankey
        id="sankey-container"
        width="90%"
        height="450px"
      >
        <ESankeyNodesCollection>
          <ESankeyNode id="Agricultural Waste" :offset="-11" />
          <ESankeyNode id="Biomass Residues" :offset="-20"/>
          <ESankeyNode id="Bio-conversion" :offset="-20"/>
          <ESankeyNode id="Liquid Biofuel" :offset="17" />
          <ESankeyNode id="Electricity" :offset="8" />
          <ESankeyNode id="Heat" />
        </ESankeyNodesCollection>

        <ESankeyLinksCollection>
          <ESankeyLink sourceId="Agricultural Waste" targetId="Bio-conversion" :value="84.152" />
          <ESankeyLink sourceId="Biomass Residues" targetId="Bio-conversion" :value="24.152" />
          <ESankeyLink sourceId="Bio-conversion" targetId="Liquid Biofuel" :value="10.597" />
          <ESankeyLink sourceId="Bio-conversion" targetId="Electricity" :value="36.862" />
          <ESankeyLink sourceId="Bio-conversion" targetId="Heat" :value="60.845" />
        </ESankeyLinksCollection>
      </EjsSankey>
    </div>
  </div>
</template>

<script setup>
import { provide } from "vue";
import {
  SankeyComponent as EjsSankey,
  SankeyNodesCollectionDirective as ESankeyNodesCollection,
  SankeyNodeDirective as ESankeyNode,
  SankeyLinksCollectionDirective as ESankeyLinksCollection,
  SankeyLinkDirective as ESankeyLink,
  SankeyTooltip,
  SankeyLegend
} from "@syncfusion/ej2-vue-charts";

provide("sankey", [SankeyTooltip, SankeyLegend]);
</script>

<style>
#sankey-container {
  height: 450px;
}
</style>
<template>
  <div id="app" class="control-pane">
    <div class="control-section">
      <ejs-sankey
        id="sankey-container"
        width="90%"
        height="450px"
      >
        <e-sankey-nodes-collection>
          <e-sankey-node id="Agricultural Waste" :offset="-11" />
          <e-sankey-node id="Biomass Residues" :offset="-20"/>
          <e-sankey-node id="Bio-conversion" :offset="-20"/>
          <e-sankey-node id="Liquid Biofuel" :offset="50" :offset="17" />
          <e-sankey-node id="Electricity" :offset="-30" :offset="8"/>
          <e-sankey-node id="Heat" />
        </e-sankey-nodes-collection>

        <e-sankey-links-collection>
          <e-sankey-link sourceId="Agricultural Waste" targetId="Bio-conversion" :value="84.152" />
          <e-sankey-link sourceId="Biomass Residues" targetId="Bio-conversion" :value="24.152" />
          <e-sankey-link sourceId="Bio-conversion" targetId="Liquid Biofuel" :value="10.597" />
          <e-sankey-link sourceId="Bio-conversion" targetId="Electricity" :value="36.862" />
          <e-sankey-link sourceId="Bio-conversion" targetId="Heat" :value="60.845" />
        </e-sankey-links-collection>
      </ejs-sankey>
    </div>
  </div>
</template>

<script>
import {
  SankeyComponent,
  SankeyNodesCollectionDirective,
  SankeyNodeDirective,
  SankeyLinksCollectionDirective,
  SankeyLinkDirective,
  SankeyTooltip,
  SankeyLegend
} from "@syncfusion/ej2-vue-charts";

export default {
  name: "App",
  components: {
    "ejs-sankey": SankeyComponent,
    "e-sankey-nodes-collection": SankeyNodesCollectionDirective,
    "e-sankey-node": SankeyNodeDirective,
    "e-sankey-links-collection": SankeyLinksCollectionDirective,
    "e-sankey-link": SankeyLinkDirective
  },
  provide: {
    sankey: [SankeyTooltip, SankeyLegend]
  }
};
</script>

<style>
#sankey-container {
  height: 450px;
}
</style>

Advanced Node Configuration

Node Rendering Event

Use the nodeRendering event to customize node appearance dynamically before rendering. This event is triggered for each node, allowing you to apply conditional styling, calculate colors based on data values, or modify properties based on context:

Composition API (~/src/App.vue)
Options API (~/src/App.vue)
<template>
  <div class="control-pane">
    <div class="control-section">
      <EjsSankey
        id="sankey-container"
        width="90%"
        height="450px"
        :nodeRendering="onNodeRendering"
      >
        <ESankeyNodesCollection>
          <ESankeyNode id="Agricultural Waste" />
          <ESankeyNode id="Biomass Residues" />
          <ESankeyNode id="Bio-conversion" />
          <ESankeyNode id="Liquid Biofuel" />
          <ESankeyNode id="Electricity" />
          <ESankeyNode id="Heat" />
        </ESankeyNodesCollection>

        <ESankeyLinksCollection>
          <ESankeyLink sourceId="Agricultural Waste" targetId="Bio-conversion" :value="84.152" />
          <ESankeyLink sourceId="Biomass Residues" targetId="Bio-conversion" :value="24.152" />
          <ESankeyLink sourceId="Bio-conversion" targetId="Liquid Biofuel" :value="10.597" />
          <ESankeyLink sourceId="Bio-conversion" targetId="Electricity" :value="36.862" />
          <ESankeyLink sourceId="Bio-conversion" targetId="Heat" :value="60.845" />
        </ESankeyLinksCollection>
      </EjsSankey>
    </div>
  </div>
</template>

<script setup>
import { provide } from "vue";
import {
  SankeyComponent as EjsSankey,
  SankeyNodesCollectionDirective as ESankeyNodesCollection,
  SankeyNodeDirective as ESankeyNode,
  SankeyLinksCollectionDirective as ESankeyLinksCollection,
  SankeyLinkDirective as ESankeyLink,
  SankeyTooltip,
  SankeyLegend
} from "@syncfusion/ej2-vue-charts";

function onNodeRendering(args) {
  if (args.node.id === "Bio-conversion") {
    args.node.color = "#FF6B6B";
  } else if (args.node.id === "Liquid Biofuel") {
    args.node.color = "#4ECDC4";
  } else if (args.node.id === "Electricity") {
    args.node.color = "#45B7D1";
  } else if (args.node.id === "Heat") {
    args.node.color = "#FFA07A";
  } else {
    args.node.color = "#98D8C8";
  }
}

provide("sankey", [SankeyTooltip, SankeyLegend]);
</script>

<style>
#sankey-container {
  height: 450px;
}
</style>
<template>
  <div class="control-pane">
    <div class="control-section">

      <ejs-sankey
        id="sankey-container"
        width="90%"
        height="450px"
        :nodeRendering="onNodeRendering"
      >
        <e-sankey-nodes-collection>
          <e-sankey-node id="Agricultural Waste" />
          <e-sankey-node id="Biomass Residues" />
          <e-sankey-node id="Bio-conversion" />
          <e-sankey-node id="Liquid Biofuel" />
          <e-sankey-node id="Electricity" />
          <e-sankey-node id="Heat" />
        </e-sankey-nodes-collection>

        <e-sankey-links-collection>
          <e-sankey-link sourceId="Agricultural Waste" targetId="Bio-conversion" :value="84.152" />
          <e-sankey-link sourceId="Biomass Residues" targetId="Bio-conversion" :value="24.152" />
          <e-sankey-link sourceId="Bio-conversion" targetId="Liquid Biofuel" :value="10.597" />
          <e-sankey-link sourceId="Bio-conversion" targetId="Electricity" :value="36.862" />
          <e-sankey-link sourceId="Bio-conversion" targetId="Heat" :value="60.845" />
        </e-sankey-links-collection>

      </ejs-sankey>

    </div>
  </div>
</template>

<script>
import {
  SankeyComponent,
  SankeyNodesCollectionDirective,
  SankeyNodeDirective,
  SankeyLinksCollectionDirective,
  SankeyLinkDirective,
  SankeyTooltip,
  SankeyLegend
} from "@syncfusion/ej2-vue-charts";

export default {
  name: "App",

  methods: {
    onNodeRendering(args) {
      if (args.node.id === "Bio-conversion") {
        args.node.color = "#FF6B6B";
      } else if (args.node.id === "Liquid Biofuel") {
        args.node.color = "#4ECDC4";
      } else if (args.node.id === "Electricity") {
        args.node.color = "#45B7D1";
      } else if (args.node.id === "Heat") {
        args.node.color = "#FFA07A";
      } else {
        args.node.color = "#98D8C8";
      }
    }
  },

  components: {
    "ejs-sankey": SankeyComponent,
    "e-sankey-nodes-collection": SankeyNodesCollectionDirective,
    "e-sankey-node": SankeyNodeDirective,
    "e-sankey-links-collection": SankeyLinksCollectionDirective,
    "e-sankey-link": SankeyLinkDirective
  },

  provide: {
    sankey: [SankeyTooltip, SankeyLegend]
  }
};
</script>

<style>
#sankey-container {
  height: 450px;
}
</style>

Search docs

Ask Syncfusion AI Assistant