dashboardcn
2

Sankey Chart

PreviousNext

A flow diagram with tinted links, colored node bars, and share labels, on shadcn's chart primitives.

"use client"

import { SankeyChart } from "@/components/ui/sankey-chart"

Installation

pnpm dlx shadcn@latest add https://dashboardcn.com/r/sankey-chart.json

Also installs chart from shadcn/ui if missing.

Usage

import { SankeyChart } from "@/components/ui/sankey-chart"

<SankeyChart
  nodes={[
    { name: "Focus" },
    { name: "Meetings" },
    { name: "Writing" },
    { name: "Calls" },
  ]}
  links={[
    { source: "Focus", target: "Writing", value: 12 },
    { source: "Meetings", target: "Calls", value: 7 },
    { source: "Meetings", target: "Writing", value: 2 },
  ]}
  valueFormatter={(value) => `${value}h`}
/>

Examples

Cash flow

Income sources flowing into budget categories, with a currency formatter.

"use client"

import { SankeyChart } from "@/components/ui/sankey-chart"