Variable: sankeyAttributes
ts
const sankeyAttributes: ObjectNode<{
arrangement: Attr<"fixed" | "snap" | "perpendicular" | "freeform", {
description: "Node dragging. `'snap'`: a node moves freely while dragged, the other nodes of its column make room, and it snaps back to its column when released. `'perpendicular'`: across the flow only. `'freeform'`: anywhere. `'fixed'`: nodes do not move. A drop restyles `node.x` / `node.y` of every node. Default: `'freeform'` when `node.x` and `node.y` are given, else `'snap'`.";
dflt: "snap";
editType: "calc";
values: readonly ["snap", "perpendicular", "freeform", "fixed"];
}>;
hoverinfo: Attr<"none" | "all" | "skip", {
description: "Hover of nodes and links: labels (`'all'`), highlighting without labels (`'none'`) or no hover at all (`'skip'`). The default of `node.hoverinfo` and `link.hoverinfo`.";
dflt: "all";
editType: "none";
extras: readonly ["all", "none", "skip"];
flags: readonly [];
}>;
link: ObjectNode<{
arrowlen: Attr<number, {
description: "Length of the arrowhead at the target end of every link, in CSS px (at most half the gap between the nodes); 0 draws no arrowheads.";
dflt: 0;
editType: "calc";
min: 0;
}>;
color: Attr<string | readonly string[], {
arrayOk: true;
description: "Link color, or one per link. Default: translucent black on light paper, translucent white on dark paper.";
editType: "style";
}>;
colorscales: ItemsNode<object & TemplatedItemChildren>;
customdata: AttrSpec<DataArray, DataArray | undefined>;
flow: ObjectNode<{
color: Attr<string | readonly string[], {
arrayOk: true;
description: "Particle color, or one per link. Default: the link color, opaque.";
editType: "style";
}>;
density: Attr<
| number
| TypedArray
| readonly number[], {
arrayOk: true;
description: "Particles per 100 px of link length for every 10 px of link width (thinner links get one lane), or one density per link; 0 draws none.";
dflt: 2;
editType: "style";
min: 0;
}>;
opacity: Attr<number, {
description: "Particle opacity.";
dflt: 1;
editType: "style";
max: 1;
min: 0;
}>;
size: Attr<
| number
| TypedArray
| readonly number[], {
arrayOk: true;
description: "Particle diameter in CSS px, or one per link.";
dflt: 3;
editType: "style";
min: 0;
}>;
speed: Attr<
| number
| TypedArray
| readonly number[], {
arrayOk: true;
description: "Particle speed along the link in CSS px per second, or one per link; 0 holds the particles still.";
dflt: 50;
editType: "style";
min: 0;
}>;
time: Attr<number, {
description: "Freeze the particles where they are this many seconds into the animation: a still frame, e.g. for image export and visual tests. Default: the particles move.";
editType: "style";
}>;
}>;
hovercolor: Attr<string | readonly string[], {
arrayOk: true;
description: "Link color while it (or a node it connects) is hovered, or one per link. Default: the link color 0.2 more opaque (brightened on dark paper, darkened on light paper when already that opaque).";
editType: "style";
}>;
hoverinfo: Attr<"none" | "all" | "skip", {
description: `Hover of ${string}: labels (`'all'`), highlighting without labels (`'none'`) or no hover and no events (`'skip'`). Default: the trace `hoverinfo`.`;
dflt: "all";
editType: "none";
values: readonly ["all", "none", "skip"];
}>;
hovertemplate: Attr<string, {
description: "Template of the link hover labels: `%{label}`, `%{value}` (formatted with `valueformat` and `valuesuffix`), `%{source.label}`, `%{target.label}`, `%{flow.labelConcentration}`, `%{customdata}`, … `<extra>…</extra>` replaces the value box.";
editType: "none";
}>;
label: AttrSpec<DataArray, DataArray | undefined>;
line: ObjectNode<{
color: Attr<string | readonly string[], {
arrayOk: true;
description: `Outline color of the ${string}, or one per ${string}.`;
dflt: string;
editType: "style";
}>;
width: Attr<
| number
| TypedArray
| readonly number[], {
arrayOk: true;
description: `Outline width of the ${string} in CSS px, or one per ${string}.`;
dflt: number;
editType: "style";
min: 0;
}>;
}>;
source: AttrSpec<DataArray, DataArray | undefined>;
target: AttrSpec<DataArray, DataArray | undefined>;
value: AttrSpec<DataArray, DataArray | undefined>;
}>;
node: ObjectNode<{
align: Attr<"left" | "center" | "right" | "justify", {
description: "Column of nodes: by depth from the sources, sinks in the last column (`'justify'`); by depth (`'left'`); by height from the sinks (`'right'`); or by depth with sources next to their first target (`'center'`).";
dflt: "justify";
editType: "calc";
values: readonly ["justify", "left", "right", "center"];
}>;
color: Attr<string | readonly string[], {
arrayOk: true;
description: "Node color, or one per node index. Default: the colorway, one color per node at 0.8 opacity.";
editType: "style";
}>;
customdata: AttrSpec<DataArray, DataArray | undefined>;
groups: AttrSpec<number[][], number[][]>;
hoverinfo: Attr<"none" | "all" | "skip", {
description: `Hover of ${string}: labels (`'all'`), highlighting without labels (`'none'`) or no hover and no events (`'skip'`). Default: the trace `hoverinfo`.`;
dflt: "all";
editType: "none";
values: readonly ["all", "none", "skip"];
}>;
hovertemplate: Attr<string, {
description: "Template of the node hover labels: `%{label}`, `%{value}` (formatted with `valueformat` and `valuesuffix`), `%{customdata}`, `%{color}`, `%{targetLinks.length}` (incoming links), `%{sourceLinks.length}`, … `<extra>…</extra>` replaces the value box.";
editType: "none";
}>;
label: AttrSpec<DataArray, DataArray | undefined>;
line: ObjectNode<{
color: Attr<string | readonly string[], {
arrayOk: true;
description: `Outline color of the ${string}, or one per ${string}.`;
dflt: string;
editType: "style";
}>;
width: Attr<
| number
| TypedArray
| readonly number[], {
arrayOk: true;
description: `Outline width of the ${string} in CSS px, or one per ${string}.`;
dflt: number;
editType: "style";
min: 0;
}>;
}>;
pad: Attr<number, {
description: "Space between the nodes of a column in CSS px (reduced when the column would not fit).";
dflt: 20;
editType: "calc";
min: 0;
}>;
thickness: Attr<number, {
description: "Node thickness along the flow direction, in CSS px.";
dflt: 20;
editType: "calc";
min: 1;
}>;
x: AttrSpec<DataArray, DataArray | undefined>;
y: AttrSpec<DataArray, DataArray | undefined>;
}>;
orientation: Attr<"h" | "v", {
description: "Flow direction: left to right (`'h'`) or top to bottom (`'v'`, the whole diagram transposed).";
dflt: "h";
editType: "calc";
values: readonly ["v", "h"];
}>;
textfont: ObjectNode<{
color: Attr<string, {
description: "Text color. Default: `layout.font.color`.";
editType: "plot";
}>;
family: Attr<string, {
description: "CSS font-family list. Default: `layout.font.family`.";
editType: "plot";
noBlank: true;
strict: true;
}>;
shadow: Attr<string, {
description: "CSS `text-shadow` (first shadow only), `'none'`, or `'auto'` (the default): a thin halo in the text's contrast color, so labels read over the links.";
editType: "plot";
}>;
size: Attr<number, {
description: "Font size in CSS px.";
editType: "plot";
min: 1;
}>;
style: Attr<"normal" | "italic", {
description: "Font style.";
editType: "plot";
values: readonly ["normal", "italic"];
}>;
weight: Attr<number | "normal" | "bold", {
description: "Font weight: a CSS numeric weight (1–1000), `normal` or `bold`.";
editType: "plot";
extras: readonly ["normal", "bold"];
max: 1000;
min: 1;
}>;
}>;
valueformat: Attr<string, {
description: "d3-format of the node and link values in hover labels (`%{value}`).";
dflt: ".3s";
editType: "none";
}>;
valuesuffix: Attr<string, {
description: "Text after the values in hover labels (a unit such as `TWh`).";
dflt: "";
editType: "none";
}>;
}>;Experimental
The sankey schema.