graph attributes

Network graph: nodes and the links between them, at given positions or placed by a layout (arrangement: force-directed, layered with box nodes and routed links, tidy and radial trees that fold on a click, a dendrogram, an arc diagram, a hive plot); arrowheads, curved parallel links and loops, labels culled where they collide, colors by group or by value; every part is one GPU draw call regardless of the size of the graph. For large graphs: layouts off the main thread, drawn while they settle (worker), level of detail that follows the zoom (lod) and link bundling (link.bundle).

• Categories: cartesian, symbols, showLegend, pie-like
• Plotly equivalent: graph
• Guide: graph chart page
• Used in examples: demos/repo-graphs/commits, demos/repo-graphs/imports-communities, demos/repo-graphs/imports-force, demos/repo-graphs/packages-dag, demos/repo-graphs/pipeline, graph/arc, graph/basic, graph/boxes, graph/bundle-circular, graph/bundle-force, graph/circular, graph/collapsible-tree, graph/colorscale, graph/custom-layout, graph/dendrogram, graph/dependencies, graph/directed, graph/drag, graph/force-atlas2, graph/force-pinned, graph/force-simulate, graph/force, graph/grid, graph/groups, graph/highlight, graph/hive, graph/large-10k, graph/large, graph/layered-cycle, graph/layered-orthogonal, graph/layered, graph/les-miserables, graph/over-scatter, graph/path, graph/radial-tree, graph/side-by-side, graph/size-by-degree, graph/timeline, graph/tree, graph/weighted-links

