---
title: Sankey Blocks
description: Ready-made sankey chart blocks, powered by Apache ECharts
image: /og/og-image.png
---

## Fund Allocation

### Fund Allocation

```tsx
"use client";

import { EChartsSankeyChart, type ChartConfig } from "@/components/evilcharts/charts/echarts-sankey-chart";
import { cn } from "@/lib/utils";

const chartData = {
  nodes: [
    { name: "Inflow" },
    { name: "Equities" },
    { name: "Bonds" },
    { name: "Cash" },
    { name: "Growth" },
    { name: "Income" },
    { name: "Reserve" },
  ],
  links: [
    { source: 0, target: 1, value: 78 },
    { source: 0, target: 2, value: 46 },
    { source: 0, target: 3, value: 24 },
    { source: 1, target: 4, value: 52 },
    { source: 1, target: 5, value: 26 },
    { source: 2, target: 5, value: 19 },
    { source: 2, target: 6, value: 27 },
    { source: 3, target: 4, value: 9 },
    { source: 3, target: 6, value: 15 },
  ],
};

const chartConfig = {
  Inflow: { label: "Inflow", colors: { light: ["#0d9488"], dark: ["#2dd4bf"] } },
  Equities: { label: "Equities", colors: { light: ["#d97706"], dark: ["#fbbf24"] } },
  Bonds: { label: "Bonds", colors: { light: ["#ea580c"], dark: ["#fb923c"] } },
  Cash: { label: "Cash", colors: { light: ["#b45309"], dark: ["#f59e0b"] } },
  Growth: { label: "Growth", colors: { light: ["#7c3aed"], dark: ["#a78bfa"] } },
  Income: { label: "Income", colors: { light: ["#6d28d9"], dark: ["#8b5cf6"] } },
  Reserve: { label: "Reserve", colors: { light: ["#4f46e5"], dark: ["#818cf8"] } },
} satisfies ChartConfig;

const STATS = [
  { key: "positions", label: "Open positions", value: "204" },
  { key: "aum", label: "Assets under management", value: "$65,430" },
  { key: "hedged", label: "Hedged", value: "87%" },
];

export function EChartsAllocationSankeyChart() {
  return (
    <div className="flex h-full w-full flex-col p-4">
      <div className="flex items-baseline justify-between gap-4">
        <span className="text-primary text-base font-medium tracking-tight sm:text-lg">
          Where the fund flows
        </span>
        <span className="text-muted-foreground text-xs">Quarter to date</span>
      </div>

      <div className="mt-2 min-h-0 w-full flex-1">
        <EChartsSankeyChart
          data={chartData}
          config={chartConfig}
          className="h-full w-full"
          nodeWidth={92}
          nodePadding={12}
          linkCurvature={0.55}
        >
          <EChartsSankeyChart.Tooltip variant="frosted-glass" />
          <EChartsSankeyChart.Link variant="gradient" />
          <EChartsSankeyChart.Node radius={6}>
            <EChartsSankeyChart.NodeLabel
              position="inside"
              showValues
              valueFormatter={(value) => `$${(value * 1000).toLocaleString("en-US")}`}
            />
          </EChartsSankeyChart.Node>
        </EChartsSankeyChart>
      </div>

      <div className="mt-3 grid shrink-0 grid-cols-3 gap-4">
        {STATS.map(({ key, label, value }, i) => (
          <div
            key={key}
            className={cn(
              "flex flex-col gap-0.5",
              i === 1 && "items-center text-center",
              i === STATS.length - 1 && "items-end text-right",
            )}
          >
            <span className="text-muted-foreground truncate text-[10px] tracking-wide uppercase sm:text-[11px]">
              {label}
            </span>
            <span className="text-primary text-lg font-semibold tracking-tight sm:text-2xl">
              {value}
            </span>
          </div>
        ))}
      </div>
    </div>
  );
}

```
### npm

```bash
npx shadcn@latest add @evilcharts/allocation-echarts-sankey-chart
```

### yarn

```bash
yarn shadcn@latest add @evilcharts/allocation-echarts-sankey-chart
```

### bun

```bash
bunx --bun shadcn@latest add @evilcharts/allocation-echarts-sankey-chart
```

### pnpm

