Skip to content
@jcsoftdev/ui

AlluvialChart

Open .md
Live preview

Loading example…

Alluvial diagram: how the same categories flow from one moment to the next (client segments month by month, services chosen by season). Each stage is a column; every category keeps its color and its place from top to bottom, so the eye follows who moved where. Built on SankeyChart.

Import

Section titled “Import”
import { AlluvialChart } from "@jcsoftdev/ui/charts";

Single-component entry points tree-shake to just this component: @jcsoftdev/ui/charts/sankey-chart.

Usage

Section titled “Usage”
<AlluvialChart
  title="Origen de clientes, servicio y medio de pago"
  nodes={nodes}
  links={links}
  columns={["Origen", "Servicio", "Pago"]}
  valueFormat="integer"
  height={400}
  nodePadding={14}
  align="justify"
  iterations={6}
  linkColor="gradient"
  linkOpacity={0.38}
  labelPosition="outside"
  showValues
  tooltip
  animate
  loading={false}
  labels={spanishLabels}
/>

Props

Section titled “Props”
Prop Type Default Description
stages * readonly string[] Moments in time, left to right: “Jun”, “Jul”, …
categories * readonly { id: string; name: string; color?: string; }[] The categories that flow; their order is the order top to bottom in every stage.
flows * readonly (readonly { from: string; to: string; value: number; }[])[] flows[s] moves people from stage s to stage s + 1: { from: categoryId, to: categoryId, value }.
title * string Accessible name of the drawing and caption of the data table.
animate boolean
className string
tooltip boolean
height number | "fill"
aspectRatio number Width / height ratio of the drawing; ignored with "fill".
valueFormat ValueFormat
loading boolean
labels Partial<SankeyLabels>
pathTracing boolean Hover or click traces a whole path: a link lights everything upstream of its source and downstream of its target; a click pins it.
particles boolean Dots travel along the bands (off under prefers-reduced-motion).
exportable boolean Show SVG and PNG export buttons above the drawing.
nodeWidth number Thickness of the node bars (wider by default with inside labels).
nodePadding number Vertical gap between nodes of a column.
iterations number Relaxation sweeps of the layout; more untangles more, at a cost.
linkColor "source" | "target" | "neutral" | "gradient" gradient blends source into target; source/target use one end; neutral is grey.
linkOpacity number Resting opacity of the links (0-1).
labelPosition "outside" | "inside" Node labels beside the bars (outside) or on wide bars (inside).
showValues boolean Value after each node label.
onNodeClick ((node: SankeyNode) => void)
onLinkClick ((link: SankeyLink) => void)
onRemovedLinks ((removed: SankeyGraph["removed"]) => void) Links the layout left out (cycles, self links, unknown ids, invalid values).

* marks a required prop.

Storybook stories

Section titled “Storybook stories”

Source

Section titled “Source”

packages/ui/src/charts/sankey-chart/alluvial-chart.tsx