Black Lives Matter. Please consider donating to Black Girls Code today.

JavaScript Figure Reference: sankey Traces

A sankey trace is an object with the key "type" equal to "sankey" (i.e. {"type": "sankey"}) and any of the keys listed below.

Sankey plots for network flow data analysis. The nodes are specified in `nodes` and the links between sources and targets in `links`. The colors are set in `nodes[i].color` and `links[i].color`, otherwise defaults are used.

  • type
    Parent: data[type=sankey]
    Type: "sankey"
  • name
    Parent: data[type=sankey]
    Type: string

    Sets the trace name. The trace name appear as the legend item and on hover.

  • visible
    Parent: data[type=sankey]
    Type: enumerated , one of ( true | false | "legendonly" )
    Default: true

    Determines whether or not this trace is visible. If "legendonly", the trace is not drawn, but can appear as a legend item (provided that the legend itself is visible).

  • ids
    Parent: data[type=sankey]
    Type: data array

    Assigns id labels to each datum. These ids for object constancy of data points during animation. Should be an array of strings, not numbers or any other type.

  • hoverinfo
    Parent: data[type=sankey]
    Type: flaglist string. Any combination of joined with a "+" OR "all" or "none" or "skip".
    Examples: "", "", "+", "all"
    Default: "all"

    Determines which trace information appear on hover. If `none` or `skip` are set, no information is displayed upon hovering. But, if `none` is set, click and hover events are still fired. Note that this attribute is superseded by `node.hoverinfo` and `node.hoverinfo` for nodes and links respectively.

  • meta
    Parent: data[type=sankey]
    Type: number or categorical coordinate string

    Assigns extra meta information associated with this trace that can be used in various text attributes. Attributes such as trace `name`, graph, axis and colorbar `title.text`, annotation `text` `rangeselector`, `updatemenues` and `sliders` `label` text all support `meta`. To access the trace `meta` values in an attribute in the same trace, simply use `%{meta[i]}` where `i` is the index or key of the `meta` item in question. To access trace `meta` in layout attributes, use `%{data[n[.meta[i]}` where `i` is the index or key of the `meta` and `n` is the trace index.

  • customdata
    Parent: data[type=sankey]
    Type: data array

    Assigns extra data each datum. This may be useful when listening to hover, click and selection events. Note that, "scatter" traces also appends customdata items in the markers DOM elements

  • domain
    Parent: data[type=sankey]
    Type: object containing one or more of the keys listed below.
    • x
      Parent: data[type=sankey].domain
      Type: array
      Default: [0, 1]

      Sets the horizontal domain of this sankey trace (in plot fraction).

    • y
      Parent: data[type=sankey].domain
      Type: array
      Default: [0, 1]

      Sets the vertical domain of this sankey trace (in plot fraction).

    • row
      Parent: data[type=sankey].domain
      Type: integer greater than or equal to 0
      Default: 0

      If there is a layout grid, use the domain for this row in the grid for this sankey trace .

    • column
      Parent: data[type=sankey].domain
      Type: integer greater than or equal to 0
      Default: 0

      If there is a layout grid, use the domain for this column in the grid for this sankey trace .

  • orientation
    Parent: data[type=sankey]
    Type: enumerated , one of ( "v" | "h" )
    Default: "h"

    Sets the orientation of the Sankey diagram.

  • node
    Parent: data[type=sankey]
    Type: object containing one or more of the keys listed below.

    The nodes of the Sankey plot.

    • label
      Parent: data[type=sankey].node
      Type: data array
      Default:

      The shown name of the node.

    • groups
      Parent: data[type=sankey].node
      Type: array
      Default: []

      Groups of nodes. Each group is defined by an array with the indices of the nodes it contains. Multiple groups can be specified.

    • x
      Parent: data[type=sankey].node
      Type: data array
      Default:

      The normalized horizontal position of the node.

    • y
      Parent: data[type=sankey].node
      Type: data array
      Default:

      The normalized vertical position of the node.

    • color
      Parent: data[type=sankey].node
      Type: color or array of colors

      Sets the `node` color. It can be a single value, or an array for specifying color for each `node`. If `node.color` is omitted, then the default `Plotly` color palette will be cycled through to have a variety of colors. These defaults are not fully opaque, to allow some visibility of what is beneath the node.

    • customdata
      Parent: data[type=sankey].node
      Type: data array

      Assigns extra data to each node.

    • line
      Parent: data[type=sankey].node
      Type: object containing one or more of the keys listed below.
      • color
        Parent: data[type=sankey].node.line
        Type: color or array of colors
        Default: "#444"

        Sets the color of the `line` around each `node`.

      • width
        Parent: data[type=sankey].node.line
        Type: number or array of numbers greater than or equal to 0
        Default: 0.5

        Sets the width (in px) of the `line` around each `node`.

    • pad
      Parent: data[type=sankey].node
      Type: number greater than or equal to 0
      Default: 20

      Sets the padding (in px) between the `nodes`.

    • thickness
      Parent: data[type=sankey].node
      Type: number greater than or equal to 1
      Default: 20

      Sets the thickness (in px) of the `nodes`.

    • hoverinfo
      Parent: data[type=sankey].node
      Type: enumerated , one of ( "all" | "none" | "skip" )
      Default: "all"

      Determines which trace information appear when hovering nodes. If `none` or `skip` are set, no information is displayed upon hovering. But, if `none` is set, click and hover events are still fired.

    • hoverlabel
      Parent: data[type=sankey].node
      Type: object containing one or more of the keys listed below.
      • bgcolor
        Parent: data[type=sankey].node.hoverlabel
        Type: color or array of colors

        Sets the background color of the hover labels for this trace

      • bordercolor
        Parent: data[type=sankey].node.hoverlabel
        Type: color or array of colors

        Sets the border color of the hover labels for this trace.

      • font
        Parent: data[type=sankey].node.hoverlabel
        Type: object containing one or more of the keys listed below.

        Sets the font used in hover labels.

        • family
          Parent: data[type=sankey].node.hoverlabel.font
          Type: string or array of strings

          HTML font family - the typeface that will be applied by the web browser. The web browser will only be able to apply a font if it is available on the system which it operates. Provide multiple font families, separated by commas, to indicate the preference in which to apply fonts if they aren't available on the system. The Chart Studio Cloud (at https://chart-studio.plotly.com or on-premise) generates images on a server, where only a select number of fonts are installed and supported. These include "Arial", "Balto", "Courier New", "Droid Sans",, "Droid Serif", "Droid Sans Mono", "Gravitas One", "Old Standard TT", "Open Sans", "Overpass", "PT Sans Narrow", "Raleway", "Times New Roman".

        • size
          Parent: data[type=sankey].node.hoverlabel.font
          Type: number or array of numbers greater than or equal to 1
        • color
          Parent: data[type=sankey].node.hoverlabel.font
          Type: color or array of colors
      • align
        Parent: data[type=sankey].node.hoverlabel
        Type: enumerated or array of enumerateds , one of ( "left" | "right" | "auto" )
        Default: "auto"

        Sets the horizontal alignment of the text content within hover label box. Has an effect only if the hover label text spans more two or more lines

      • namelength
        Parent: data[type=sankey].node.hoverlabel
        Type: integer or array of integers greater than or equal to -1
        Default: 15

        Sets the default length (in number of characters) of the trace name in the hover labels for all traces. -1 shows the whole name regardless of length. 0-3 shows the first 0-3 characters, and an integer >3 will show the whole name if it is less than that many characters, but if it is longer, will truncate to `namelength - 3` characters and add an ellipsis.

    • hovertemplate
      Parent: data[type=sankey].node
      Type: string or array of strings
      Default: ""

      Template string used for rendering the information that appear on hover box. Note that this will override `hoverinfo`. Variables are inserted using %{variable}, for example "y: %{y}". Numbers are formatted using d3-format's syntax %{variable:d3-format}, for example "Price: %{y:$.2f}". https://github.com/d3/d3-3.x-api-reference/blob/master/Formatting.md#d3_format for details on the formatting syntax. Dates are formatted using d3-time-format's syntax %{variable|d3-time-format}, for example "Day: %{2019-01-01|%A}". https://github.com/d3/d3-time-format#locale_format for details on the date formatting syntax. The variables available in `hovertemplate` are the ones emitted as event data described at this link https://plotly.com/javascript/plotlyjs-events/#event-data. Additionally, every attributes that can be specified per-point (the ones that are `arrayOk: true`) are available. variables `value` and `label`. Anything contained in tag `<extra>` is displayed in the secondary box, for example "<extra>{fullData.name}</extra>". To hide the secondary box completely, use an empty tag `<extra></extra>`.

  • link
    Parent: data[type=sankey]
    Type: object containing one or more of the keys listed below.

    The links of the Sankey plot.

    • label
      Parent: data[type=sankey].link
      Type: data array
      Default:

      The shown name of the link.

    • color
      Parent: data[type=sankey].link
      Type: color or array of colors

      Sets the `link` color. It can be a single value, or an array for specifying color for each `link`. If `link.color` is omitted, then by default, a translucent grey link will be used.

    • customdata
      Parent: data[type=sankey].link
      Type: data array

      Assigns extra data to each link.

    • line
      Parent: data[type=sankey].link
      Type: object containing one or more of the keys listed below.
      • color
        Parent: data[type=sankey].link.line
        Type: color or array of colors
        Default: "#444"

        Sets the color of the `line` around each `link`.

      • width
        Parent: data[type=sankey].link.line
        Type: number or array of numbers greater than or equal to 0
        Default: 0

        Sets the width (in px) of the `line` around each `link`.

    • source
      Parent: data[type=sankey].link
      Type: data array
      Default:

      An integer number `[0..nodes.length - 1]` that represents the source node.

    • target
      Parent: data[type=sankey].link
      Type: data array
      Default:

      An integer number `[0..nodes.length - 1]` that represents the target node.

    • value
      Parent: data[type=sankey].link
      Type: data array
      Default:

      A numeric value representing the flow volume value.

    • hoverinfo
      Parent: data[type=sankey].link
      Type: enumerated , one of ( "all" | "none" | "skip" )
      Default: "all"

      Determines which trace information appear when hovering links. If `none` or `skip` are set, no information is displayed upon hovering. But, if `none` is set, click and hover events are still fired.

    • hoverlabel
      Parent: data[type=sankey].link
      Type: object containing one or more of the keys listed below.
      • bgcolor
        Parent: data[type=sankey].link.hoverlabel
        Type: color or array of colors

        Sets the background color of the hover labels for this trace

      • bordercolor
        Parent: data[type=sankey].link.hoverlabel
        Type: color or array of colors

        Sets the border color of the hover labels for this trace.

      • font
        Parent: data[type=sankey].link.hoverlabel
        Type: object containing one or more of the keys listed below.

        Sets the font used in hover labels.

        • family
          Parent: data[type=sankey].link.hoverlabel.font
          Type: string or array of strings

          HTML font family - the typeface that will be applied by the web browser. The web browser will only be able to apply a font if it is available on the system which it operates. Provide multiple font families, separated by commas, to indicate the preference in which to apply fonts if they aren't available on the system. The Chart Studio Cloud (at https://chart-studio.plotly.com or on-premise) generates images on a server, where only a select number of fonts are installed and supported. These include "Arial", "Balto", "Courier New", "Droid Sans",, "Droid Serif", "Droid Sans Mono", "Gravitas One", "Old Standard TT", "Open Sans", "Overpass", "PT Sans Narrow", "Raleway", "Times New Roman".

        • size
          Parent: data[type=sankey].link.hoverlabel.font
          Type: number or array of numbers greater than or equal to 1
        • color
          Parent: data[type=sankey].link.hoverlabel.font
          Type: color or array of colors
      • align
        Parent: data[type=sankey].link.hoverlabel
        Type: enumerated or array of enumerateds , one of ( "left" | "right" | "auto" )
        Default: "auto"

        Sets the horizontal alignment of the text content within hover label box. Has an effect only if the hover label text spans more two or more lines

      • namelength
        Parent: data[type=sankey].link.hoverlabel
        Type: integer or array of integers greater than or equal to -1
        Default: 15

        Sets the default length (in number of characters) of the trace name in the hover labels for all traces. -1 shows the whole name regardless of length. 0-3 shows the first 0-3 characters, and an integer >3 will show the whole name if it is less than that many characters, but if it is longer, will truncate to `namelength - 3` characters and add an ellipsis.

    • hovertemplate
      Parent: data[type=sankey].link
      Type: string or array of strings
      Default: ""

      Template string used for rendering the information that appear on hover box. Note that this will override `hoverinfo`. Variables are inserted using %{variable}, for example "y: %{y}". Numbers are formatted using d3-format's syntax %{variable:d3-format}, for example "Price: %{y:$.2f}". https://github.com/d3/d3-3.x-api-reference/blob/master/Formatting.md#d3_format for details on the formatting syntax. Dates are formatted using d3-time-format's syntax %{variable|d3-time-format}, for example "Day: %{2019-01-01|%A}". https://github.com/d3/d3-time-format#locale_format for details on the date formatting syntax. The variables available in `hovertemplate` are the ones emitted as event data described at this link https://plotly.com/javascript/plotlyjs-events/#event-data. Additionally, every attributes that can be specified per-point (the ones that are `arrayOk: true`) are available. variables `value` and `label`. Anything contained in tag `<extra>` is displayed in the secondary box, for example "<extra>{fullData.name}</extra>". To hide the secondary box completely, use an empty tag `<extra></extra>`.

    • colorscales
      Parent: data[type=sankey].link
      Type: array of object where each object has one or more of the keys listed below.
      • label
        Parent: data[type=sankey].link.colorscales[]
        Type: string
        Default: ""

        The label of the links to color based on their concentration within a flow.

      • cmax
        Parent: data[type=sankey].link.colorscales[]
        Type: number
        Default: 1

        Sets the upper bound of the color domain.

      • cmin
        Parent: data[type=sankey].link.colorscales[]
        Type: number
        Default: 0

        Sets the lower bound of the color domain.

      • colorscale
        Parent: data[type=sankey].link.colorscales[]
        Type: colorscale
        Default: [[0, white], [1, black], ]

        Sets the colorscale. The colorscale must be an array containing arrays mapping a normalized value to an rgb, rgba, hex, hsl, hsv, or named color string. At minimum, a mapping for the lowest (0) and highest (1) values are required. For example, `[[0, 'rgb(0,0,255)'], [1, 'rgb(255,0,0)']]`. To control the bounds of the colorscale in color space, use`cmin` and `cmax`. Alternatively, `colorscale` may be a palette name string of the following list: Greys,YlGnBu,Greens,YlOrRd,Bluered,RdBu,Reds,Blues,Picnic,Rainbow,Portland,Jet,Hot,Blackbody,Earth,Electric,Viridis,Cividis.

      • name
        Parent: data[type=sankey].link.colorscales[]
        Type: string

        When used in a template, named items are created in the output figure in addition to any items the figure already has in this array. You can modify these items in the output figure by making your own item with `templateitemname` matching this `name` alongside your modifications (including `visible: false` or `enabled: false` to hide it). Has no effect outside of a template.

      • templateitemname
        Parent: data[type=sankey].link.colorscales[]
        Type: string

        Used to refer to a named item in this array in the template. Named items from the template will be created even without a matching item in the input figure, but you can modify one by making an item with `templateitemname` matching its `name`, alongside your modifications (including `visible: false` or `enabled: false` to hide it). If there is no template or no matching item, this item will be hidden unless you explicitly show it with `visible: true`.

  • textfont
    Parent: data[type=sankey]
    Type: object containing one or more of the keys listed below.

    Sets the font for node labels

    • family
      Parent: data[type=sankey].textfont
      Type: string

      HTML font family - the typeface that will be applied by the web browser. The web browser will only be able to apply a font if it is available on the system which it operates. Provide multiple font families, separated by commas, to indicate the preference in which to apply fonts if they aren't available on the system. The Chart Studio Cloud (at https://chart-studio.plotly.com or on-premise) generates images on a server, where only a select number of fonts are installed and supported. These include "Arial", "Balto", "Courier New", "Droid Sans",, "Droid Serif", "Droid Sans Mono", "Gravitas One", "Old Standard TT", "Open Sans", "Overpass", "PT Sans Narrow", "Raleway", "Times New Roman".

    • size
      Parent: data[type=sankey].textfont
      Type: number greater than or equal to 1
    • color
      Parent: data[type=sankey].textfont
      Type: color
  • selectedpoints
    Parent: data[type=sankey]
    Type: number or categorical coordinate string

    Array containing integer indices of selected points. Has an effect only for traces that support selections. Note that an empty array means an empty selection where the `unselected` are turned on for all points, whereas, any other non-array values means no selection all where the `selected` and `unselected` styles have no effect.

  • arrangement
    Parent: data[type=sankey]
    Type: enumerated , one of ( "snap" | "perpendicular" | "freeform" | "fixed" )
    Default: "snap"

    If value is `snap` (the default), the node arrangement is assisted by automatic snapping of elements to preserve space between nodes specified via `nodepad`. If value is `perpendicular`, the nodes can only move along a line perpendicular to the flow. If value is `freeform`, the nodes can freely move on the plane. If value is `fixed`, the nodes are stationary.

  • hoverlabel
    Parent: data[type=sankey]
    Type: object containing one or more of the keys listed below.
    • bgcolor
      Parent: data[type=sankey].hoverlabel
      Type: color or array of colors

      Sets the background color of the hover labels for this trace

    • bordercolor
      Parent: data[type=sankey].hoverlabel
      Type: color or array of colors

      Sets the border color of the hover labels for this trace.

    • font
      Parent: data[type=sankey].hoverlabel
      Type: object containing one or more of the keys listed below.

      Sets the font used in hover labels.

      • family
        Parent: data[type=sankey].hoverlabel.font
        Type: string or array of strings

        HTML font family - the typeface that will be applied by the web browser. The web browser will only be able to apply a font if it is available on the system which it operates. Provide multiple font families, separated by commas, to indicate the preference in which to apply fonts if they aren't available on the system. The Chart Studio Cloud (at https://chart-studio.plotly.com or on-premise) generates images on a server, where only a select number of fonts are installed and supported. These include "Arial", "Balto", "Courier New", "Droid Sans",, "Droid Serif", "Droid Sans Mono", "Gravitas One", "Old Standard TT", "Open Sans", "Overpass", "PT Sans Narrow", "Raleway", "Times New Roman".

      • size
        Parent: data[type=sankey].hoverlabel.font
        Type: number or array of numbers greater than or equal to 1
      • color
        Parent: data[type=sankey].hoverlabel.font
        Type: color or array of colors
    • align
      Parent: data[type=sankey].hoverlabel
      Type: enumerated or array of enumerateds , one of ( "left" | "right" | "auto" )
      Default: "auto"

      Sets the horizontal alignment of the text content within hover label box. Has an effect only if the hover label text spans more two or more lines

    • namelength
      Parent: data[type=sankey].hoverlabel
      Type: integer or array of integers greater than or equal to -1
      Default: 15

      Sets the default length (in number of characters) of the trace name in the hover labels for all traces. -1 shows the whole name regardless of length. 0-3 shows the first 0-3 characters, and an integer >3 will show the whole name if it is less than that many characters, but if it is longer, will truncate to `namelength - 3` characters and add an ellipsis.

  • valueformat
    Parent: data[type=sankey]
    Type: string
    Default: ".3s"

    Sets the value formatting rule using d3 formatting mini-language which is similar to those of Python. See https://github.com/d3/d3-3.x-api-reference/blob/master/Formatting.md#d3_format

  • valuesuffix
    Parent: data[type=sankey]
    Type: string
    Default: ""

    Adds a unit to follow the value in the hover tooltip. Add a space if a separation is necessary from the value.

  • uirevision
    Parent: data[type=sankey]
    Type: number or categorical coordinate string

    Controls persistence of some user-driven changes to the trace: `constraintrange` in `parcoords` traces, as well as some `editable: true` modifications such as `name` and `colorbar.title`. Defaults to `layout.uirevision`. Note that other user-driven trace attribute changes are controlled by `layout` attributes: `trace.visible` is controlled by `layout.legend.uirevision`, `selectedpoints` is controlled by `layout.selectionrevision`, and `colorbar.(x|y)` (accessible with `config: {editable: true}`) is controlled by `layout.editrevision`. Trace changes are tracked by `uid`, which only falls back on trace index if no `uid` is provided. So if your app can add/remove traces before the end of the `data` array, such that the same trace has a different index, you can still preserve user-driven changes if you give each trace a `uid` that stays with it as it moves.