Sankey Chart Example

1"use client"
2 
3// In your app (monorepo/npm): import { SankeyChart, SankeyLink, SankeyNode, SankeyTooltip } from "@bklitui/ui/charts"
4import { SankeyChart, SankeyLink, SankeyNode, SankeyTooltip } from "@/components/charts"
5 
6const data = {
7  nodes: [
8    { name: "Ads" },
9    { name: "Organic" },
10    { name: "Landing" },
11    { name: "Product" },
12    { name: "Checkout" },
13  ],
14  links: [
15    { source: 0, target: 2, value: 40 },
16    { source: 1, target: 2, value: 30 },
17    { source: 2, target: 3, value: 50 },
18    { source: 3, target: 4, value: 35 },
19  ],
20};
21 
22export default function Component() {
23  return (
24    <main className="flex min-h-svh w-full items-center justify-center p-6 md:p-10">
25      <div className="w-full max-w-3xl">
26        <SankeyChart data={data} aspectRatio="16 / 9">
27  <SankeyLink />
28  <SankeyNode />
29  <SankeyTooltip />
30</SankeyChart>
31      </div>
32    </main>
33  )
34}