Sankey Chart
Sankey charts for visualizing flow data with nodes and links, featuring gradient colors and glow effects
Installation
Usage
import { EvilSankeyChart } from "@/components/evilcharts/charts/sankey-chart";
import type { SankeyData } from "recharts";const data: SankeyData = {
nodes: [
{ name: "Visit" },
{ name: "Direct-Favourite" },
{ name: "Page-Click" },
{ name: "Detail-Favourite" },
{ name: "Lost" },
],
links: [
{ source: 0, target: 1, value: 3728 },
{ source: 0, target: 2, value: 354170 },
{ source: 2, target: 3, value: 62429 },
{ source: 2, target: 4, value: 291741 },
],
};
const chartConfig = {
Visit: {
label: "Visit",
colors: { light: ["#3b82f6"], dark: ["#60a5fa"] },
},
"Page-Click": {
label: "Page Click",
colors: { light: ["#f59e0b"], dark: ["#fbbf24"] },
},
// ... more node configs
} satisfies ChartConfig;
<EvilSankeyChart
data={data}
chartConfig={chartConfig}
isClickable
/>Interactive Selection
When isClickable is enabled, you can use the onSelectionChange callback to handle selection events:
<EvilSankeyChart
data={data}
chartConfig={chartConfig}
isClickable={true}
onSelectionChange={(selection) => {
if (selection) {
console.log("Selected:", selection.dataKey, "Value:", selection.value);
} else {
console.log("Deselected");
}
}}
/>Loading State
The sankey chart supports loading state with a placeholder animation showing nodes and links. You can pass the isLoading prop to the chart to show the loading state while your data is being fetched.
Examples
Below are some examples of the sankey chart with different configurations. You can customize the linkVariant, nodeWidth, nodePadding, and other properties.
Gradient Colors
Labeled Nodes
Display labels and values on nodes using the showNodeLabels prop.
Inside Labels
Use a larger nodeWidth (e.g., 80) to accommodate the text. You can also use linkVerticalPadding to add padding where links connect to nodes.
Outside Labels
Link Variants
The sankey chart supports different link coloring strategies through the linkVariant prop.
Solid Links
Set linkVariant to "solid" to use a single color for all links. This creates a clean, minimal look.
Source-colored Links
Set linkVariant to "source" to color links based on their source node. This helps trace where flows originate.
Glowing Nodes
Add a subtle glow effect to specific nodes using glowingNodes prop. Pass an array of node names to specify which nodes should glow.
API Reference
Sankey diagram data containing nodes and links. Nodes represent entities, and links represent flows between them.
type: SankeyData which is { nodes: SankeyNode[]; links: SankeyLink[] }
where SankeyNode = { name: string; icon?: ReactNode } and SankeyLink = { source: number; target: number; value: number }
Configuration object that defines the chart's nodes. Each key should match a node name from your data, with corresponding colors.
type: ChartConfig
Additional CSS classes to apply to the chart container.
type: string
The width of each node in pixels.
type: number
default: 10
The vertical padding between nodes in pixels.
type: number
default: 10
The curvature of links between nodes. Value between 0 (straight) and 1 (maximum curve).
type: number
default: 0.5
Number of iterations for the Sankey layout algorithm. Higher values produce better layouts but take more time.
type: number
default: 32
Whether to sort nodes automatically for optimal layout.
type: boolean
default: true
Horizontal alignment strategy for nodes. "left" aligns nodes to the left, "justify" spreads them across the width.
type: "left" | "justify"
default: "justify"
Vertical alignment strategy for nodes. "top" aligns to top, "justify" distributes vertically.
type: "justify" | "top"
default: "justify"
The coloring strategy for links. "gradient" uses gradient from source to target, "solid" uses a single color, "source" uses source node color, "target" uses target node color.
type: "gradient" | "solid" | "source" | "target"
default: "gradient"
The border radius of nodes in pixels. Set to 0 for square nodes.
type: number
default: 0
Vertical padding where links connect to nodes in pixels. Useful when using node labels.
type: number
default: 0
Position of node labels. "inside" shows labels inside nodes, "outside" shows labels beside nodes, "none" hides labels.
type: "inside" | "outside" | "none"
default: "none"
Whether to display the total flow value on each node label.
type: boolean
default: false
Function to format node values when showNodeValues is enabled.
type: (value: number) => string
default: (value) => value.toLocaleString()
Whether to hide the tooltip on hover.
type: boolean
default: false
Controls the border-radius of the tooltip.
type: "sm" | "md" | "lg" | "xl"
default: "lg"
Controls the visual style of the tooltip.
type: "default" | "frosted-glass"
default: "default"
When set, the tooltip will be visible by default at the specified data point index.
type: number
Background pattern variant to display behind the chart.
type: BackgroundVariant
Enables interactive clicking on nodes to select/deselect them. Selected nodes become highlighted while unselected nodes and their links dim.
type: boolean
default: false
Callback function that is called when a node is selected or deselected. Receives an object with dataKey (node name) and value (node value calculated from links), or null when deselected.
Note: This prop is only available when isClickable is set to true.
type: (selection: { dataKey: string; value: number } | null) => void
Shows a loading placeholder animation when data is being fetched.
type: boolean
default: false
Array of node names that should have a glowing effect applied. Creates a smooth outer glow around the specified nodes.
type: string[]
default: []
Array of link indices that should have a glowing effect applied. Creates a smooth outer glow around the specified links.
type: number[]
default: []
Additional props to pass to the underlying Recharts Sankey component.
type: Omit<ComponentProps<typeof Sankey>, "data">
Read the Recharts Sankey documentation for available props.