Variable: chordAttributes
ts
const chordAttributes: ObjectNode<{
directed: Attr<boolean, {
description: "Whether a link has a direction. Every link takes its value of its source arc and of its target arc, so an arc is as wide as the outgoing plus the incoming flow of its node, directed or not. Directed links can end in an arrowhead (`link.arrowlen`) or short of the ring (`link.targetgap`), and hover labels tell outgoing from incoming flow; undirected links are one symmetric band. See `matrix` for how a matrix is read.";
dflt: true;
editType: "calc";
}>;
direction: Attr<"clockwise" | "counterclockwise", {
description: "Direction in which the arcs follow each other.";
dflt: "clockwise";
editType: "calc";
values: readonly ["clockwise", "counterclockwise"];
}>;
groups: ObjectNode<{
color: Attr<string | readonly string[], {
arrayOk: true;
description: "Color of the group arcs, or one per group in order of first appearance in `node.group`. Default: the colorway, one color per group.";
editType: "style";
}>;
gap: Attr<number, {
description: "Space between the node labels (the node ring, without labels) and the ring of group arcs, in CSS px.";
dflt: 4;
editType: "plot";
min: 0;
}>;
padangle: Attr<number, {
description: "Gap between the last arc of a group and the first arc of the next, in degrees. Default: twice `padangle`.";
editType: "calc";
min: 0;
}>;
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'` (the default), or `'auto'`: a thin halo in the text's contrast color.";
dflt: "none";
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;
}>;
}>;
thickness: Attr<number, {
description: "Thickness of the ring of group arcs, in CSS px.";
dflt: 8;
editType: "plot";
min: 1;
}>;
visible: Attr<boolean, {
description: "Whether the outer ring of group arcs is drawn.";
dflt: true;
editType: "plot";
}>;
}>;
hoverinfo: Attr<"all" | "none" | "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 [];
}>;
labels: AttrSpec<DataArray, DataArray | undefined>;
link: ObjectNode<{
arrowlen: Attr<number, {
description: "With `directed`: length of the arrowhead the target end of every ribbon is drawn as, in CSS px; 0 draws the ends flat.";
dflt: 0;
editType: "plot";
min: 0;
}>;
color: Attr<string | readonly string[], {
arrayOk: true;
description: "Ribbon color, or one per link. Default: the color of a node of the link (`link.colorsource`).";
editType: "style";
}>;
colorsource: Attr<"source" | "target" | "gradient", {
description: "Which node a ribbon without a `link.color` takes its color from: its `'source'`, its `'target'`, or both (`'gradient'`: from the source's color at one end to the target's at the other, in steps along the ribbon).";
dflt: "source";
editType: "style";
values: readonly ["source", "target", "gradient"];
}>;
customdata: AttrSpec<DataArray, DataArray | undefined>;
gap: Attr<number, {
description: "Space between the ring and the ends of the ribbons, in CSS px.";
dflt: 2;
editType: "plot";
min: 0;
}>;
hovercolor: Attr<string | readonly string[], {
arrayOk: true;
description: "Ribbon color while it (or a node it connects) is hovered, or one per link. Default: the ribbon color, a quarter more opaque. The other ribbons are dimmed meanwhile.";
editType: "style";
}>;
hoverinfo: Attr<"all" | "none" | "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`), `%{reverse}` (the flow back, for a pair of matrix cells drawn as one ribbon), `%{percent}` (share of the total flow), `%{source.label}`, `%{target.label}`, `%{color}`, `%{customdata}`. `<extra>…</extra>` replaces the value box.";
editType: "none";
}>;
label: AttrSpec<DataArray, DataArray | undefined>;
opacity: Attr<number, {
description: "Opacity of the ribbons (multiplies their color's own).";
dflt: 0.6;
editType: "style";
max: 1;
min: 0;
}>;
sort: Attr<"input" | "value" | "position", {
description: "Order of the ribbon ends within an arc. `'position'`: by where the other end of each ribbon is on the ring, which crosses the ribbons as little as possible. `'value'`: widest first. `'input'`: by link index.";
dflt: "position";
editType: "calc";
values: readonly ["position", "value", "input"];
}>;
source: AttrSpec<DataArray, DataArray | undefined>;
target: AttrSpec<DataArray, DataArray | undefined>;
targetgap: Attr<number, {
description: "With `directed`: space between the ring and the target end of the ribbons, in CSS px. A larger gap than `link.gap` shows the direction: ribbons touch their source and stop short of their target. Default: `link.gap`.";
editType: "plot";
min: 0;
}>;
value: AttrSpec<DataArray, DataArray | undefined>;
}>;
matrix: AttrSpec<DataArray, DataArray | undefined>;
node: ObjectNode<{
color: Attr<string | readonly string[], {
arrayOk: true;
description: "Node color, or one per node index. Default: the colorway, one color per node, or one per group when `node.group` is given.";
editType: "style";
}>;
customdata: AttrSpec<DataArray, DataArray | undefined>;
group: AttrSpec<DataArray, DataArray | undefined>;
hoverinfo: Attr<"all" | "none" | "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}` (the width of the arc: outgoing plus incoming flow, formatted with `valueformat` and `valuesuffix`), `%{out}`, `%{in}`, `%{percent}` (share of the ring), `%{group}`, `%{color}`, `%{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 node arcs, or one per node. Default: the paper color.";
editType: "style";
}>;
width: Attr<
| number
| TypedArray
| readonly number[], {
arrayOk: true;
description: "Outline width of the node arcs in CSS px, or one per node.";
dflt: 0;
editType: "style";
min: 0;
}>;
}>;
thickness: Attr<number, {
description: "Thickness of the ring of node arcs, in CSS px.";
dflt: 12;
editType: "plot";
min: 1;
}>;
}>;
padangle: Attr<number, {
description: "Gap between neighbouring arcs, in degrees. The gaps take at most half the ring: more is scaled down.";
dflt: 2;
editType: "calc";
min: 0;
}>;
rotation: Attr<number, {
description: "Where the first arc starts, in degrees clockwise from 12 o'clock.";
dflt: 0;
editType: "calc";
}>;
sort: Attr<"input" | "value" | "group", {
description: "Order of the arcs around the ring. `'input'`: by node index. `'value'`: widest first. `'group'`: groups by name (numbers by value), nodes by index. With `node.group` the nodes of a group are always next to each other: `'input'` then orders the groups by their first node and `'value'` by their width.";
dflt: "input";
editType: "calc";
values: readonly ["input", "value", "group"];
}>;
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'` (the default), or `'auto'`: a thin halo in the text's contrast color.";
dflt: "none";
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;
}>;
}>;
textorientation: Attr<"none" | "auto" | "radial" | "tangential", {
description: "Node labels, outside the ring. `'radial'`: along the radius, reading away from the center on the right half and towards it on the left, so no label is upside down. `'tangential'`: across the radius, flipped on the lower half. `'auto'`: tangential when every label fits along its arc, else radial. `'none'`: no labels (they still show in hover labels). A label that does not fit its arc is not drawn; a radial label too long for the room around the ring is cut with an ellipsis.";
dflt: "auto";
editType: "plot";
values: readonly ["auto", "radial", "tangential", "none"];
}>;
valueformat: Attr<string, {
description: "d3-format of the node and link values in hover labels (`%{value}`).";
dflt: ",.4~g";
editType: "none";
}>;
valuesuffix: Attr<string, {
description: "Text after the values in hover labels (a unit such as `GWh`).";
dflt: "";
editType: "none";
}>;
}>;Experimental
The chord schema.