Generated from the attribute schema (253 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
• xaxis
• yaxis
• arrangement
• custom

  • name
  • options
• worker
• lod
• force

  • algorithm
  • simulate
  • seed
  • ticks
  • linkdistance
  • linkstrength
  • linkweight
  • charge
  • gravity
  • collide
  • collidepadding
  • groupstrength
  • scalingratio
  • linlog
  • start

    • x
    • y
    • alpha
• layered

  • rankdir
  • ranksep
  • nodesep
  • edgesep
  • ranker
  • routing
  • clusters
  • clusterpadding
  • aspect
• tree

  • orientation
  • links
  • nodesep
  • subtreesep
  • ranksep
  • sector

    • start
    • span
  • sort
  • sortorder
  • collapsed
  • collapsible
• arc

  • orientation
  • order
  • nodesep
  • groupsep
  • sides
  • maxheight
  • loopsize
• hive

  • axes
  • assign
  • startangle
  • innerradius
  • outerradius
  • position
• labels
• parents
• node

  • label
  • x
  • y
  • size
  • sizeby
  • sizerange
  • color
  • colorscale
  • autocolorscale
  • reversescale
  • cauto
  • cmin
  • cmax
  • cmid
  • showscale
  • colorbar

    • orientation
    • thicknessmode
    • thickness
    • lenmode
    • len
    • x
    • xref
    • xanchor
    • xpad
    • y
    • yref
    • yanchor
    • ypad
    • outlinecolor
    • outlinewidth
    • bordercolor
    • borderwidth
    • bgcolor
    • tickmode
    • nticks
    • tick0
    • dtick
    • tickvals
    • ticktext
    • ticks
    • ticklen
    • tickwidth
    • tickcolor
    • ticklabelposition
    • ticklabeloverflow
    • ticklabelstep
    • showticklabels
    • tickfont

      • family
      • size
      • color
      • weight
      • style
      • variant
      • textcase
      • lineposition
      • shadow
    • tickangle
    • tickformat
    • tickprefix
    • showtickprefix
    • ticksuffix
    • showticksuffix
    • separatethousands
    • exponentformat
    • minexponent
    • showexponent
    • title

      • text
      • font

        • family
        • size
        • color
        • weight
        • style
        • variant
        • textcase
        • lineposition
        • shadow
      • side
  • coloraxis
  • symbol
  • group
  • value
  • customdata
  • opacity
  • line

    • color
    • width
  • shape
  • textposition
  • textfont

    • family
    • size
    • color
    • weight
    • style
    • shadow
  • draggable
  • hoverinfo
  • hovertemplate
• link

  • source
  • target
  • value
  • label
  • color
  • width
  • widthby
  • widthrange
  • dash
  • secondary

    • dash
    • opacity
    • color
  • curve
  • arrow

    • end
    • start
    • size
  • opacity
  • bundle

    • method
    • strength
    • compatibility
  • customdata
  • hoverinfo
  • hovertemplate
• highlight

  • mode
  • hops
  • direction
  • dim
  • color
  • nodes
  • path
  • pathweight
  • pathdirected
• selected

  • node

    • opacity
    • color
• unselected

  • node

    • opacity
    • color
• zorder

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'), events 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

xaxis subplotid

The x axis this trace is plotted against: 'x' → layout.xaxis, 'x2' → layout.xaxis2.

• Type: subplotid (x, x2, x3, …)
• Default: "x"
• Array OK: no
• Edit type: calc
• Animatable: no

yaxis subplotid

The y axis this trace is plotted against: 'y' → layout.yaxis, 'y2' → layout.yaxis2.

• Type: subplotid (y, y2, y3, …)
• Default: "y"
• Array OK: no
• Edit type: calc
• Animatable: no

arrangement enumerated

The layout that places the nodes. 'preset': at node.x / node.y, which are data on the trace's axes. 'force': a force-directed layout, linked nodes pulled together and all nodes pushed apart (options: force). 'layered': a layered drawing of a directed graph, every link pointing the same way (pipelines, dependencies, state machines; options: layered). 'tree': a tidy tree; 'radial': the same tree on rings around its root; 'dendrogram': a tree with its leaves on one line and every other node at the height node.value gives it (options of the three: tree). 'circular': evenly on a circle, the nodes of a group next to each other. 'grid': in rows. 'arc': an arc diagram, the nodes on a line and the links as arcs over it (options: arc). 'hive': a hive plot, the nodes on a few axes around a center (options: hive). 'custom': the layout named by custom.name. Every arrangement but 'preset' hides the axes and gives them one scale, with two exceptions: a dendrogram with node.value shows the axis of its heights, and a 'force' graph whose nodes all have an x and no y (or the reverse) keeps them at those values on a visible axis and moves them along the other one only (a timeline). Default: 'preset' when every node has an x and a y, else 'force'.

• Type: enumerated
• Values: "preset" | "force" | "layered" | "tree" | "radial" | "dendrogram" | "circular" | "grid" | "arc" | "hive" | "custom"
• Default: none
• Array OK: no
• Edit type: calc
• Animatable: no

custom

The layout of arrangement: 'custom'.

• Type: object
• Edit type: calc

custom.name string

With arrangement: 'custom': the name of a layout registered with registerGraphLayout(name, layout).

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

custom.options any

Passed to the custom layout as its second argument, as it is.

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

worker enumerated

Where the layout is computed. false: with the rest of the figure, on the main thread; the chart is drawn once, laid out, and the page waits until then (a 'force' layout of 10,000 nodes takes a second or more). true: off the main thread, in the package's layout worker. The chart is drawn at once, a 'force' layout with the nodes moving to their places as the worker reports them, any other with its nodes on a circle until the layout arrives; the axes are fitted to the result when it is there, chart.ready and the promise of the update resolve then, and an image export waits for it. The result is the same picture as with false. 'auto': off the main thread where the wait would be felt: a 'force' layout of at least 1,000 nodes or 5,000 links, a 'layered' one of at least 3,000 nodes or 6,000 links, and force-directed link bundling (link.bundle) of at least 1,000 links. Never in the worker: 'preset', 'circular', 'grid' and 'custom' (a registered layout is a function of the page), a timeline or a dendrogram with a real axis, and force.start at rest. Hover and selection answer for what is on screen while the nodes move; nodes are dragged once the layout is there. Where no worker can be started (no Worker, a Content Security Policy, a bundler that left the file out) the same code runs on the main thread in slices of a few milliseconds, with one warning. Default: config.worker, which is false.

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

lod enumerated

Level of detail: what a large graph leaves out while it is drawn small. 'auto': for a graph of more than 3,000 nodes or 5,000 links; true: for any graph; false: never. With it, node labels are drawn once the nodes are 24 px apart on average, and arrowheads once the links are 24 px long on average (they go again below 18 px, so a zoom at the threshold does not make them flicker); neither is built before. Nodes are drawn smaller where they are closer together than one and a half times their size, down to dots of 1.5 px, and lose their outlines below 4 px. Links fade as they cover more of the plot, so that a dense graph stays a texture instead of a block of one color, and come back to link.opacity on a zoom into it. What a hover or a selection highlights is drawn in full.

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

force

Options of arrangement: 'force'. Lengths are layout units: CSS px at the size the graph is laid out for, before it is fitted to the plot area.

• Type: object
• Edit type: calc

force.algorithm enumerated

The model of the simulation. 'spring': links are springs with a rest length and every two nodes repel (the d3-force model); even link lengths, the usual choice. 'forceatlas2': links pull in proportion to their length and nodes repel in proportion to their degrees (ForceAtlas2); it pulls communities apart better in graphs with hubs.

• Type: enumerated
• Values: "spring" | "forceatlas2"
• Default: "spring"
• Array OK: no
• Edit type: calc
• Animatable: no

force.simulate boolean

Show the layout settling: the nodes start in a spiral and the chart draws the simulation as it cools, a few steps per frame, ending on the same picture as without it. The axes are sized for the settled layout from the start. It runs again when something the layout reads changes (the nodes, the links, their sizes, these options), not on a change of style. Without motion (prefers-reduced-motion, config.a11y.reducedMotion), on a static plot (an image export) and for graphs of more than 2,000 nodes or 10,000 links the settled layout is drawn at once. When the layout runs off the main thread (worker), the positions the worker reports are what is shown, as fast as they come: nothing is replayed afterwards, and simulate then only says whether a dragged node pushes the others aside.

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

force.seed integer

Seed of the generator that separates nodes at the same place. The layout is deterministic: the same figure gives the same positions everywhere; another seed gives another, equally valid, layout of graphs that have such nodes.

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

force.ticks integer

Steps of the simulation from its start to rest; the cooling is spread over them. More steps untangle a graph better and take longer. Default: 600 up to 500 nodes, fewer for larger graphs (300 from 1,000 to 3,000 nodes, 90 at 10,000).

• Type: integer ≥ 1
• Default: none
• Array OK: no
• Edit type: calc
• Animatable: no

force.linkdistance number

'spring': the rest length of a link, in layout units (CSS px before the graph is fitted to the plot area). Links end up longer where the repulsion of their nodes stretches them.

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

force.linkstrength number

'spring': how hard a link pulls its nodes to its rest length, 0 to 1. Default: per link, 1 / the smaller degree of its two nodes, so that the links of a hub do not crush its neighbours onto it.

• Type: number from 0 to 1
• Default: none
• Array OK: no
• Edit type: calc
• Animatable: no

force.linkweight enumerated

What link.value does to a link: 'strength': a larger value pulls harder; 'distance': a larger value makes the link shorter ('spring' only; as 'strength' for 'forceatlas2'); 'none': nothing.

• Type: enumerated
• Values: "strength" | "distance" | "none"
• Default: "strength"
• Array OK: no
• Edit type: calc
• Animatable: no

force.charge number

'spring': the strength of the force between every two nodes: negative values push them apart (the more negative, the larger and more open the layout), positive ones pull them together.

• Type: number
• Default: -60
• Array OK: no
• Edit type: calc
• Animatable: no

force.gravity number

The pull toward the center, which keeps the parts of a graph that are not linked from drifting apart. 'spring': each connected part is pulled as a whole (default 0.05). 'forceatlas2': every node is pulled, the more links it has the harder (default 1).

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

force.collide boolean

Keep nodes from overlapping, each taken as a circle around its marker or box.

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

force.collidepadding number

With collide: the room left between two nodes, in layout units.

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

force.groupstrength number

The pull of every node toward the middle of its group (node.group), which keeps the nodes of a group together even where the links do not. 0.05 to 0.3 are usual values.

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

force.scalingratio number

'forceatlas2': the repulsion between nodes; a larger value gives a larger, more open layout. Default: 10, or 1 with linlog.

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

force.linlog boolean

'forceatlas2': links pull with the logarithm of their length instead of the length: tighter and better separated clusters.

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

force.start

A picture the layout goes on from, in place of the spiral: where every node is, and how warm the layout still is there. Pinned nodes (node.x and node.y) are where those say; the layout is centered on the middle of these positions and not moved afterwards. The chart writes it when a node is dragged, so that the figure is the picture on screen: at rest (alpha: 0) on a drop, with alpha: 0.3 when a pinned node is released, and once more at rest when a layout shown with force.simulate has settled. While it is at rest the other force options change nothing: unset it to lay the graph out afresh.

• Type: object
• Edit type: calc

force.start.x data_array

Where each node is along x, in layout units; a node without a number starts in the spiral.

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

force.start.y data_array

Where each node is along y (see force.start.x).

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

force.start.alpha number

How warm the layout still is at these positions. 0: at rest: the positions are the layout, and nothing is simulated. Above 0 the simulation goes on from them, cooling from this value at the rate of a full run, so 0.3 moves the nodes about a little and 1 is a full run.

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

layered

Options of arrangement: 'layered'. Lengths are layout units: CSS px at the size the graph is laid out for, before it is fitted to the plot area.

• Type: object
• Edit type: calc

layered.rankdir enumerated

The direction the links point in: top to bottom ('TB'), bottom to top ('BT'), left to right ('LR') or right to left ('RL').

• Type: enumerated
• Values: "TB" | "BT" | "LR" | "RL"
• Default: "TB"
• Array OK: no
• Edit type: calc
• Animatable: no

layered.ranksep number

Free space between two layers, in layout units.

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

layered.nodesep number

Free space between two nodes of a layer, in layout units.

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

layered.edgesep number

Free space between two long links that cross a layer side by side, in layout units.

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

layered.ranker enumerated

How nodes get their layer. 'network-simplex': the layers that make the links shortest in total. 'tight-tree': its starting point, faster and nearly as short. 'longest-path': every node as early as its links allow, the fastest, with longer links.

• Type: enumerated
• Values: "network-simplex" | "tight-tree" | "longest-path"
• Default: "network-simplex"
• Array OK: no
• Edit type: calc
• Animatable: no

layered.routing enumerated

The shape of the links: smooth curves ('spline'), straight segments through the same points ('polyline') or horizontal and vertical segments ('orthogonal').

• Type: enumerated
• Values: "spline" | "polyline" | "orthogonal"
• Default: "spline"
• Array OK: no
• Edit type: calc
• Animatable: no

layered.clusters boolean

Keep the nodes of a group (node.group) together and draw a frame around each group, tinted in its color, with its name at the top.

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

layered.clusterpadding number

With clusters: the space between a frame and its nodes, in layout units.

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

layered.aspect number

Width over height that the parts of a graph that are not linked to each other are packed into. Default: the proportions of the plot area.

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

tree

Options of the tree arrangements: 'tree', 'radial' and 'dendrogram'. The tree is the one parents gives; with link.source / link.target, each node hangs from the first node that links to it, starting at the nodes without incoming links, and the links left over are drawn in the link.secondary style. Lengths are layout units: CSS px at the size the graph is laid out for, before it is fitted to the plot area.

• Type: object
• Edit type: calc

tree.orientation enumerated

'tree' and 'dendrogram': where the root is and which way the tree grows: 'TB' (root at the top), 'BT', 'LR' (root on the left) or 'RL'. Default: 'LR' for a tree, whose labels then read along the levels, and 'TB' for a dendrogram, whose heights are then on the y axis.

• Type: enumerated
• Values: "TB" | "BT" | "LR" | "RL"
• Default: none
• Array OK: no
• Edit type: calc
• Animatable: no

tree.links enumerated

The shape of the tree's links: straight lines, S-shaped curves ('curved') or right angles ('elbow'; in a 'radial' tree, along the rings). Default: 'curved', and 'elbow' for a dendrogram, which has no curves.

• Type: enumerated
• Values: "straight" | "curved" | "elbow"
• Default: none
• Array OK: no
• Edit type: calc
• Animatable: no

tree.nodesep number

Room between two neighbours on a level (on a ring for 'radial'; between two leaves for 'dendrogram'), on top of their sizes and of their labels, in layout units. Default: 10, or 20 for box nodes.

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

tree.subtreesep number

'tree' and 'radial': room between two neighbours that have different parents. Default: nodesep.

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

tree.ranksep number

Room between two levels (two rings for 'radial'), in layout units; a dendrogram without node.value has levels this far apart. Default: 50, plus room for the labels that are drawn between the levels.

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

tree.sector

'radial': the part of the circle the tree fans out over.

• Type: object
• Edit type: calc

tree.sector.start number

Angle at which the tree begins, in degrees counter-clockwise from 3 o'clock.

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

tree.sector.span number

How far around the tree goes, in degrees; negative values run clockwise. 180 is a half circle.

• Type: number from -360 to 360
• Default: 360
• Array OK: no
• Edit type: calc
• Animatable: no

tree.sort enumerated

The order of the children of a node: as given ('input'), by the number of nodes below them ('size') or by node.value.

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

tree.sortorder enumerated

Which way sort: 'size' and 'value' order: largest first, or smallest first.

• Type: enumerated
• Values: "descending" | "ascending"
• Default: "descending"
• Array OK: no
• Edit type: calc
• Animatable: no

tree.collapsed data_array

The nodes whose subtrees are folded away, as node indices; with tree input (parents), ids (ids, else labels) work too. The nodes below a collapsed node are not drawn and take no room, and the node gets a ring that says it holds something. A click on a node that has children adds it to this list or removes it (see collapsible).

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

tree.collapsible boolean

A click on a node that has children folds its subtree away, and a second click unfolds it. The chart then updates tree.collapsed itself and emits restyle, as for any change made on the chart, and the tree moves to its new shape (at once without motion: prefers-reduced-motion, config.a11y.reducedMotion).

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

arc

Options of arrangement: 'arc'. Lengths are layout units: CSS px at the size the graph is laid out for, before it is fitted to the plot area.

• Type: object
• Edit type: calc

arc.orientation enumerated

The direction of the line the nodes sit on: horizontal ('h', first node on the left) or vertical ('v', first node at the top).

• Type: enumerated
• Values: "h" | "v"
• Default: "h"
• Array OK: no
• Edit type: calc
• Animatable: no

arc.order enumerated

The order of the nodes along the line, which is what an arc diagram shows. 'input': as given. 'group': by node.group. 'degree': most links first. 'barycenter': the given order improved so that linked nodes are close and the arcs short. Default: 'group' when the nodes have groups, else 'input'.

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

arc.nodesep number

Space between two neighbours on the line, in layout units.

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

arc.groupsep number

With order: 'group': extra space where the group changes.

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

arc.sides enumerated

The side of the line the arcs are on: 'above' (to the right of a vertical line), 'below', or 'direction': above for a link that points forward along the line and below for one that points back.

• Type: enumerated
• Values: "above" | "below" | "direction"
• Default: "above"
• Array OK: no
• Edit type: calc
• Animatable: no

arc.maxheight number

How far an arc may rise from the line, in layout units: longer arcs are flattened to this height. Default: no limit (half circles).

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

arc.loopsize number

How far the loop of a link from a node to itself rises beyond the node's edge.

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

hive

Options of arrangement: 'hive'. A link between two nodes of one axis is not drawn: a hive plot shows what goes on between the axes.

• Type: object
• Edit type: calc

hive.axes integer

Number of axes when the nodes have no groups (with node.group there is one axis per group, with the group's name at its end) and assign is 'degree'.

• Type: integer from 1 to 360
• Default: 3
• Array OK: no
• Edit type: calc
• Animatable: no

hive.assign enumerated

How nodes without groups get their axis. 'degree': sorted by their number of links and cut into axes equal parts. 'direction': three axes, for the nodes that only have outgoing links, those in between, and those that only have incoming links.

• Type: enumerated
• Values: "degree" | "direction"
• Default: "degree"
• Array OK: no
• Edit type: calc
• Animatable: no

hive.startangle number

Angle of the first axis in degrees, counter-clockwise from 3 o'clock. The others follow counter-clockwise, evenly spaced.

• Type: number
• Default: 90
• Array OK: no
• Edit type: calc
• Animatable: no

hive.innerradius number

Distance from the center to the first node of an axis, in layout units.

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

hive.outerradius number

Distance from the center to the last node of an axis, in layout units.

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

hive.position enumerated

What places a node along its axis: its rank by number of links among the nodes of the axis ('degree', the least linked nearest the center) or node.value, on one scale for all axes.

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

labels data_array

Tree input, as the hierarchical traces take it: the label of every node. With parents (and no link.source), every node with a parent gets a link from its parent. The default of node.label.

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

parents data_array

Tree input: the parent of every node, as its id (ids, else labels); '' for a root. A parent that is no node becomes a node of its own, after the others.

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

node

The nodes.

• Type: object
• Edit type: calc

node.label data_array

Node labels, one per node index: drawn next to the node (see node.textposition) and shown in hover labels. Where labels would overlap, the nodes with the most links keep theirs; the others appear when zooming in.

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

node.x data_array

Node x positions. With arrangement: 'preset' they are data on the x axis (numbers, dates or categories by the axis type) and a node without one is not drawn. Under 'force' a node that has both x and y is pinned there (in layout units: CSS px at the size the graph is laid out for) and the others arrange themselves around it; when every node has an x and none has a y, the x axis is a real axis, shown, on which every node keeps its value while the layout moves it along y only. The other arrangements place every node themselves.

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

node.y data_array

Node y positions (see node.x).

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

node.size number

Node diameter in CSS px, or one per node. Ignored with node.sizeby and for box nodes. Default: 10, and 6 in a 'dendrogram', whose nodes are points on a scale.

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

node.sizeby enumerated

Size nodes by their links instead of node.size: 'degree' (all links at the node), 'indegree' (links that end at it) or 'outdegree' (links that start at it). The area grows with the count, between the two diameters of node.sizerange.

• Type: enumerated
• Values: "none" | "degree" | "indegree" | "outdegree"
• Default: "none"
• Array OK: no
• Edit type: calc
• Animatable: no

node.sizerange info_array

With node.sizeby: the diameters in CSS px of a node without links and of the node with the most.

• Type: info_array [number, number]
• Default: [6, 30]
• Array OK: no
• Edit type: calc
• Animatable: no

node.color color

Node color, one CSS color per node, or numbers mapped through colorscale (with a colorbar when showscale is on). Default: the group's color when node.group is given (the colorway, one color per group), else the trace's colorway color.

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

node.colorscale colorscale

Colorscale for numeric node.color values: a name ('Viridis', 'RdBu', …), a list of colors, or [position, color] stops from 0 to 1.

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

node.autocolorscale boolean

Pick the colorscale from the sign of the color domain (Reds for ≥ 0, Blues for ≤ 0, RdBu across 0). Defaults to true unless colorscale is given.

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

node.reversescale boolean

Reverse the colorscale (the lowest value gets the last color).

• Type: boolean
• Default: false
• Array OK: no
• Edit type: style
• Animatable: no

node.cauto boolean

Compute the color domain from the numeric node.color values. Defaults to false when both cmin and cmax are given.

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

node.cmin number

Value mapped to the first colorscale color (with cmax; turns cauto off).

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

node.cmax number

Value mapped to the last colorscale color (with cmin; turns cauto off).

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

node.cmid number

With cauto, widen the automatic domain so it is symmetric around this value (diverging data).

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

node.showscale boolean

Show a colorbar for this colorscale (drawn by the colorbar component, plan E5.3).

• Type: boolean
• Default: false
• Array OK: no
• Edit type: colorbars
• Animatable: no

node.colorbar

The colorbar of this colorscale (plan E5.3).

• Type: object
• Edit type: colorbars+layout

node.colorbar.orientation enumerated

Vertical bar (v, beside the plot) or horizontal bar (h, above or below).

• Type: enumerated
• Values: "h" | "v"
• Default: "v"
• Array OK: no
• Edit type: colorbars+layout (inherited)
• Animatable: no

node.colorbar.thicknessmode enumerated

Unit of thickness: px, or a fraction of the plot width (v) / height (h).

• Type: enumerated
• Values: "fraction" | "pixels"
• Default: "pixels"
• Array OK: no
• Edit type: colorbars+layout (inherited)
• Animatable: no

node.colorbar.thickness number

Thickness of the color bar.

• Type: number ≥ 0
• Default: 30
• Array OK: no
• Edit type: colorbars+layout (inherited)
• Animatable: no

node.colorbar.lenmode enumerated

Unit of len: px, or a fraction of the plot height (v) / width (h).

• Type: enumerated
• Values: "fraction" | "pixels"
• Default: "fraction"
• Array OK: no
• Edit type: colorbars+layout (inherited)
• Animatable: no

node.colorbar.len number

Length of the colorbar along its axis, padding included (ypad / xpad).

• Type: number ≥ 0
• Default: 1
• Array OK: no
• Edit type: colorbars+layout (inherited)
• Animatable: no

node.colorbar.x number

Horizontal position (xref fraction). Defaults to 1.02 (v, paper), 1 (v, container) or 0.5 (h).

• Type: number
• Default: none
• Array OK: no
• Edit type: colorbars+layout (inherited)
• Animatable: no

node.colorbar.xref enumerated

Reference of x: the plot area (paper) or the whole figure.

• Type: enumerated
• Values: "container" | "paper"
• Default: "paper"
• Array OK: no
• Edit type: colorbars+layout (inherited)
• Animatable: no

node.colorbar.xanchor enumerated

Which side of the colorbar sits at x. Defaults to left (v, paper), right (v, container) or center (h).

• Type: enumerated
• Values: "left" | "center" | "right"
• Default: none
• Array OK: no
• Edit type: colorbars+layout (inherited)
• Animatable: no

node.colorbar.xpad number

Horizontal padding, px.

• Type: number ≥ 0
• Default: 10
• Array OK: no
• Edit type: colorbars+layout (inherited)
• Animatable: no

node.colorbar.y number

Vertical position (yref fraction). Defaults to 0.5 (v), 1.02 (h, paper) or 1 (h, container).

• Type: number
• Default: none
• Array OK: no
• Edit type: colorbars+layout (inherited)
• Animatable: no

node.colorbar.yref enumerated

Reference of y: the plot area (paper) or the whole figure.

• Type: enumerated
• Values: "container" | "paper"
• Default: "paper"
• Array OK: no
• Edit type: colorbars+layout (inherited)
• Animatable: no

node.colorbar.yanchor enumerated

Which side of the colorbar sits at y. Defaults to middle (v), bottom (h, paper) or top (h, container).

• Type: enumerated
• Values: "top" | "middle" | "bottom"
• Default: none
• Array OK: no
• Edit type: colorbars+layout (inherited)
• Animatable: no

node.colorbar.ypad number

Vertical padding, px.

• Type: number ≥ 0
• Default: 10
• Array OK: no
• Edit type: colorbars+layout (inherited)
• Animatable: no

node.colorbar.outlinecolor color

Color of the outline around the bar.

• Type: color
• Default: "#444"
• Array OK: no
• Edit type: colorbars+layout (inherited)
• Animatable: no

node.colorbar.outlinewidth number

Outline width, px.

• Type: number ≥ 0
• Default: 1
• Array OK: no
• Edit type: colorbars+layout (inherited)
• Animatable: no

node.colorbar.bordercolor color

Border color of the colorbar box.

• Type: color
• Default: "#444"
• Array OK: no
• Edit type: colorbars+layout (inherited)
• Animatable: no

node.colorbar.borderwidth number

Border width of the box, px.

• Type: number ≥ 0
• Default: 0
• Array OK: no
• Edit type: colorbars+layout (inherited)
• Animatable: no

node.colorbar.bgcolor color

Background of the box.

• Type: color
• Default: "rgba(0, 0, 0, 0)"
• Array OK: no
• Edit type: colorbars+layout (inherited)
• Animatable: no

node.colorbar.tickmode enumerated

auto picks up to nticks round ticks; linear places ticks from tick0 every dtick; array uses tickvals/ticktext; sync aligns with the overlaid axis (reserved; behaves as auto). Defaults to array when tickvals is set, linear when dtick is set, else auto.

• Type: enumerated
• Values: "auto" | "linear" | "array" | "sync"
• Default: none
• Array OK: no
• Edit type: colorbars+layout
• Animatable: no

node.colorbar.nticks integer

Maximum number of ticks for tickmode: auto (the actual number may be lower so steps stay round). 0 picks it from the axis length.

• Type: integer ≥ 0
• Default: 0
• Array OK: no
• Edit type: colorbars+layout
• Animatable: no

node.colorbar.tick0 any

Position of one tick for tickmode: linear (data units; a date on date axes, an exponent on log axes unless dtick is L<f>). Defaults to 0, or 2000-01-01 on date axes.

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

node.colorbar.dtick any

Tick step. Linear axes: a positive number. Log axes: an integer n (a tick every n decades), L<f> (linear steps of f in data units, e.g. L0.5), D1 (every digit) or D2 (1, 2 and 5). Date axes: milliseconds, or M<n> for n months (M12 for years).

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

node.colorbar.tickvals data_array

Tick positions for tickmode: array (data units).

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

node.colorbar.ticktext data_array

Tick labels for tickvals. Missing entries are formatted as usual.

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

node.colorbar.ticks enumerated

Draw tick marks outside or inside the plot area, or not at all ('').

• Type: enumerated
• Values: "outside" | "inside" | ""
• Default: ""
• Array OK: no
• Edit type: colorbars+layout
• Animatable: no

node.colorbar.ticklen number

Tick length in px.

• Type: number ≥ 0
• Default: 5
• Array OK: no
• Edit type: colorbars+layout
• Animatable: no

node.colorbar.tickwidth number

Tick width in px.

• Type: number ≥ 0
• Default: 1
• Array OK: no
• Edit type: colorbars+layout
• Animatable: no

node.colorbar.tickcolor color

Tick color. Defaults to color.

• Type: color
• Default: "#444"
• Array OK: no
• Edit type: colorbars+layout
• Animatable: no

node.colorbar.ticklabelposition enumerated

Tick labels outside the bar (away from it) or inside (over it); top/bottom (v) or left/right (h) move them beside their tick.

• Type: enumerated
• Values: "outside" | "inside" | "outside top" | "inside top" | "outside bottom" | "inside bottom" | "outside left" | "inside left" | "outside right" | "inside right"
• Default: "outside"
• Array OK: no
• Edit type: colorbars+layout (inherited)
• Animatable: no

node.colorbar.ticklabeloverflow enumerated

Hide labels past the figure or past the bar. Defaults to hide past domain for inside labels, else hide past div.

• Type: enumerated
• Values: "allow" | "hide past div" | "hide past domain"
• Default: none
• Array OK: no
• Edit type: colorbars+layout (inherited)
• Animatable: no

node.colorbar.ticklabelstep integer

Label every n-th tick only (tickmode auto and linear).

• Type: integer ≥ 1
• Default: 1
• Array OK: no
• Edit type: colorbars+layout
• Animatable: no

node.colorbar.showticklabels boolean

Show tick labels.

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

node.colorbar.tickfont

Tick-label font. Defaults to layout.font.

• Type: object
• Edit type: layout+plot

node.colorbar.tickfont.family string

CSS font-family list. The renderer uses the first family it can load and falls back through the list.

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

node.colorbar.tickfont.size number

Font size in CSS pixels.

• Type: number ≥ 1
• Default: none
• Array OK: no
• Edit type: layout+plot (inherited)
• Animatable: no

node.colorbar.tickfont.color color

Text color.

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

node.colorbar.tickfont.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: layout+plot (inherited)
• Animatable: no

node.colorbar.tickfont.style enumerated

Font style.

• Type: enumerated
• Values: "normal" | "italic"
• Default: none
• Array OK: no
• Edit type: layout+plot (inherited)
• Animatable: no

node.colorbar.tickfont.variant enumerated

Capitals variant (CSS font-variant-caps). The SDF text renderer approximates small and petite caps with uppercase letters at a reduced size.

• Type: enumerated
• Values: "normal" | "small-caps" | "all-small-caps" | "all-petite-caps" | "petite-caps" | "unicase"
• Default: none
• Array OK: no
• Edit type: layout+plot (inherited)
• Animatable: no

node.colorbar.tickfont.textcase enumerated

Letter case transform: upper, lower, word caps (first letter of each word), or normal.

• Type: enumerated
• Values: "normal" | "word caps" | "upper" | "lower"
• Default: none
• Array OK: no
• Edit type: layout+plot (inherited)
• Animatable: no

node.colorbar.tickfont.lineposition flaglist

Text decoration: under, over and/or through joined with + (e.g. under+over), or none.

• Type: flaglist
• Flags: "under", "over", "through" (combine with +)
• Also accepts: "none"
• Default: none
• Array OK: no
• Edit type: layout+plot (inherited)
• Animatable: no

node.colorbar.tickfont.shadow string

CSS text-shadow behind the text (2px 2px 3px black; only the first shadow is drawn), none, or auto for a thin halo in the contrast color of the text.

• Type: string
• Default: none
• Array OK: no
• Edit type: layout+plot (inherited)
• Animatable: no

node.colorbar.tickangle angle

Tick-label rotation in degrees. auto rotates x-axis labels by the first autotickangles entry that avoids overlap.

• Type: angle (degrees), or "auto"
• Default: "auto"
• Array OK: no
• Edit type: colorbars+layout
• Animatable: no

node.colorbar.tickformat string

Tick-label format: a d3-format specifier for numbers (.2f, ~s, $,) or a d3-time-format specifier for dates (%b %Y), plus %{n}f for n digits of fractional seconds and %h for the half year. Empty picks a format automatically.

• Type: string
• Default: ""
• Array OK: no
• Edit type: colorbars+layout
• Animatable: no

node.colorbar.tickprefix string

Text before each tick label.

• Type: string
• Default: ""
• Array OK: no
• Edit type: colorbars+layout
• Animatable: no

node.colorbar.showtickprefix enumerated

Which tick labels get tickprefix.

• Type: enumerated
• Values: "all" | "first" | "last" | "none"
• Default: "all"
• Array OK: no
• Edit type: colorbars+layout
• Animatable: no

node.colorbar.ticksuffix string

Text after each tick label.

• Type: string
• Default: ""
• Array OK: no
• Edit type: colorbars+layout
• Animatable: no

node.colorbar.showticksuffix enumerated

Which tick labels get ticksuffix.

• Type: enumerated
• Values: "all" | "first" | "last" | "none"
• Default: "all"
• Array OK: no
• Edit type: colorbars+layout
• Animatable: no

node.colorbar.separatethousands boolean

Always separate thousands (1,000). By default only numbers with 5 or more integer digits are separated.

• Type: boolean
• Default: false
• Array OK: no
• Edit type: colorbars+layout
• Animatable: no

node.colorbar.exponentformat enumerated

How large and small numbers are written: none (1000000), e (1e+6), E (1E+6), power (1×10⁶), SI (1M), B (like SI but 1B for 10⁹).

• Type: enumerated
• Values: "none" | "e" | "E" | "power" | "SI" | "B"
• Default: "B"
• Array OK: no
• Edit type: colorbars+layout
• Animatable: no

node.colorbar.minexponent number

Smallest decimal exponent written in exponent form (SI/B and exponent formats); smaller magnitudes are written out in full.

• Type: number ≥ 0
• Default: 3
• Array OK: no
• Edit type: colorbars+layout
• Animatable: no

node.colorbar.showexponent enumerated

Which tick labels show the exponent.

• Type: enumerated
• Values: "all" | "first" | "last" | "none"
• Default: "all"
• Array OK: no
• Edit type: colorbars+layout
• Animatable: no

node.colorbar.title

Colorbar title.

• Type: object
• Edit type: colorbars+layout

node.colorbar.title.text string

Colorbar title.

• Type: string
• Default: ""
• Array OK: no
• Edit type: colorbars+layout (inherited)
• Animatable: no

node.colorbar.title.font

Title font. Defaults to layout.font with the tick-label family and 1.2 × its size.

• Type: object
• Edit type: layout+plot

node.colorbar.title.font.family string

CSS font-family list. The renderer uses the first family it can load and falls back through the list.

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

node.colorbar.title.font.size number

Font size in CSS pixels.

• Type: number ≥ 1
• Default: none
• Array OK: no
• Edit type: layout+plot (inherited)
• Animatable: no

node.colorbar.title.font.color color

Text color.

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

node.colorbar.title.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: layout+plot (inherited)
• Animatable: no

node.colorbar.title.font.style enumerated

Font style.

• Type: enumerated
• Values: "normal" | "italic"
• Default: none
• Array OK: no
• Edit type: layout+plot (inherited)
• Animatable: no

node.colorbar.title.font.variant enumerated

Capitals variant (CSS font-variant-caps). The SDF text renderer approximates small and petite caps with uppercase letters at a reduced size.

• Type: enumerated
• Values: "normal" | "small-caps" | "all-small-caps" | "all-petite-caps" | "petite-caps" | "unicase"
• Default: none
• Array OK: no
• Edit type: layout+plot (inherited)
• Animatable: no

node.colorbar.title.font.textcase enumerated

Letter case transform: upper, lower, word caps (first letter of each word), or normal.

• Type: enumerated
• Values: "normal" | "word caps" | "upper" | "lower"
• Default: none
• Array OK: no
• Edit type: layout+plot (inherited)
• Animatable: no

node.colorbar.title.font.lineposition flaglist

Text decoration: under, over and/or through joined with + (e.g. under+over), or none.

• Type: flaglist
• Flags: "under", "over", "through" (combine with +)
• Also accepts: "none"
• Default: none
• Array OK: no
• Edit type: layout+plot (inherited)
• Animatable: no

node.colorbar.title.font.shadow string

CSS text-shadow behind the text (2px 2px 3px black; only the first shadow is drawn), none, or auto for a thin halo in the contrast color of the text.

• Type: string
• Default: none
• Array OK: no
• Edit type: layout+plot (inherited)
• Animatable: no

node.colorbar.title.side enumerated

Where the title goes relative to the bar. Defaults to top (v) or right (h).

• Type: enumerated
• Values: "right" | "top" | "bottom"
• Default: none
• Array OK: no
• Edit type: colorbars+layout (inherited)
• Animatable: no

node.coloraxis subplotid

Share a colorscale and domain with other traces through layout.coloraxis ('coloraxis', 'coloraxis2', …). Overrides this container's colorscale attributes.

• Type: subplotid (coloraxis, coloraxis2, coloraxis3, …)
• Default: "coloraxis"
• Array OK: no
• Edit type: style
• Animatable: no

node.symbol enumerated

Marker symbol: a name ('diamond-open'), a Plotly numeric code, a custom symbol registered with symbols.register (with the same -open / -dot variants), a 'text:…' glyph such as 'text:🚀', or one per point.

• Type: enumerated
• Values: "circle" | 0 | "0" | "circle-open" | 100 | "100" | "circle-dot" | 200 | "200" | "circle-open-dot" | 300 | "300" | "square" | 1 | "1" | "square-open" | 101 | "101" | "square-dot" | 201 | "201" | "square-open-dot" | 301 | "301" | "diamond" | 2 | "2" | "diamond-open" | 102 | "102" | "diamond-dot" | 202 | "202" | "diamond-open-dot" | 302 | "302" | "cross" | 3 | "3" | "cross-open" | 103 | "103" | "cross-dot" | 203 | "203" | "cross-open-dot" | 303 | "303" | "x" | 4 | "4" | "x-open" | 104 | "104" | "x-dot" | 204 | "204" | "x-open-dot" | 304 | "304" | "triangle-up" | 5 | "5" | "triangle-up-open" | 105 | "105" | "triangle-up-dot" | 205 | "205" | "triangle-up-open-dot" | 305 | "305" | "triangle-down" | 6 | "6" | "triangle-down-open" | 106 | "106" | "triangle-down-dot" | 206 | "206" | "triangle-down-open-dot" | 306 | "306" | "triangle-left" | 7 | "7" | "triangle-left-open" | 107 | "107" | "triangle-left-dot" | 207 | "207" | "triangle-left-open-dot" | 307 | "307" | "triangle-right" | 8 | "8" | "triangle-right-open" | 108 | "108" | "triangle-right-dot" | 208 | "208" | "triangle-right-open-dot" | 308 | "308" | "triangle-ne" | 9 | "9" | "triangle-ne-open" | 109 | "109" | "triangle-ne-dot" | 209 | "209" | "triangle-ne-open-dot" | 309 | "309" | "triangle-se" | 10 | "10" | "triangle-se-open" | 110 | "110" | "triangle-se-dot" | 210 | "210" | "triangle-se-open-dot" | 310 | "310" | "triangle-sw" | 11 | "11" | "triangle-sw-open" | 111 | "111" | "triangle-sw-dot" | 211 | "211" | "triangle-sw-open-dot" | 311 | "311" | "triangle-nw" | 12 | "12" | "triangle-nw-open" | 112 | "112" | "triangle-nw-dot" | 212 | "212" | "triangle-nw-open-dot" | 312 | "312" | "pentagon" | 13 | "13" | "pentagon-open" | 113 | "113" | "pentagon-dot" | 213 | "213" | "pentagon-open-dot" | 313 | "313" | "hexagon" | 14 | "14" | "hexagon-open" | 114 | "114" | "hexagon-dot" | 214 | "214" | "hexagon-open-dot" | 314 | "314" | "hexagon2" | 15 | "15" | "hexagon2-open" | 115 | "115" | "hexagon2-dot" | 215 | "215" | "hexagon2-open-dot" | 315 | "315" | "octagon" | 16 | "16" | "octagon-open" | 116 | "116" | "octagon-dot" | 216 | "216" | "octagon-open-dot" | 316 | "316" | "star" | 17 | "17" | "star-open" | 117 | "117" | "star-dot" | 217 | "217" | "star-open-dot" | 317 | "317" | "hexagram" | 18 | "18" | "hexagram-open" | 118 | "118" | "hexagram-dot" | 218 | "218" | "hexagram-open-dot" | 318 | "318" | "star-triangle-up" | 19 | "19" | "star-triangle-up-open" | 119 | "119" | "star-triangle-up-dot" | 219 | "219" | "star-triangle-up-open-dot" | 319 | "319" | "star-triangle-down" | 20 | "20" | "star-triangle-down-open" | 120 | "120" | "star-triangle-down-dot" | 220 | "220" | "star-triangle-down-open-dot" | 320 | "320" | "star-square" | 21 | "21" | "star-square-open" | 121 | "121" | "star-square-dot" | 221 | "221" | "star-square-open-dot" | 321 | "321" | "star-diamond" | 22 | "22" | "star-diamond-open" | 122 | "122" | "star-diamond-dot" | 222 | "222" | "star-diamond-open-dot" | 322 | "322" | "diamond-tall" | 23 | "23" | "diamond-tall-open" | 123 | "123" | "diamond-tall-dot" | 223 | "223" | "diamond-tall-open-dot" | 323 | "323" | "diamond-wide" | 24 | "24" | "diamond-wide-open" | 124 | "124" | "diamond-wide-dot" | 224 | "224" | "diamond-wide-open-dot" | 324 | "324" | "hourglass" | 25 | "25" | "hourglass-open" | 125 | "125" | "hourglass-dot" | 225 | "225" | "hourglass-open-dot" | 325 | "325" | "bowtie" | 26 | "26" | "bowtie-open" | 126 | "126" | "bowtie-dot" | 226 | "226" | "bowtie-open-dot" | 326 | "326" | "circle-cross" | 27 | "27" | "circle-cross-open" | 127 | "127" | "circle-cross-dot" | 227 | "227" | "circle-cross-open-dot" | 327 | "327" | "circle-x" | 28 | "28" | "circle-x-open" | 128 | "128" | "circle-x-dot" | 228 | "228" | "circle-x-open-dot" | 328 | "328" | "square-cross" | 29 | "29" | "square-cross-open" | 129 | "129" | "square-cross-dot" | 229 | "229" | "square-cross-open-dot" | 329 | "329" | "square-x" | 30 | "30" | "square-x-open" | 130 | "130" | "square-x-dot" | 230 | "230" | "square-x-open-dot" | 330 | "330" | "diamond-cross" | 31 | "31" | "diamond-cross-open" | 131 | "131" | "diamond-cross-dot" | 231 | "231" | "diamond-cross-open-dot" | 331 | "331" | "diamond-x" | 32 | "32" | "diamond-x-open" | 132 | "132" | "diamond-x-dot" | 232 | "232" | "diamond-x-open-dot" | 332 | "332" | "cross-thin" | 33 | "33" | "cross-thin-open" | 133 | "133" | "cross-thin-dot" | 233 | "233" | "cross-thin-open-dot" | 333 | "333" | "x-thin" | 34 | "34" | "x-thin-open" | 134 | "134" | "x-thin-dot" | 234 | "234" | "x-thin-open-dot" | 334 | "334" | "asterisk" | 35 | "35" | "asterisk-open" | 135 | "135" | "asterisk-dot" | 235 | "235" | "asterisk-open-dot" | 335 | "335" | "hash" | 36 | "36" | "hash-open" | 136 | "136" | "hash-dot" | 236 | "236" | "hash-open-dot" | 336 | "336" | "y-up" | 37 | "37" | "y-up-open" | 137 | "137" | "y-up-dot" | 237 | "237" | "y-up-open-dot" | 337 | "337" | "y-down" | 38 | "38" | "y-down-open" | 138 | "138" | "y-down-dot" | 238 | "238" | "y-down-open-dot" | 338 | "338" | "y-left" | 39 | "39" | "y-left-open" | 139 | "139" | "y-left-dot" | 239 | "239" | "y-left-open-dot" | 339 | "339" | "y-right" | 40 | "40" | "y-right-open" | 140 | "140" | "y-right-dot" | 240 | "240" | "y-right-open-dot" | 340 | "340" | "line-ew" | 41 | "41" | "line-ew-open" | 141 | "141" | "line-ew-dot" | 241 | "241" | "line-ew-open-dot" | 341 | "341" | "line-ns" | 42 | "42" | "line-ns-open" | 142 | "142" | "line-ns-dot" | 242 | "242" | "line-ns-open-dot" | 342 | "342" | "line-ne" | 43 | "43" | "line-ne-open" | 143 | "143" | "line-ne-dot" | 243 | "243" | "line-ne-open-dot" | 343 | "343" | "line-nw" | 44 | "44" | "line-nw-open" | 144 | "144" | "line-nw-dot" | 244 | "244" | "line-nw-open-dot" | 344 | "344" | "arrow-up" | 45 | "45" | "arrow-up-open" | 145 | "145" | "arrow-up-dot" | 245 | "245" | "arrow-up-open-dot" | 345 | "345" | "arrow-down" | 46 | "46" | "arrow-down-open" | 146 | "146" | "arrow-down-dot" | 246 | "246" | "arrow-down-open-dot" | 346 | "346" | "arrow-left" | 47 | "47" | "arrow-left-open" | 147 | "147" | "arrow-left-dot" | 247 | "247" | "arrow-left-open-dot" | 347 | "347" | "arrow-right" | 48 | "48" | "arrow-right-open" | 148 | "148" | "arrow-right-dot" | 248 | "248" | "arrow-right-open-dot" | 348 | "348" | "arrow-bar-up" | 49 | "49" | "arrow-bar-up-open" | 149 | "149" | "arrow-bar-up-dot" | 249 | "249" | "arrow-bar-up-open-dot" | 349 | "349" | "arrow-bar-down" | 50 | "50" | "arrow-bar-down-open" | 150 | "150" | "arrow-bar-down-dot" | 250 | "250" | "arrow-bar-down-open-dot" | 350 | "350" | "arrow-bar-left" | 51 | "51" | "arrow-bar-left-open" | 151 | "151" | "arrow-bar-left-dot" | 251 | "251" | "arrow-bar-left-open-dot" | 351 | "351" | "arrow-bar-right" | 52 | "52" | "arrow-bar-right-open" | 152 | "152" | "arrow-bar-right-dot" | 252 | "252" | "arrow-bar-right-open-dot" | 352 | "352" | "arrow" | 53 | "53" | "arrow-open" | 153 | "153" | "arrow-dot" | 253 | "253" | "arrow-open-dot" | 353 | "353" | "arrow-wide" | 54 | "54" | "arrow-wide-open" | 154 | "154" | "arrow-wide-dot" | 254 | "254" | "arrow-wide-open-dot" | 354 | "354"
• Default: "circle"
• Array OK: yes (one value per point)
• Edit type: style
• Animatable: no

node.group data_array

A group per node (a name or a number; empty for none): colors the nodes by group, gives the legend one item per group, which a click hides, and keeps the nodes of a group together in the arrangements that can.

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

node.value data_array

A number per node, for the arrangements that place or order nodes by one: the height of a node in a 'dendrogram' (the distance at which a clustering merged it; leaves without one are at 0), the order of siblings with tree.sort: 'value', the place along its axis with hive.position: 'value'. %{value} in node hover labels.

• Type: data_array (array or typed array)
• Default: none
• Array OK: no
• Edit type: calc
• 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.opacity number

Node opacity (multiplied by the trace opacity), or one per node.

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

node.line

Outlines of the nodes.

• Type: object
• Edit type: style

node.line.color color

Outline color of the nodes, or one per node. Default: the plot background, so that nodes stand out from the links and from each other.

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

node.line.width number

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

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

node.shape enumerated

How nodes are drawn: a marker (node.symbol, node.size) with the label next to it, or a box as large as the label with the text inside ('box'; diagrams such as pipelines and state machines). Default: 'box' with arrangement: 'layered' when the nodes have labels, else 'marker'.

• Type: enumerated
• Values: "marker" | "box"
• Default: "marker"
• Array OK: no
• Edit type: calc
• Animatable: no

node.textposition enumerated

Where the label sits relative to its marker. 'auto': where the arrangement leaves room. To the right of the node in general; pointing away from the center around a 'circular' arrangement; in a tree, beyond a leaf and before a node with children (turned upright under the leaves of a tree that grows downwards or upwards, and along the radius in a 'radial' tree, never upside down); under the line of an 'arc' diagram, upright; beside the axes of a 'hive' plot. 'none' draws no labels (they still show in hover labels). Box nodes have their label inside.

• Type: enumerated
• Values: "auto" | "top left" | "top center" | "top right" | "middle left" | "middle center" | "middle right" | "bottom left" | "bottom center" | "bottom right" | "none"
• Default: "auto"
• Array OK: no
• Edit type: calc
• Animatable: no

node.textfont

Font of the node labels. Default: layout.font, with the automatic halo (shadow: auto). Family, size, weight and style set the size of box nodes.

• Type: object
• Edit type: calc

node.textfont.family string

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

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

node.textfont.size number

Font size in CSS px. Default: layout.font.size.

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

node.textfont.color color

Text color. Default: layout.font.color; inside a box node, black or white, whichever reads better on the box.

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

node.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: calc
• Animatable: no

node.textfont.style enumerated

Font style.

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

node.textfont.shadow string

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.

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

node.draggable boolean

Whether a press on a node drags it. 'preset': the release restyles node.x and node.y with the node's new position as data (a date on a date axis, the nearest category on a category axis). 'force': the release pins the node, restyling its node.x and node.y and, with the picture on screen, force.start, so nothing else moves; with force.simulate the other nodes give way while it is dragged. A pinned node has a ring, and a double click releases it. A press that does not move is a click; a press on empty space is the chart's own drag (dragmode). Default: true for 'preset' and 'force' (not on a timeline), false for 'custom', whose layout gets the position as graph.x / graph.y. The nodes of the other arrangements do not drag.

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

node.hoverinfo enumerated

Hover of the nodes: labels ('all'), events 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}, %{degree}, %{indegree}, %{outdegree}, %{neighbors} (the number of nodes it is linked to), %{group}, %{value}, %{size}, %{color}, %{x}, %{y}, %{customdata}. <extra>…</extra> replaces the trace name.

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

link

The links.

• Type: object
• Edit type: calc

link.source data_array

Source node index of every link. A link whose source or target is not a node is dropped.

• 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 loop.

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

link.value data_array

A positive number per link: its weight for the layouts (a stronger pull, a shorter link) and %{value} in hover labels. It sets the width only with link.widthby: 'value'. Missing or non-positive values count as 1.

• 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.color color

Link color, or one per link. Default: a translucent gray that reads on the plot background, light or dark.

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

link.width number

Link width in CSS px, or one per link. Ignored with link.widthby.

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

link.widthby enumerated

'value': widths from link.value, proportional to it, between the two widths of link.widthrange (the largest value gets the second).

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

link.widthrange info_array

With link.widthby: 'value': the widths in CSS px of a link of value 0 and of the link with the largest value.

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

link.dash string

Dash style of every link: 'solid', 'dot', 'dash', 'longdash', 'dashdot', 'longdashdot', or a dash list such as '5px,10px,2px'.

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

link.secondary

Style of the links an arrangement sets apart from the others: with 'layered', the links that close a cycle, which the layout had to turn around to give every other link one direction (back edges; their arrowheads still point the way the data says); with 'tree', 'radial' and 'dendrogram', the links that are not part of the tree (they skip levels or join two branches, and are drawn straight). Default: dashed and a little fainter.

• Type: object
• Edit type: style

link.secondary.dash string

Dash style of the secondary links (see link.dash).

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

link.secondary.opacity number

Opacity of the secondary links, multiplied by link.opacity.

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

link.secondary.color color

Color of the secondary links. Default: each link's own color.

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

link.curve number

How far a link bows out, as a fraction of its length: 0 is straight, positive bows to the left of its direction, negative to the right. One value, or one per link. Default: straight, except that the links between the same two nodes are fanned out so that each can be seen. A value replaces that fan: one value for all links draws the links between the same two nodes on top of each other (give one value per link to keep them apart), and in an array a link without a number keeps its place in the fan. A link the layout routed keeps its route.

• Type: number from -2 to 2
• Default: none
• Array OK: yes (one value per point)
• Edit type: plot
• Animatable: no

link.arrow

Arrowheads. Their tips stop at the node's edge, whatever its size.

• Type: object
• Edit type: plot

link.arrow.end boolean

Draw an arrowhead at the target end of every link (a directed graph). Default: true with arrangement: 'layered', whose links all point one way, else false.

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

link.arrow.start boolean

Draw an arrowhead at the source end of every link.

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

link.arrow.size number

Length of the arrowheads in CSS px; a wide link gets a head at least three times its width.

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

link.opacity number

Link opacity (multiplied by the trace opacity and the color alpha).

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

link.bundle

Link bundling. Default: none.

• Type: object
• Edit type: calc

link.bundle.method enumerated

Draw links that run the same way together, as bundles, so that a dense graph shows its main streams. The nodes stay where they are. 'hierarchical': a link follows the path between its two ends in the hierarchy of the nodes, their groups (node.group) or, under a tree arrangement, the tree: links between the same two groups share their middle. Cheap, and at its best on 'circular' and 'radial'. 'force': links that lie alongside each other attract each other, for graphs without groups; costly, and refused above 20,000 links (the links are then drawn straight, with a warning). 'auto': 'hierarchical' when the nodes have groups or the arrangement is a tree, else 'force'. Links the arrangement routed itself ('layered', 'arc', 'hive', the edges of a tree) keep their routes. The bundles are computed after the layout and arrive a moment after the nodes (see worker); while a node is dragged, hierarchical bundles follow it and force-directed ones are drawn straight until it is dropped.

• Type: enumerated
• Values: "none" | "auto" | "hierarchical" | "force"
• Default: "none"
• Array OK: no
• Edit type: calc
• Animatable: no

link.bundle.strength number

How tightly the links are bundled: 0 leaves them straight, 1 pulls them all the way together.

• Type: number from 0 to 1
• Default: 0.85
• Array OK: no
• Edit type: calc
• Animatable: no

link.bundle.compatibility number

With force-directed bundling: how alike two links must be to attract each other (their directions, lengths and positions), 0 to 1. Lower values bundle more links, also ones that do not belong together.

• Type: number from 0 to 1
• Default: 0.6
• 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.hoverinfo enumerated

Hover of the links: labels ('all'), events 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}, %{source.label}, %{target.label}, %{source.index}, %{target.index}, %{customdata}. <extra>…</extra> replaces the trace name.

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

