Labels in Vue Sankey Chart component

18 Nov 201824 minutes to read

Labels display descriptive text associated with nodes in the Sankey Chart, making the diagram more understandable and interpretable. The Sankey Chart provides comprehensive label customization options including visibility control, font styling, individual label configuration, and dynamic rendering events.

This guide covers label appearance configuration, visibility control, font styling, and advanced label customization.

Label Settings Properties

The labelSettings property provides options to control label appearance, text styling, and visibility. These properties apply globally to all node labels.

Label Configuration Properties

Property Type Default Description
visible boolean true Shows or hides all node labels.
fontSize string | number ‘12px’ Font size of the labels.
color string ’’ Text color of the labels.
fontFamily string null Font family for the label text.
fontWeight string ‘400’ Font weight (e.g., ‘400’ for normal, ‘700’ for bold).
fontStyle string ‘normal’ Font style (e.g., ‘normal’ or ‘italic’).
padding number 10 Space around the label text.

Configure global label styling for all nodes by setting properties like font size, color, font family, and font weight.

Here is an example of customizing label appearance:

<template>
  <div class="control-pane">
    <div class="control-section">
      <EjsSankey
        id="sankey-container"
        width="90%"
        height="450px"
        :labelSettings="labelSettings"
      >
        <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 labelSettings = {
  visible: true,
    fontFamily: "Segoe UI",
    fontStyle: "normal",
    fontWeight: "bold",
    size: "14px",
    color: "#333"
};

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"
        :labelSettings="labelSettings"
      >
        <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",
  components: {
    "ejs-sankey": SankeyComponent,
    "e-sankey-nodes-collection": SankeyNodesCollectionDirective,
    "e-sankey-node": SankeyNodeDirective,
    "e-sankey-links-collection": SankeyLinksCollectionDirective,
    "e-sankey-link": SankeyLinkDirective
  },
  data() {
    return {
      labelSettings: {
        visible: true,
          fontFamily: "Segoe UI",
          fontStyle: "normal",
          fontWeight: "bold",
          size: "14px",
          color: "#333"
      }
    };
  },
  provide: {
    sankey: [SankeyTooltip, SankeyLegend]
  }
};
</script>

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

Hiding Labels

Control label visibility using the visible property in labelSettings. Set it to false to hide all node labels, which can be useful for creating cleaner visualizations when labels take up too much space:

<template>
  <div class="control-pane">
    <div class="control-section">
      <EjsSankey
        id="sankey-container"
        width="90%"
        height="450px"
        :labelSettings="labelSettings"
      >
        <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 labelSettings = { visible: false };

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"
        :labelSettings="labelSettings"
      >
        <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",
  components: {
    "ejs-sankey": SankeyComponent,
    "e-sankey-nodes-collection": SankeyNodesCollectionDirective,
    "e-sankey-node": SankeyNodeDirective,
    "e-sankey-links-collection": SankeyLinksCollectionDirective,
    "e-sankey-link": SankeyLinkDirective
  },
  data() {
    return {
      labelSettings: { visible: false }
    };
  },
  provide: {
    sankey: [SankeyTooltip, SankeyLegend]
  }
};
</script>

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

Font Styling

Apply custom font styling to all labels using properties such as:

  • fontSize: Adjust text size (e.g., ‘12px’, ‘14px’)
  • fontFamily: Specify font family (e.g., ‘Arial’, ‘Times New Roman’)
  • fontWeight: Control text thickness (‘400’ = normal, ‘700’ = bold)
  • fontStyle: Apply text styling (‘normal’ or ‘italic’)
  • color: Set text color (hex or color names)
<template>
  <div class="control-pane">
    <div class="control-section">
      <EjsSankey
        id="sankey-container"
        width="90%"
        height="450px"
        :labelSettings="labelSettings"
      >
        <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 labelSettings = {
  visible: true,
    fontFamily: "Times New Roman",
    fontStyle: "italic",
    fontWeight: "bold",
    size: "16px",
    color: "#C00"
};

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"
        :labelSettings="labelSettings"
      >
        <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",
  components: {
    "ejs-sankey": SankeyComponent,
    "e-sankey-nodes-collection": SankeyNodesCollectionDirective,
    "e-sankey-node": SankeyNodeDirective,
    "e-sankey-links-collection": SankeyLinksCollectionDirective,
    "e-sankey-link": SankeyLinkDirective
  },
  data() {
    return {
      labelSettings: {
        visible: true,
          fontFamily: "Times New Roman",
          fontStyle: "italic",
          fontWeight: "bold",
          size: "16px",
          color: "#C00"
      }
    };
  },
  provide: {
    sankey: [SankeyTooltip, SankeyLegend]
  }
};
</script>

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

