DocumentationNuxt Charts v3

Sankey Chart

Visualize flow relationships between nodes with the Sankey diagram component.

Show how values flow between categories. Sankey diagrams reveal relationships—like how website traffic moves through pages, or how budget allocations distribute across departments.

Basic Usage

<script lang="ts" setup>
defineOptions({
  tags: ["sankeychart", "basic"],
});

interface SankeyNode {
  id: string;
  label: string;
}

interface SankeyLink {
  source: string;
  target: string;
  value: number;
}

const data = {
  nodes: [
    { id: "visitors", label: "Visitors" },
    { id: "signups", label: "Sign Ups" },
    { id: "trials", label: "Trials" },
    { id: "paid", label: "Paid" },
    { id: "churned", label: "Churned" },
    { id: "enterprise", label: "Enterprise" },
    { id: "startup", label: "Startup" },
  ] as SankeyNode[],
  links: [
    { source: "visitors", target: "signups", value: 1000 },
    { source: "signups", target: "trials", value: 600 },
    { source: "signups", target: "churned", value: 400 },
    { source: "trials", target: "paid", value: 400 },
    { source: "trials", target: "churned", value: 200 },
    { source: "paid", target: "enterprise", value: 150 },
    { source: "paid", target: "startup", value: 250 },
  ] as SankeyLink[],
};

const label = (node: SankeyNode) => node.label;
const linkValue = (link: SankeyLink) => link.value;
const nodeColor = (node: SankeyNode) => {
  const colors: Record<string, string> = {
    visitors: "var(--ui-primary)",
    signups: "var(--ui-success)",
    trials: "var(--ui-warning)",
    paid: "var(--ui-info)",
    churned: "var(--ui-error)",
    enterprise: "var(--ui-secondary)",
    startup: "var(--ui-primary)",
  };
  return colors[node.id] ?? "var(--ui-text-muted)";
};
</script>

<template>
  <SankeyChart
    :data="data"
    :height="320"
    :label="label"
    :link-value="linkValue"
    :node-color="nodeColor"
    :node-width="15"
    :node-padding="20"
    :highlight-subtree-on-hover="true"
  />
</template>

Props

Prop	Type	Default	Description
`data`	`{ nodes: N[]; links: L[] }`	Required	Sankey data containing nodes and links arrays.
`height`	`number`	Required	Height of the chart in pixels.
`padding`	`{ top: number; right: number; bottom: number; left: number }`	`undefined`	Chart padding (top, right, bottom, left).
`categories`	`Record<string, BulletLegendItemInterface>`	`undefined`	Category colors and labels for the legend.
`hideLegend`	`boolean`	`false`	If true, hides the chart legend.
`legendPosition`	`LegendPosition`	`undefined`	Position of the legend.
`legendStyle`	`string \| Record<string, string>`	`undefined`	Custom CSS style for the legend container.
`label`	`(node: N) => string`	`undefined`	Accessor function for node labels.
`subLabel`	`(node: N) => string`	`undefined`	Accessor function for node sub-labels.
`nodeColor`	`(node: N) => string`	`undefined`	Accessor function or value for node colors.
`linkColor`	`(link: L) => string`	`undefined`	Accessor function or value for link colors.
`linkValue`	`(link: L) => number`	`undefined`	Accessor function for link values (flow amount).
`nodeWidth`	`number`	`10`	Width of Sankey nodes in pixels.
`nodeAlign`	`SankeyNodeAlign`	`'justify'`	Node alignment method: 'left', 'right', 'center', or 'justify'.
`nodePadding`	`number`	`10`	Vertical spacing between nodes in pixels.
`nodeSort`	`(node1: any, node2: any) => number`	`undefined`	Custom sorting function for nodes.
`linkSort`	`(link1: any, link2: any) => number`	`undefined`	Custom sorting function for links.
`iterations`	`number`	`32`	Sankey layout algorithm iterations.
`hideTooltip`	`boolean`	`false`	If true, hides the tooltip.
`tooltip`	`TooltipConfig`	`undefined`	Tooltip configuration (hideDelay, showDelay, followCursor).
`highlightSubtreeOnHover`	`boolean`	`false`	Highlight the subtree when hovering a node or link.
`labelFontSize`	`number`	`undefined`	Label font size in pixels.
`labelColor`	`(node: N) => string`	`undefined`	Accessor function or value for label colors.
`labelMaxWidth`	`number`	`70`	Maximum label width in pixels.
`duration`	`number`	`undefined`	Animation duration in milliseconds.

Data Format

Provide an object with nodes and links arrays:

types.ts

interface SankeyNode {
  id: string;
  label?: string;
  [key: string]: any;
}

interface SankeyLink {
  source: string; // node id
  target: string; // node id
  value: number; // flow amount
}

interface SankeyData {
  nodes: SankeyNode[];
  links: SankeyLink[];
}

Node Alignment

Control how nodes align horizontally:

'left' - Align all nodes to the left
'right' - Align all nodes to the right
'center' - Center nodes
'justify' - Spread nodes across the width (default)

Events

Event	Payload	Description
`click`	`{ event: MouseEvent, values?: any }`	Fired when a node or link is clicked.

Slots

Slot	Props	Description
`tooltip`	`{ values: any }`	Custom tooltip content.
`fallback`	`{}`	Fallback content while chart loads.

Status Tracker Chart

Learn how to implement and customize Status Tracker Charts in your Nuxt application.

Progress Circle

Display circular progress indicators with the ProgressCircle component.