Sankey Chart
Documentation Index
Fetch the complete documentation index at: /llms.txt. Use this file to discover all available pages before exploring further.
Sankey charts for visualizing flow data with nodes and links, featuring gradient colors and glow effects
Installation
Usage
The sankey chart is a composible compound component: <EvilSankeyChart /> is the
container, and <Node />, <Link />, and <Tooltip /> are composed as children.
Render only the parts you need.
import {
EvilSankeyChart,
Node,
NodeLabel,
Link,
Tooltip,
} 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} config={chartConfig}>
<Node isClickable>
<NodeLabel position="outside" showValues />
</Node>
<Link variant="source" />
<Tooltip />
</EvilSankeyChart>Interactive Selection
Set isClickable on <Node /> to let nodes be selected by clicking. Use the
onSelectionChange callback on the root to handle selection events:
<EvilSankeyChart
data={data}
config={chartConfig}
onSelectionChange={(selection) => {
if (selection) {
console.log("Selected:", selection.dataKey, "Value:", selection.value);
} else {
console.log("Deselected");
}
}}
>
<Node isClickable />
<Link variant="source" />
<Tooltip />
</EvilSankeyChart>Loading State
The sankey chart supports loading state with a placeholder animation showing nodes and links. You can pass the isLoading prop to <EvilSankeyChart /> 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 <Link /> variant, the root nodeWidth, nodePadding, and other properties.
Gradient Colors
Labeled Nodes
Display labels and values on nodes by composing a <NodeLabel /> inside <Node />.
Inside Labels
Use a larger nodeWidth (e.g., 80) on the root to accommodate the text. You can also use verticalPadding on <Link /> to add padding where links connect to nodes.
Outside Labels
Link Variants
The sankey chart supports different link coloring strategies through the variant prop on <Link />.
Solid Links
Set <Link /> variant to "solid" to use a single color for all links. This creates a clean, minimal look.
Source-colored Links
Set <Link /> variant 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 the glow prop on <Node />. Pass an array of node names to specify which nodes should glow.
API Reference
The sankey chart is composed of a root container and a small set of composible parts. Render the root, then compose the parts you need as children.
The root container. Owns the flow data, the layout configuration, the shared context, and the loading skeleton.
Configures how the sankey nodes render. Compose a <NodeLabel /> inside it to
show labels and values.
Declares labels for the <Node /> it is composed inside.
Configures how the sankey links render.
The hover tooltip. Hidden automatically while the chart is loading.