chord attributes

Chord diagram: nodes as arcs of a ring sized by their flow and links as ribbons between them, from node / link or a square matrix; directed ribbons with arrowheads, groups with an outer ring, hover highlighting.

• Categories: domain, noOpacity, showLegend, pie-like
• Plotly equivalent: chord
• Guide: chord chart page
• Used in examples: chord/basic, chord/dark, chord/directed, chord/groups, chord/large, chord/light, chord/links, chord/side-by-side, demos/repo-graphs/imports-chord

Generated from the attribute schema (99 entries). Machine-readable: plot-schema.json.

Attribute tree

• type
• visible
• name
• uid
• showlegend
• legend
• legendgroup
• hovertext
• hoverinfo
• hovertemplate
• hoverlabel

  • bgcolor
  • bordercolor
  • font

    • family
    • size
    • color
  • align
  • namelength
• selectedpoints
• legendrank
• legendwidth
• legendgrouptitle

  • text
  • font

    • family
    • size
    • color
    • weight
    • style
• opacity
• meta
• customdata
• ids
• dataset
• uirevision
• styleRules
• domain

  • x
  • y
  • row
  • column
• matrix
• labels
• directed
• sort
• rotation
• direction
• padangle
• textorientation
• textfont

  • family
  • size
  • color
  • weight
  • style
  • shadow
• valueformat
• valuesuffix
• node

  • label
  • group
  • color
  • customdata
  • thickness
  • line

    • color
    • width
  • hoverinfo
  • hovertemplate
• link

  • source
  • target
  • value
  • label
  • customdata
  • sort
  • color
  • colorsource
  • opacity
  • hovercolor
  • gap
  • targetgap
  • arrowlen
  • hoverinfo
  • hovertemplate
• groups

  • visible
  • color
  • thickness
  • gap
  • padangle
  • textfont

    • family
    • size
    • color
    • weight
    • style
    • shadow

type string

Trace type, e.g. 'scatter'. Defaults to 'scatter'.

• Type: string (non-empty)
• Default: none
• Array OK: no
• Edit type: calc
• Animatable: no

visible enumerated

Whether the trace is drawn. legendonly hides it but keeps its (toggleable) legend entry.

• Type: enumerated
• Values: true | false | "legendonly"
• Default: true
• Array OK: no
• Edit type: calc
• Animatable: no

name string

Trace name shown in the legend and hover labels. Defaults to trace N.

• Type: string
• Default: none
• Array OK: no
• Edit type: legend+plot
• Animatable: no

uid string

Stable identity used to match traces across updates, so reordered traces are moved instead of rebuilt.

• Type: string
• Default: none
• Array OK: no
• Edit type: plot
• Animatable: no

showlegend boolean

Whether this trace has a legend entry.

• Type: boolean
• Default: true
• Array OK: no
• Edit type: legend+layout
• Animatable: no

legend subplotid

The legend this trace's item is shown in: 'legend' (layout.legend), 'legend2' (layout.legend2), ….

• Type: subplotid (legend, legend2, legend3, …)
• Default: "legend"
• Array OK: no
• Edit type: legend+layout
• Animatable: no

legendgroup string

Traces in the same legend group toggle together.

• Type: string
• Default: ""
• Array OK: no
• Edit type: legend
• Animatable: no

hovertext string

Hover text per point; defaults to text.

• Type: string
• Default: ""
• Array OK: yes (one value per point)
• Edit type: style
• Animatable: no

hoverinfo flaglist

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.

• Type: flaglist
• Flags: (combine with +)
• Also accepts: "all" | "none" | "skip"
• Default: "all"
• Array OK: no
• Edit type: none
• Animatable: no

hovertemplate string

Template for hover labels, e.g. '%{x}: %{y:.2f}<extra></extra>' (d3-format / d3-time-format after : / |). Overrides hoverinfo.

• Type: string
• Default: none
• Array OK: yes (one value per point)
• Edit type: none
• Animatable: no

hoverlabel

Hover label style for this trace. Unset fields fall back to layout.hoverlabel (so there are no trace-level defaults).

• Type: object
• Edit type: none

hoverlabel.bgcolor color

Label background. Default: the point color.

• Type: color
• Default: none
• Array OK: yes (one value per point)
• Edit type: none
• Animatable: no

