Interface: GraphTraceNode
The nodes.
Properties
| Property | Type | Default value | Description |
|---|---|---|---|
autocolorscale? | boolean | undefined | 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. |
cauto? | boolean | undefined | Compute the color domain from the numeric node.color values. Defaults to false when both cmin and cmax are given. |
cmax? | number | undefined | Value mapped to the last colorscale color (with cmin; turns cauto off). |
cmid? | number | undefined | With cauto, widen the automatic domain so it is symmetric around this value (diverging data). |
cmin? | number | undefined | Value mapped to the first colorscale color (with cmax; turns cauto off). |
color? | PerPointColor | undefined | 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. |
coloraxis? | "coloraxis" | `coloraxis${number}` | "coloraxis" | Share a colorscale and domain with other traces through layout.coloraxis ('coloraxis', 'coloraxis2', …). Overrides this container's colorscale attributes. |
colorbar? | Colorbar | undefined | The colorbar of this colorscale (plan E5.3). |
colorscale? | | ColorScale | readonly string[] | readonly readonly (string | number)[][] | undefined | Colorscale for numeric node.color values: a name ('Viridis', 'RdBu', …), a list of colors, or [position, color] stops from 0 to 1. |
customdata? | DataColumn | undefined | Extra data per node for %{customdata} and events. |
draggable? | boolean | undefined | 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. |
group? | DataColumn | undefined | 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. |
hoverinfo? | "all" | "none" | "skip" | "all" | Hover of the nodes: labels ('all'), events without labels ('none') or no hover and no events ('skip'). Default: the trace hoverinfo. |
hovertemplate? | string | undefined | 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. |
label? | DataColumn | undefined | 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. |
line? | GraphTraceNodeLine | undefined | Outlines of the nodes. |
opacity? | PerPointNumber | 1 | Node opacity (multiplied by the trace opacity), or one per node. Range: 0 – 1 |
reversescale? | boolean | false | Reverse the colorscale (the lowest value gets the last color). |
shape? | "marker" | "box" | "marker" | 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'. |
showscale? | boolean | false | Show a colorbar for this colorscale (drawn by the colorbar component, plan E5.3). |
size? | PerPointNumber | 10 | 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. Minimum: 0 |
sizeby? | "none" | "degree" | "indegree" | "outdegree" | "none" | 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. |
sizerange? | readonly number[] | [6,30] | With node.sizeby: the diameters in CSS px of a node without links and of the node with the most. |
symbol? | PerPoint< | 0 | 2 | "circle" | "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" | "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" | string & object> | "circle" | 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. |
textfont? | GraphTraceNodeTextfont | undefined | 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. |
textposition? | | "none" | "auto" | "top left" | "top center" | "top right" | "middle left" | "middle center" | "middle right" | "bottom left" | "bottom center" | "bottom right" | "auto" | 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. |
value? | DataColumn | undefined | 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. |
x? | DataColumn | undefined | 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. |
y? | DataColumn | undefined | Node y positions (see node.x). |