```bash
pnpm dlx shadcn@latest add @evilcharts/allocation-echarts-sankey-chart
```

## Revenue Pipeline

### Revenue Pipeline

```tsx
"use client";

import { EChartsSankeyChart, type ChartConfig } from "@/components/evilcharts/charts/echarts-sankey-chart";

const chartData = {
  nodes: [
    { name: "Retail" },
    { name: "Wholesale" },
    { name: "Licensing" },
    { name: "Services" },
    { name: "Pipeline" },
    { name: "Expansion" },
    { name: "Tooling" },
    { name: "Support" },
    { name: "Reserve" },
  ],
  links: [
    { source: 0, target: 4, value: 31480 },
    { source: 1, target: 4, value: 46220 },
    { source: 2, target: 4, value: 14960 },
    { source: 3, target: 4, value: 28340 },
    { source: 4, target: 5, value: 52640 },
    { source: 4, target: 6, value: 9180 },
    { source: 4, target: 7, value: 12470 },
    { source: 4, target: 8, value: 46710 },
  ],
};

const chartConfig = {
  Retail: { label: "Retail", colors: { light: ["#1d4ed8"], dark: ["#3b82f6"] } },
  Wholesale: { label: "Wholesale", colors: { light: ["#2563eb"], dark: ["#60a5fa"] } },
  Licensing: { label: "Licensing", colors: { light: ["#4338ca"], dark: ["#6366f1"] } },
  Services: { label: "Services", colors: { light: ["#4f46e5"], dark: ["#818cf8"] } },
  // The hub is a waist, not a category: no label, and a mid tone so the bands
  // read blue -> violet -> red straight across instead of fading out at centre.
  Pipeline: { label: "", colors: { light: ["#6d28d9"], dark: ["#8b5cf6"] } },
  Expansion: { label: "Expansion", colors: { light: ["#be123c"], dark: ["#f43f5e"] } },
  Tooling: { label: "Tooling", colors: { light: ["#c2410c"], dark: ["#fb923c"] } },
  Support: { label: "Support", colors: { light: ["#9f1239"], dark: ["#fb7185"] } },
  Reserve: { label: "Reserve", colors: { light: ["#b91c1c"], dark: ["#ef4444"] } },
} satisfies ChartConfig;

const TOTAL = chartData.links
  .filter((link) => link.target === 4)
  .reduce((sum, link) => sum + link.value, 0);

export function EChartsPipelineSankeyChart() {
  return (
    <div className="relative h-full w-full p-4">
      <EChartsSankeyChart
        data={chartData}
        config={chartConfig}
        className="h-full w-full"
        nodeWidth={10}
        nodePadding={18}
        linkCurvature={0.55}
      >
        <EChartsSankeyChart.Tooltip variant="frosted-glass" />
        <EChartsSankeyChart.Link variant="gradient" />
        <EChartsSankeyChart.Node radius={5}>
          <EChartsSankeyChart.NodeLabel
            position="outside"
            showValues
            valueFormatter={(value) => `$${value.toLocaleString("en-US")}`}
          />
        </EChartsSankeyChart.Node>
      </EChartsSankeyChart>

      <div className="pointer-events-none absolute inset-0 flex items-stretch justify-center">
        <div className="flex h-full flex-col items-center justify-center bg-[linear-gradient(to_right,transparent_0%,var(--background)_32%,var(--background)_68%,transparent_100%)] px-14">
          <span className="text-muted-foreground text-[11px] sm:text-xs">Total booked</span>
          <span className="text-primary text-2xl leading-none font-semibold tracking-tight sm:text-4xl">
            ${TOTAL.toLocaleString("en-US")}
          </span>
          <span className="text-muted-foreground mt-1 text-[11px] sm:text-xs">
            4 sources &middot; 4 routes
          </span>
        </div>
      </div>
    </div>
  );
}

```
### npm

```bash
npx shadcn@latest add @evilcharts/pipeline-echarts-sankey-chart
```

### yarn

```bash
yarn shadcn@latest add @evilcharts/pipeline-echarts-sankey-chart
```

### bun

```bash
bunx --bun shadcn@latest add @evilcharts/pipeline-echarts-sankey-chart
```

### pnpm

```bash
pnpm dlx shadcn@latest add @evilcharts/pipeline-echarts-sankey-chart
```