hoverlabel.bordercolor color

Label border. Default: contrasting with the background.

• Type: color
• Default: none
• Array OK: yes (one value per point)
• Edit type: none
• Animatable: no

hoverlabel.font

Label font.

• Type: object
• Edit type: none

hoverlabel.font.family string

Font family.

• Type: string
• Default: none
• Array OK: yes (one value per point)
• Edit type: none
• Animatable: no

hoverlabel.font.size number

Font size in px.

• Type: number ≥ 1
• Default: none
• Array OK: yes (one value per point)
• Edit type: none
• Animatable: no

hoverlabel.font.color color

Font color.

• Type: color
• Default: none
• Array OK: yes (one value per point)
• Edit type: none
• Animatable: no

hoverlabel.align enumerated

Text alignment inside labels.

• Type: enumerated
• Values: "left" | "right" | "auto"
• Default: none
• Array OK: yes (one value per point)
• Edit type: none
• Animatable: no

hoverlabel.namelength integer

Characters of the trace name shown (-1: all, 0: none).

• Type: integer ≥ -1
• Default: none
• Array OK: yes (one value per point)
• Edit type: none
• Animatable: no

selectedpoints any

Indices of the selected points (set by box/lasso selection, or programmatically). null clears the selection.

• Type: any
• Default: none
• Array OK: no
• Edit type: style
• Animatable: no

legendrank number

Sort key for legend entries: lower ranks come first (top, or left). Ties keep trace order; traces default to 1000.

• Type: number
• Default: 1000
• Array OK: no
• Edit type: legend
• Animatable: no

legendwidth number

Width of this trace's item in horizontal legends, overriding legend.entrywidth (same units). Default: its text's.

• Type: number ≥ 0
• Default: none
• Array OK: no
• Edit type: legend
• Animatable: no

legendgrouptitle

Title of the legend group this trace belongs to.

• Type: object
• Edit type: legend

legendgrouptitle.text string

Title heading this trace's legend group.

• Type: string
• Default: ""
• Array OK: no
• Edit type: legend
• Animatable: no

legendgrouptitle.font

Group title font. Unset fields come from legend.grouptitlefont.

• Type: object
• Edit type: legend

legendgrouptitle.font.family string

Font family.

• Type: string
• Default: none
• Array OK: no
• Edit type: legend
• Animatable: no

legendgrouptitle.font.size number

Font size in px.

• Type: number ≥ 1
• Default: none
• Array OK: no
• Edit type: legend
• Animatable: no

legendgrouptitle.font.color color

Font color.

• Type: color
• Default: none
• Array OK: no
• Edit type: legend
• Animatable: no

legendgrouptitle.font.weight integer

Font weight: a CSS numeric weight (1–1000), normal or bold.

• Type: integer from 1 to 1000, or "normal" | "bold"
• Default: none
• Array OK: no
• Edit type: legend
• Animatable: no

legendgrouptitle.font.style enumerated

Font style.

• Type: enumerated
• Values: "normal" | "italic"
• Default: none
• Array OK: no
• Edit type: legend
• Animatable: no

opacity number

Opacity of the whole trace.

• Type: number from 0 to 1
• Default: 1
• Array OK: no
• Edit type: style
• Animatable: yes

meta any

Arbitrary user data, available in text templates as %{meta}.

• Type: any
• Default: none
• Array OK: yes (one value per point)
• Edit type: plot
• Animatable: no

customdata data_array

Per-point user data, returned in events and available in hover templates.

• Type: data_array (array or typed array)
• Default: none
• Array OK: no
• Edit type: calc
• Animatable: no

ids data_array

Per-point ids used to match points across animation frames.

• Type: data_array (array or typed array)
• Default: none
• Array OK: no
• Edit type: calc
• Animatable: no

dataset string

Name of a figure-level dataset (figure.datasets). Data arrays, and per-point attributes whose values cannot start with @ (such as colors and sizes), may then reference its columns as '@column'; on string attributes such as text, '@…' stays literal text.

• Type: string (non-empty)
• Default: none
• Array OK: no
• Edit type: calc
• Animatable: no

uirevision any

While unchanged, user interaction state for this trace (legend visibility, selections) is kept across updates.

