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 flows between nodes, with labels and gradient links
Installation
Usage
A compound component: <EvilSankeyChart /> is the container; <EvilSankeyChart.Node />, <EvilSankeyChart.Link />, and <EvilSankeyChart.Tooltip /> compose as children. Render only the parts you need.
<script lang="ts">
import {
EvilSankeyChart,
type SankeyData
} from '$lib/components/evilcharts/charts/layerchart-sankey-chart/index.js';
import { type ChartConfig } from '$lib/components/evilcharts/ui/layerchart-chart';
</script><script lang="ts">
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;
</script>
<EvilSankeyChart {data} config={chartConfig}>
<EvilSankeyChart.Node isClickable>
<EvilSankeyChart.NodeLabel position="outside" showValues />
</EvilSankeyChart.Node>
<EvilSankeyChart.Link variant="source" />
<EvilSankeyChart.Tooltip />
</EvilSankeyChart>Interactive Selection
Set isClickable on <Node /> to select nodes on click. Handle events with the
root’s onSelectionChange callback:
<EvilSankeyChart
{data}
config={chartConfig}
onSelectionChange={(selection) => {
if (selection) {
console.log('Selected:', selection.dataKey, 'Value:', selection.value);
} else {
console.log('Deselected');
}
}}
>
<EvilSankeyChart.Node isClickable />
<EvilSankeyChart.Link variant="source" />
<EvilSankeyChart.Tooltip />
</EvilSankeyChart>Loading State
Pass isLoading to <EvilSankeyChart /> to show a placeholder animation of nodes and links while data loads.
Examples
Customize the <Link /> variant, the root nodeWidth, nodePadding, and more.
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 fit the text. Add verticalPadding on <Link /> for space where links meet nodes.
Outside Labels
Link Variants
The variant prop on <Link /> sets the link coloring strategy.
Solid Links
Set <Link /> variant to "solid" for a single color across all links — clean and minimal.
Source-colored Links
Set <Link /> variant to "source" to color links by their source node, tracing where flows originate.
API Reference
A root container plus a few composable parts. Render the root, then compose the parts you need.
The root container. Owns the flow data, layout config, shared context, and the loading skeleton.
Configures how nodes render. Compose a <NodeLabel /> inside to show labels and
values.
Declares labels for the <Node /> it is composed inside.
Configures how links render.
The hover tooltip. Hidden automatically while the chart is loading.