Individual Node Labels

Customize the appearance of specific node labels by configuring the label property on each node object. This allows you to override global label settings for specific nodes, enabling data-driven label customization:

<template>
  <div class="control-pane">
    <div class="control-section">
      <EjsSankey
        id="sankey-container"
        width="90%"
        height="450px"
        :labelSettings="labelSettings"
      >
        <ESankeyNodesCollection>
          <ESankeyNode id="Agricultural Waste" :label="{ text: 'Agri Waste', padding: 0 }" />
          <ESankeyNode id="Biomass Residues" :label="{ text: 'Biomass', padding: 10 }" />
          <ESankeyNode id="Bio-conversion" :label="{ text: 'Bio', padding: 0 }" />
          <ESankeyNode id="Liquid Biofuel" :label="{ text: 'Liquid', padding: 10 }" />
          <ESankeyNode id="Electricity" :label="{ text: 'Electricity', padding: 0 }" />
          <ESankeyNode id="Heat" :label="{ text: 'Heat', padding: 10 }" />
        </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 labelSettings = { visible: true };

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"
        :labelSettings="labelSettings"
      >
        <e-sankey-nodes-collection>
           <e-sankey-node id="Agricultural Waste" :label="{ text: 'Agri Waste', padding: 0 }"></e-sankey-node>
            <e-sankey-node id="Biomass Residues" :label="{ text: 'Biomass', padding: 10 }"></e-sankey-node>
            <e-sankey-node id="Bio-conversion" :label="{ text: 'Bio', padding: 0 }"></e-sankey-node>
            <e-sankey-node id="Liquid Biofuel" :label="{ text: 'Liquid', padding: 10 }"></e-sankey-node>
            <e-sankey-node id="Electricity" :label="{ text: 'Electricity', padding: 0 }"></e-sankey-node>
            <e-sankey-node id="Heat"  :label="{ text: 'Heat', padding: 10 }"></e-sankey-node>
        </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
  },
  data() {
    return {
      labelSettings: { visible: true }
    };
  },
  provide: {
    sankey: [SankeyTooltip, SankeyLegend]
  }
};
</script>

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

Advanced Label Configuration

Dynamic Label Customization

Use the labelRendering event to customize label text, styling, and appearance dynamically during the render process. This event is triggered for each label before rendering, allowing you to apply conditional formatting, modify text, or adjust styling based on data values:

<template>
  <div class="control-pane">
    <div class="control-section">
      <EjsSankey
        id="sankey-container"
        width="90%"
        height="450px"
        :labelSettings="labelSettings"
        :labelRendering="onLabelRendering"
      >
        <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";

// Labels visible globally
const labelSettings = { visible: true };

// Event handler: customize label for "Agricultural Waste"
function onLabelRendering(args) {
  if (args.text === "Agricultural Waste 84.152") {
    args.labelStyle = {
      fontWeight: "bold",
      color: "#FF6B6B",
      fontSize: "14px",
      fontFamily: 'Arial',
      fontStyle: 'normal'
    };
  }
}

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"
        :labelSettings="labelSettings"
        :labelRendering="onLabelRendering"
      >
        <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",
  components: {
    "ejs-sankey": SankeyComponent,
    "e-sankey-nodes-collection": SankeyNodesCollectionDirective,
    "e-sankey-node": SankeyNodeDirective,
    "e-sankey-links-collection": SankeyLinksCollectionDirective,
    "e-sankey-link": SankeyLinkDirective
  },
  data() {
    return {
      labelSettings: { visible: true }
    };
  },
  methods: {
    onLabelRendering(args) {
      if (args.text === "Agricultural Waste 84.152") {
      args.labelStyle = {
        fontWeight: "bold",
        color: "#FF6B6B",
        fontSize: "14px",
        fontFamily: 'Arial',
        fontStyle: 'normal'
    };
      }
    }
  },
  provide: {
    sankey: [SankeyTooltip, SankeyLegend]
  }
};
</script>

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