highlight

Highlighting: the neighbourhood of the node or link under the pointer (or of highlight.nodes), and a shortest path between two selected nodes or the two of highlight.path. What is highlighted keeps its look, its label shows even where there was no room for it, and everything else is dimmed; nothing is laid out or built again. A hover comes first, then highlight.nodes, then a path.

• Type: object
• Edit type: style

highlight.mode flaglist

What is emphasized, the rest of the graph being dimmed (highlight.dim). 'neighbors': while the pointer is over a node, the node, the links that lead from it and the nodes they lead to (highlight.hops, highlight.direction); over a link, the link and its two ends. 'path': while exactly two nodes are selected, a shortest path between them. 'none': neither. Hover highlighting is skipped for a graph of more than 50,000 nodes and links together.

• Type: flaglist
• Flags: "neighbors", "path" (combine with +)
• Also accepts: "none"
• Default: "neighbors+path"
• Array OK: no
• Edit type: style
• Animatable: no

highlight.hops integer

With 'neighbors': how many links away from the hovered node the highlight reaches. 1: its neighbours; 2: their neighbours too; 0: the node alone. The links between two nodes that are both at the last hop are not part of it.

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

highlight.direction enumerated

With 'neighbors': which links are followed from the hovered node, and from each node reached. 'both': all of them. 'out': only from a link's source to its target, which gives what the node leads to (its descendants). 'in': only from target to source: what leads to it (its ancestors).

