Beautiful Charts
Get the charts

Instrument · Free · Recharts or ECharts

Sankey chart: pick what's on it

Every option is a prop of the installed chart. The preview and the code use the same props, so what you copy is what you see.

Options, preview and code

Engine
Presets
Data
Shape
Surroundings
Tooltip
Colours
Behaviour
Feel

Funnel · September

Where visitors go

14,000 flows from 1 source. The largest link is Visits → Left at 9,800; the most ends at Left (9,800).

7 nodes and 6 links. 14,000 flows from 1 source. The largest link is Visits → Left at 9,800; the most ends at Left (9,800).
FromToValueShare of its source
Code for this chart

"use client";

// Install: npx shadcn@latest add https://beautifulcharts.dev/r/instrument-sankey-chart-recharts.json
import { SankeyChart } from "@/components/beautiful-charts/themes/instrument/recharts/sankey-chart";
import type { ChartConfig } from "@/components/beautiful-charts/core/contracts";

const data = {
  nodes: [
    { id: "visits", label: "Visits" },
    { id: "signup", label: "Sign-ups" },
    { id: "bounce", label: "Left" },
    { id: "trial", label: "Trials" },
    { id: "idle", label: "Inactive" },
    { id: "paid", label: "Paid" },
    { id: "churn", label: "Churned" },
  ],
  links: [
    { source: "visits", target: "signup", value: 4200 },
    { source: "visits", target: "bounce", value: 9800 },
    { source: "signup", target: "trial", value: 2600 },
    { source: "signup", target: "idle", value: 1600 },
    { source: "trial", target: "paid", value: 880 },
    { source: "trial", target: "churn", value: 1720 },
  ],
};

const config = {  } satisfies ChartConfig;

export function MyChart() {
  return (
    <SankeyChart
      data={data}
      config={config}
      eyebrow="Funnel · September"
      title="Where visitors go"
    />
  );
}