Sankey Diagram
One month of website visits: where visitors came from, which page they landed on and what they did next.
Pick a preset to reconfigure every chart
Not available
No sankey mark. The link and arrow marks only connect points you position yourself, and the tree mark lays out hierarchies.
SourceNot available
No sankey layout. Vega-Lite's transforms stop at stack, window and pivot, so the node positions and link ribbons would have to be computed by hand.
SourceWhat to look for
- Labels. Unovis labels every node on its inner side (
labelPosition), adds its value underneath (subLabel) and trims or wraps labels that don't fit. Recharts draws no labels at all; the code adds them with a custom node, the way its docs do. - Hover. Unovis shows the value of the flow under the pointer and, after a short delay, highlights every path
through the node it leads to (
highlightSubtreeOnHover). ECharts highlights the nodes and flows next to the one you hover. - Randomize the data. Unovis moves nodes and flows to their new sizes in one transition.
- TanStack Charts. Lays out the diagram (
sankeyDiagram), but you draw the nodes, links and labels with ordinary marks, and links are straight unless you pass a d3-shape curve throughd3Curve(). - Colors. Unovis draws nodes in one color and keeps the flows neutral, so the structure reads first;
nodeColorandlinkColorcolor them when you need to. ECharts and Nivo color every node, and the Chart.js sankey plugin colors flows red to green unless you set colors yourself. - Presets. Colored flows paints the nodes with the palette and each flow with its source node's color
(
nodeColor,linkColor). ECharts, Chart.js and TanStack Charts have options for it and Nivo does it by default; Recharts'linkobject styles every link alike, so coloring each flow takes a customlinkfunction that draws the path itself. Sorted nodes orders each column biggest first (nodeSort), which only Nivo and TanStack Charts also have an option for; Recharts (sort={false}), ECharts (layoutIterations: 0) and Chart.js (priority) keep an order you give them, so there you sum each node's flows and sort the nodes yourself. Thin nodes (nodeWidth,nodePadding) works everywhere.
Feature comparison
| Feature | Unovis1.8.0 | Recharts3.10.1 | Chart.js4.5.1 | ECharts6.1.0 | Nivo0.99.0 | AG Charts14.2.0 | Observable Plot0.6.17 | Vega-Lite6.5.0 | TanStack Charts1.1.0 |
|---|---|---|---|---|---|---|---|---|---|
| Sankey | |||||||||
| Chord diagram | |||||||||
| Data labels | |||||||||
| Label overlap avoidance | |||||||||
| Animated data updates | |||||||||
| Dark mode | |||||||||
| Rendering | SVG | SVGSource | CanvasSource | Canvas or SVGSource | SVG, Canvas or HTMLSource | CanvasSource | SVGSource | Canvas or SVGSource | SVG or CanvasSource |
Every cell links to its source. See how we compare for the rules we followed.