• Type: any
• Default: none
• Array OK: no
• Edit type: none
• Animatable: no

styleRules any

Conditional per-point styling as JSON (plan E8.5): [{ when: { y: { gt: 10 } }, set: { 'marker.color': 'gold' } }]. when tests fields of the point ('y', 'customdata[1]', 'pointNumber', …) with eq, ne, gt, gte, lt, lte, in, nin, between, regex, and, or and not; set gives per-point (arrayOk) attributes a value on the matching points. Later rules win; other points keep the trace's own value.

• Type: any
• Default: none
• Array OK: no
• Edit type: calc
• Animatable: no

domain

Where this trace is drawn, as a part of the plot area.

• Type: object
• Edit type: plot

domain.x info_array

Horizontal extent [start, end] of this trace as fractions of the plot area. Defaults to the layout.grid column when column is set, else [0, 1].

• Type: info_array [number, number]
• Default: [0, 1]
• Array OK: no
• Edit type: plot
• Animatable: no

domain.y info_array

Vertical extent [start, end] of this trace as fractions of the plot area (from the bottom). Defaults to the layout.grid row when row is set, else [0, 1].

• Type: info_array [number, number]
• Default: [0, 1]
• Array OK: no
• Edit type: plot
• Animatable: no

domain.row integer

Row of the layout.grid cell this trace is placed in (0 = first row in roworder). Only used with a grid.

• Type: integer ≥ 0
• Default: 0
• Array OK: no
• Edit type: plot
• Animatable: no

domain.column integer

Column of the layout.grid cell this trace is placed in (0 = leftmost). Only used with a grid.

• Type: integer ≥ 0
• Default: 0
• Array OK: no
• Edit type: plot
• Animatable: no

matrix data_array

The flows as a square matrix, instead of link: matrix[i][j] is the flow from node i to node j. Directed (the default), every positive cell is a ribbon. With directed: false every pair of nodes has one ribbon, matrix[i][j] wide at i and matrix[j][i] wide at j (a symmetric matrix gives ribbons as wide at both ends). Missing cells are 0; negative and non-numeric cells are left out and counted in the description. Ignored when link.source and link.target are given.

• Type: data_array (array or typed array)
• Default: none
• Array OK: no
• Edit type: calc
• Animatable: no

labels data_array

Node labels, one per row of matrix. The default of node.label, which wins when both are given.

• Type: data_array (array or typed array)
• Default: none
• Array OK: no
• Edit type: calc
• Animatable: no

directed boolean

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.

• Type: boolean
• Default: true
• Array OK: no
• Edit type: calc
• Animatable: no

sort enumerated

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.

• Type: enumerated
• Values: "input" | "value" | "group"
• Default: "input"
• Array OK: no
• Edit type: calc
• Animatable: no

rotation angle

Where the first arc starts, in degrees clockwise from 12 o'clock.

• Type: angle (degrees)
• Default: 0
• Array OK: no
• Edit type: calc
• Animatable: no

direction enumerated

Direction in which the arcs follow each other.

• Type: enumerated
• Values: "clockwise" | "counterclockwise"
• Default: "clockwise"
• Array OK: no
• Edit type: calc
• Animatable: no

padangle number

Gap between neighbouring arcs, in degrees. The gaps take at most half the ring: more is scaled down.

• Type: number ≥ 0
• Default: 2
• Array OK: no
• Edit type: calc
• Animatable: no

textorientation enumerated

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.

• Type: enumerated
• Values: "auto" | "radial" | "tangential" | "none"
• Default: "auto"
• Array OK: no
• Edit type: plot
• Animatable: no

textfont

Font of the node labels. Default: layout.font.

• Type: object
• Edit type: plot

textfont.family string

CSS font-family list. Default: layout.font.family.

• Type: string (non-empty)
• Default: none
• Array OK: no
• Edit type: plot
• Animatable: no

textfont.size number

Font size in CSS px.

• Type: number ≥ 1
• Default: none
• Array OK: no
• Edit type: plot
• Animatable: no

textfont.color color

Text color. Default: layout.font.color.

• Type: color
• Default: none
• Array OK: no
• Edit type: plot
• Animatable: no

textfont.weight integer

Font weight: a CSS numeric weight (1–1000), normal or bold.