• Type: enumerated
• Values: "both" | "out" | "in"
• Default: "both"
• Array OK: no
• Edit type: style
• Animatable: no

highlight.dim number

Opacity factor of the nodes, links and labels that are not highlighted while something is.

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

highlight.color color

Color of the highlighted links. Default: each link's own color, made opaque.

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

highlight.nodes data_array

Node indices whose neighbourhood is highlighted as a hover on each of them would (highlight.hops, highlight.direction), whatever highlight.mode says, until this is unset: for a highlight that the app drives (a search box, a linked view, a story). The pointer over a node or link takes its place while it is there.

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

highlight.path info_array

Two node indices: a shortest path from the first to the second is highlighted, whatever is selected, until this is unset. Nothing is highlighted when there is no such path. graphPath(trace) returns the path that is highlighted.

• Type: info_array [integer, integer]
• Default: none
• Array OK: no
• Edit type: style
• Animatable: no

highlight.pathweight enumerated

What makes a path short. 'hops': the number of its links. 'value': the sum of its links' link.value, each taken as a cost or a distance (a link without a positive value costs 1).

• Type: enumerated
• Values: "hops" | "value"
• Default: "hops"
• Array OK: no
• Edit type: style
• Animatable: no

highlight.pathdirected boolean

Whether a path follows every link from its source to its target only. Default: true when the links have arrowheads at their targets (link.arrow.end), else false: a path may run along a link either way.

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

selected

Style of selected nodes while a selection is active (box or lasso select, selectedpoints). Links between two selected nodes keep their style; the others are dimmed.

• Type: object
• Edit type: style

selected.node

Style of selected nodes.

• Type: object
• Edit type: style

selected.node.opacity number

Opacity of selected nodes.

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

selected.node.color color

Color of selected nodes.

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

unselected

Style of unselected nodes while a selection is active (box or lasso select, selectedpoints). Links between two selected nodes keep their style; the others are dimmed.

• Type: object
• Edit type: style

unselected.node

Style of unselected nodes.

• Type: object
• Edit type: style

unselected.node.opacity number

Opacity of unselected nodes. Default: 0.2 × the node opacity when no selected or unselected opacity is set.

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

unselected.node.color color

Color of unselected nodes.

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

zorder integer

Stacking order among the traces of a subplot: higher is drawn on top. At equal zorder, scatter traces draw above bars (Plotly’s layer order), then in trace order.

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