• Type: integer from 1 to 1000, or "normal" | "bold"
• Default: none
• Array OK: no
• Edit type: plot
• Animatable: no

textfont.style enumerated

Font style.

• Type: enumerated
• Values: "normal" | "italic"
• Default: none
• Array OK: no
• Edit type: plot
• Animatable: no

textfont.shadow string

CSS text-shadow (first shadow only), 'none' (the default), or 'auto': a thin halo in the text's contrast color.

• Type: string
• Default: "none"
• Array OK: no
• Edit type: plot
• Animatable: no

valueformat string

d3-format of the node and link values in hover labels (%{value}).

• Type: string
• Default: ", .4~g"
• Array OK: no
• Edit type: none
• Animatable: no

valuesuffix string

Text after the values in hover labels (a unit such as GWh).

• Type: string
• Default: ""
• Array OK: no
• Edit type: none
• Animatable: no

node

The nodes: arcs of the ring.

• Type: object
• Edit type: calc

node.label data_array

Node labels, one per node index (Plotly pseudo-HTML allowed): drawn around the ring and shown in hover labels and in the legend.

• Type: data_array (array or typed array)
• Default: none
• Array OK: no
• Edit type: calc
• Animatable: no

node.group data_array

A group per node (a name or a number; empty for none). The nodes of a group are next to each other on the ring and take the color of the group, an outer ring draws one labeled arc per group (see groups), and the legend lists the groups instead of the nodes.

• Type: data_array (array or typed array)
• Default: none
• Array OK: no
• Edit type: calc
• Animatable: no

node.color color

Node color, or one per node index. Default: the colorway, one color per node, or one per group when node.group is given.

• Type: color
• Default: none
• Array OK: yes (one value per point)
• Edit type: style
• Animatable: no

node.customdata data_array

Extra data per node for %{customdata} and events.

• Type: data_array (array or typed array)
• Default: none
• Array OK: no
• Edit type: calc
• Animatable: no

node.thickness number

Thickness of the ring of node arcs, in CSS px.

• Type: number ≥ 1
• Default: 12
• Array OK: no
• Edit type: plot
• Animatable: no

node.line

Outlines of the node arcs.

• Type: object
• Edit type: style

node.line.color color

Outline color of the node arcs, or one per node. Default: the paper color.

• Type: color
• Default: none
• Array OK: yes (one value per point)
• Edit type: style
• Animatable: no

node.line.width number

Outline width of the node arcs in CSS px, or one per node.

• Type: number ≥ 0
• Default: 0
• Array OK: yes (one value per point)
• Edit type: style
• Animatable: no

node.hoverinfo enumerated

Hover of the node arcs: labels ('all'), highlighting without labels ('none') or no hover and no events ('skip'). Default: the trace hoverinfo.

• Type: enumerated
• Values: "all" | "none" | "skip"
• Default: "all"
• Array OK: no
• Edit type: none
• Animatable: no

node.hovertemplate string

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.

• Type: string
• Default: none
• Array OK: no
• Edit type: none
• Animatable: no

link

The links: ribbons between the arcs.

• Type: object
• Edit type: calc

link.source data_array

Source node index of every link.

• Type: data_array (array or typed array)
• Default: none
• Array OK: no
• Edit type: calc
• Animatable: no

link.target data_array

Target node index of every link. A link from a node to itself is drawn as a hill on its arc and takes its value of the arc once. A link whose source or target is not a node index is left out and counted in the description.

• Type: data_array (array or typed array)
• Default: none
• Array OK: no
• Edit type: calc
• Animatable: no

link.value data_array

Flow of every link, which sets the width of its ribbon at both ends. Default: 1 for every link. When given, links without a positive value are left out and counted in the description.

• Type: data_array (array or typed array)
• Default: none
• Array OK: no
• Edit type: calc
• Animatable: no

link.label data_array

Link labels, shown in hover labels.

• Type: data_array (array or typed array)
• Default: none
• Array OK: no
• Edit type: calc
• Animatable: no

link.customdata data_array

Extra data per link for %{customdata} and events.

• Type: data_array (array or typed array)
• Default: none
• Array OK: no
• Edit type: calc
• Animatable: no

link.sort enumerated

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.

• Type: enumerated
• Values: "position" | "value" | "input"
• Default: "position"
• Array OK: no
• Edit type: calc
• Animatable: no

link.color color

Ribbon color, or one per link. Default: the color of a node of the link (link.colorsource).

• Type: color
• Default: none
• Array OK: yes (one value per point)
• Edit type: style
• Animatable: no

link.colorsource enumerated

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).

• Type: enumerated
• Values: "source" | "target" | "gradient"
• Default: "source"
• Array OK: no
• Edit type: style
• Animatable: no

link.opacity number

Opacity of the ribbons (multiplies their color's own).

• Type: number from 0 to 1
• Default: 0.6
• Array OK: no
• Edit type: style
• Animatable: no

link.hovercolor color

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.

• Type: color
• Default: none
• Array OK: yes (one value per point)
• Edit type: style
• Animatable: no

link.gap number

Space between the ring and the ends of the ribbons, in CSS px.

• Type: number ≥ 0
• Default: 2
• Array OK: no
• Edit type: plot
• Animatable: no

link.targetgap number

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.

• Type: number ≥ 0
• Default: none
• Array OK: no
• Edit type: plot
• Animatable: no

link.arrowlen number

With directed: length of the arrowhead the target end of every ribbon is drawn as, in CSS px; 0 draws the ends flat.

• Type: number ≥ 0
• Default: 0
• Array OK: no
• Edit type: plot
• Animatable: no

link.hoverinfo enumerated

Hover of the ribbons: labels ('all'), highlighting without labels ('none') or no hover and no events ('skip'). Default: the trace hoverinfo.

• Type: enumerated
• Values: "all" | "none" | "skip"
• Default: "all"
• Array OK: no
• Edit type: none
• Animatable: no

link.hovertemplate string

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.

• Type: string
• Default: none
• Array OK: no
• Edit type: none
• Animatable: no

groups

The outer ring of node.group: one arc around the nodes of every group, with its name.

• Type: object
• Edit type: calc

groups.visible boolean

Whether the outer ring of group arcs is drawn.

• Type: boolean
• Default: true
• Array OK: no
• Edit type: plot
• Animatable: no

groups.color color

Color of the group arcs, or one per group in order of first appearance in node.group. Default: the colorway, one color per group.

• Type: color
• Default: none
• Array OK: yes (one value per point)
• Edit type: style
• Animatable: no

groups.thickness number

Thickness of the ring of group arcs, in CSS px.

• Type: number ≥ 1
• Default: 8
• Array OK: no
• Edit type: plot
• Animatable: no

groups.gap number

Space between the node labels (the node ring, without labels) and the ring of group arcs, in CSS px.

• Type: number ≥ 0
• Default: 4
• Array OK: no
• Edit type: plot
• Animatable: no

groups.padangle number

Gap between the last arc of a group and the first arc of the next, in degrees. Default: twice padangle.

• Type: number ≥ 0
• Default: none
• Array OK: no
• Edit type: calc
• Animatable: no

groups.textfont

Font of the group labels, drawn across the radius outside the group arcs. Default: textfont, bold.

• Type: object
• Edit type: plot

groups.textfont.family string

CSS font-family list. Default: layout.font.family.

• Type: string (non-empty)
• Default: none
• Array OK: no
• Edit type: plot
• Animatable: no

groups.textfont.size number

Font size in CSS px.

• Type: number ≥ 1
• Default: none
• Array OK: no
• Edit type: plot
• Animatable: no

groups.textfont.color color

Text color. Default: layout.font.color.

• Type: color
• Default: none
• Array OK: no
• Edit type: plot
• Animatable: no

groups.textfont.weight integer

Font weight: a CSS numeric weight (1–1000), normal or bold.

• Type: integer from 1 to 1000, or "normal" | "bold"
• Default: none
• Array OK: no
• Edit type: plot
• Animatable: no

groups.textfont.style enumerated

Font style.

• Type: enumerated
• Values: "normal" | "italic"
• Default: none
• Array OK: no
• Edit type: plot
• Animatable: no

groups.textfont.shadow string

CSS text-shadow (first shadow only), 'none' (the default), or 'auto': a thin halo in the text's contrast color.

• Type: string
• Default: "none"
• Array OK: no
• Edit type: plot
• Animatable: no