Skip to content

Sankey

Overview

The sankey trace type is used to create Sankey diagrams, which visualize the flow of quantities between different nodes (or categories). Sankey diagrams are commonly used to show the transfer of resources or values, with the width of the flow lines being proportional to the size of the flow.

You can customize the colors, labels, and flow paths to represent your data and flows effectively.

Common Uses

  • Flow of Resources: Visualizing how resources (e.g., money, energy, or materials) move between stages.
  • Part-to-Part Relationships: Displaying how parts contribute to other parts rather than the whole.
  • Energy or Supply Chains: Showing energy transfers or supply chain processes.

Check out the Attributes for the full set of configuration options

Examples

Common Configurations

Here's a simple sankey diagram showing how values flow between different categories:

You can copy this code below to create this chart in your project:

models:
  - name: sankey-data
    args:
      - echo
      - |
        source,target,value
        0,1,10
        0,2,5
        1,3,15
        2,3,5
traces:
  - name: Simple Sankey Diagram
    model: ${ref(sankey-data)}
    props:
      type: sankey
      node:
        label: ["A", "B", "C", "D"]
      link:
        source: ?{source}
        target: ?{target}
        value: ?{value}
charts:
  - name: Simple Sankey Diagram
    traces:
      - ${ref(Simple Sankey Diagram)}
    layout:
      title:
        text: Simple Sankey Diagram<br><sub>Flow of Resources Between Nodes</sub>

This example demonstrates a sankey diagram with custom node and link colors:

Here's the code:

models:
  - name: sankey-data-colors
    args:
      - echo
      - |
        source,target,value,color
        0,1,10,#1f77b4
        0,2,5,#ff7f0e
        1,3,15,#2ca02c
        2,3,5,#d62728
traces:
  - name: Sankey Diagram with Custom Colors
    model: ${ref(sankey-data-colors)}
    props:
      type: sankey
      node:
        label: ["X", "Y", "Z", "W"]
        color: ?{color}
      link:
        source: ?{source}
        target: ?{target}
        value: ?{value}
charts:
  - name: Sankey Diagram with Custom Colors
    traces:
      - ${ref(Sankey Diagram with Custom Colors)}
    layout:
      title:
        text: Sankey Diagram with Custom Colors<br><sub>Custom Colors for Nodes and Links</sub>

This example shows a sankey diagram where hover information displays both the value and the source-target relationship:

Here's the code:

models:
  - name: sankey-data-hover
    args:
      - echo
      - |
        source,target,value
        0,1,20
        0,2,10
        1,3,15
        2,3,5
traces:
  - name: Sankey Diagram with Hover Information
    model: ${ref(sankey-data-hover)}
    props:
      type: sankey
      node:
        label: ["P", "Q", "R", "S"]
      link:
        source: ?{source}
        target: ?{target}
        value: ?{value}
        hoverinfo: "source+target+value"
charts:
  - name: Sankey Diagram with Hover Information
    traces:
      - ${ref(Sankey Diagram with Hover Information)}
    layout:
      title:
        text: Sankey Diagram with Hover Information<br><sub>Hover Info Displaying Value and Relationships</sub>

A schema to validate plotly trace properties

Attributes

These attributes apply to traces where trace.props.type is set to sankey. You would configure these attributes on the trace with the trace.props object.

arrangement: 'any' #(1)!
customdata: 'array' #(2)!
customdatasrc: 'string' #(3)!
domain:
  column: 'integer' #(4)!
  row: 'integer' #(5)!
  x: 'array' #(6)!
  y: 'array' #(7)!
hoverinfo: 'string' #(8)!
hoverlabel:
  align: 'array' #(9)!
  alignsrc: 'string' #(10)!
  bgcolor: 'color | array' #(11)!
  bgcolorsrc: 'string' #(12)!
  bordercolor: 'color | array' #(13)!
  bordercolorsrc: 'string' #(14)!
  font:
    color: color | array
    colorsrc: 'string' #(15)!
    family: 'string | array' #(16)!
    familysrc: 'string' #(17)!
    lineposition: 'array' #(18)!
    linepositionsrc: 'string' #(19)!
    shadow: 'string | array' #(20)!
    shadowsrc: 'string' #(21)!
    size: number | array
    sizesrc: 'string' #(22)!
    style: 'array' #(23)!
    stylesrc: 'string' #(24)!
    textcase: 'array' #(25)!
    textcasesrc: 'string' #(26)!
    variant: 'array' #(27)!
    variantsrc: 'string' #(28)!
    weight: 'integer | array' #(29)!
    weightsrc: 'string' #(30)!
  namelength: 'integer | array' #(31)!
  namelengthsrc: 'string' #(32)!
ids: 'array' #(33)!
idssrc: 'string' #(34)!
legend: 'string' #(35)!
legendgrouptitle:
  font:
    color: any
    family: 'string' #(36)!
    lineposition: 'string' #(37)!
    shadow: 'string' #(38)!
    size: number
    style: 'any' #(39)!
    textcase: 'any' #(40)!
    variant: 'any' #(41)!
    weight: 'integer' #(42)!
  text: 'string' #(43)!
legendrank: 'number' #(44)!
legendwidth: 'number' #(45)!
link:
  arrowlen: 'number' #(46)!
  color: 'color | array' #(47)!
  colorscales: array
  colorsrc: 'string' #(48)!
  customdata: 'array' #(49)!
  customdatasrc: 'string' #(50)!
  hovercolor: 'color | array' #(51)!
  hovercolorsrc: 'string' #(52)!
  hoverinfo: 'any' #(53)!
  hoverlabel:
    align: 'array' #(54)!
    alignsrc: 'string' #(55)!
    bgcolor: 'color | array' #(56)!
    bgcolorsrc: 'string' #(57)!
    bordercolor: 'color | array' #(58)!
    bordercolorsrc: 'string' #(59)!
    font:
      color: color | array
      colorsrc: 'string' #(60)!
      family: 'string | array' #(61)!
      familysrc: 'string' #(62)!
      lineposition: 'array' #(63)!
      linepositionsrc: 'string' #(64)!
      shadow: 'string | array' #(65)!
      shadowsrc: 'string' #(66)!
      size: number | array
      sizesrc: 'string' #(67)!
      style: 'array' #(68)!
      stylesrc: 'string' #(69)!
      textcase: 'array' #(70)!
      textcasesrc: 'string' #(71)!
      variant: 'array' #(72)!
      variantsrc: 'string' #(73)!
      weight: 'integer | array' #(74)!
      weightsrc: 'string' #(75)!
    namelength: 'integer | array' #(76)!
    namelengthsrc: 'string' #(77)!
  hovertemplate: 'string | array' #(78)!
  hovertemplatesrc: 'string' #(79)!
  label: 'array' #(80)!
  labelsrc: 'string' #(81)!
  line:
    color: 'color | array' #(82)!
    colorsrc: 'string' #(83)!
    width: 'number | array' #(84)!
    widthsrc: 'string' #(85)!
  source: 'array' #(86)!
  sourcesrc: 'string' #(87)!
  target: 'array' #(88)!
  targetsrc: 'string' #(89)!
  value: 'array' #(90)!
  valuesrc: 'string' #(91)!
metasrc: 'string' #(92)!
name: 'string' #(93)!
node:
  align: 'any' #(94)!
  color: 'color | array' #(95)!
  colorsrc: 'string' #(96)!
  customdata: 'array' #(97)!
  customdatasrc: 'string' #(98)!
  groups: 'array' #(99)!
  hoverinfo: 'any' #(100)!
  hoverlabel:
    align: 'array' #(101)!
    alignsrc: 'string' #(102)!
    bgcolor: 'color | array' #(103)!
    bgcolorsrc: 'string' #(104)!
    bordercolor: 'color | array' #(105)!
    bordercolorsrc: 'string' #(106)!
    font:
      color: color | array
      colorsrc: 'string' #(107)!
      family: 'string | array' #(108)!
      familysrc: 'string' #(109)!
      lineposition: 'array' #(110)!
      linepositionsrc: 'string' #(111)!
      shadow: 'string | array' #(112)!
      shadowsrc: 'string' #(113)!
      size: number | array
      sizesrc: 'string' #(114)!
      style: 'array' #(115)!
      stylesrc: 'string' #(116)!
      textcase: 'array' #(117)!
      textcasesrc: 'string' #(118)!
      variant: 'array' #(119)!
      variantsrc: 'string' #(120)!
      weight: 'integer | array' #(121)!
      weightsrc: 'string' #(122)!
    namelength: 'integer | array' #(123)!
    namelengthsrc: 'string' #(124)!
  hovertemplate: 'string | array' #(125)!
  hovertemplatesrc: 'string' #(126)!
  label: 'array' #(127)!
  labelsrc: 'string' #(128)!
  line:
    color: 'color | array' #(129)!
    colorsrc: 'string' #(130)!
    width: 'number | array' #(131)!
    widthsrc: 'string' #(132)!
  pad: 'number' #(133)!
  thickness: 'number' #(134)!
  x: 'array' #(135)!
  xsrc: 'string' #(136)!
  y: 'array' #(137)!
  ysrc: 'string' #(138)!
orientation: 'any' #(139)!
stream:
  maxpoints: 'number' #(140)!
  token: 'string' #(141)!
textfont:
  color: any
  family: 'string' #(142)!
  lineposition: 'string' #(143)!
  shadow: 'string' #(144)!
  size: number
  style: 'any' #(145)!
  textcase: 'any' #(146)!
  variant: 'any' #(147)!
  weight: 'integer' #(148)!
type: sankey
uid: 'string' #(149)!
valueformat: 'string' #(150)!
valuesuffix: 'string' #(151)!
visible: 'any' #(152)!
  1. 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.
  2. 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
  3. Sets the source reference on Chart Studio Cloud for customdata.
  4. If there is a layout grid, use the domain for this column in the grid for this sankey trace .
  5. If there is a layout grid, use the domain for this row in the grid for this sankey trace .
  6. Sets the horizontal domain of this sankey trace (in plot fraction).
  7. Sets the vertical domain of this sankey trace (in plot fraction).
  8. 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.
  9. 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
  10. Sets the source reference on Chart Studio Cloud for align.
  11. Sets the background color of the hover labels for this trace
  12. Sets the source reference on Chart Studio Cloud for bgcolor.
  13. Sets the border color of the hover labels for this trace.
  14. Sets the source reference on Chart Studio Cloud for bordercolor.
  15. Sets the source reference on Chart Studio Cloud for color.
  16. HTML font family - the typeface that will be applied by the web browser. The web browser can only apply a font if it is available on the system where it runs. Provide multiple font families, separated by commas, to indicate the order in which to apply fonts if they aren't available.
  17. Sets the source reference on Chart Studio Cloud for family.
  18. Sets the kind of decoration line(s) with text, such as an under, over or through as well as combinations e.g. under+over, etc.
  19. Sets the source reference on Chart Studio Cloud for lineposition.
  20. Sets the shape and color of the shadow behind text. auto places minimal shadow and applies contrast text font color. See https://developer.mozilla.org/en-US/docs/Web/CSS/text-shadow for additional options.
  21. Sets the source reference on Chart Studio Cloud for shadow.
  22. Sets the source reference on Chart Studio Cloud for size.
  23. Sets whether a font should be styled with a normal or italic face from its family.
  24. Sets the source reference on Chart Studio Cloud for style.
  25. Sets capitalization of text. It can be used to make text appear in all-uppercase or all-lowercase, or with each word capitalized.
  26. Sets the source reference on Chart Studio Cloud for textcase.
  27. Sets the variant of the font.
  28. Sets the source reference on Chart Studio Cloud for variant.
  29. Sets the weight (or boldness) of the font.
  30. Sets the source reference on Chart Studio Cloud for weight.
  31. 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.
  32. Sets the source reference on Chart Studio Cloud for namelength.
  33. 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.
  34. Sets the source reference on Chart Studio Cloud for ids.
  35. Sets the reference to a legend to show this trace in. References to these legends are legend, legend2, legend3, etc. Settings for these legends are set in the layout, under layout.legend, layout.legend2, etc.
  36. HTML font family - the typeface that will be applied by the web browser. The web browser can only apply a font if it is available on the system where it runs. Provide multiple font families, separated by commas, to indicate the order in which to apply fonts if they aren't available.
  37. Sets the kind of decoration line(s) with text, such as an under, over or through as well as combinations e.g. under+over, etc.
  38. Sets the shape and color of the shadow behind text. auto places minimal shadow and applies contrast text font color. See https://developer.mozilla.org/en-US/docs/Web/CSS/text-shadow for additional options.
  39. Sets whether a font should be styled with a normal or italic face from its family.
  40. Sets capitalization of text. It can be used to make text appear in all-uppercase or all-lowercase, or with each word capitalized.
  41. Sets the variant of the font.
  42. Sets the weight (or boldness) of the font.
  43. Sets the title of the legend group.
  44. Sets the legend rank for this trace. Items and groups with smaller ranks are presented on top/left side while with reversed legend.traceorder they are on bottom/right side. The default legendrank is 1000, so that you can use ranks less than 1000 to place certain items before all unranked items, and ranks greater than 1000 to go after all unranked items. When having unranked or equal rank items shapes would be displayed after traces i.e. according to their order in data and layout.
  45. Sets the width (in px or fraction) of the legend for this trace.
  46. Sets the length (in px) of the links arrow, if 0 no arrow will be drawn.
  47. 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.
  48. Sets the source reference on Chart Studio Cloud for color.
  49. Assigns extra data to each link.
  50. Sets the source reference on Chart Studio Cloud for customdata.
  51. Sets the link hover color. It can be a single value, or an array for specifying hover colors for each link. If link.hovercolor is omitted, then by default, links will become slightly more opaque when hovered over.
  52. Sets the source reference on Chart Studio Cloud for hovercolor.
  53. 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.
  54. 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
  55. Sets the source reference on Chart Studio Cloud for align.
  56. Sets the background color of the hover labels for this trace
  57. Sets the source reference on Chart Studio Cloud for bgcolor.
  58. Sets the border color of the hover labels for this trace.
  59. Sets the source reference on Chart Studio Cloud for bordercolor.
  60. Sets the source reference on Chart Studio Cloud for color.
  61. HTML font family - the typeface that will be applied by the web browser. The web browser can only apply a font if it is available on the system where it runs. Provide multiple font families, separated by commas, to indicate the order in which to apply fonts if they aren't available.
  62. Sets the source reference on Chart Studio Cloud for family.
  63. Sets the kind of decoration line(s) with text, such as an under, over or through as well as combinations e.g. under+over, etc.
  64. Sets the source reference on Chart Studio Cloud for lineposition.
  65. Sets the shape and color of the shadow behind text. auto places minimal shadow and applies contrast text font color. See https://developer.mozilla.org/en-US/docs/Web/CSS/text-shadow for additional options.
  66. Sets the source reference on Chart Studio Cloud for shadow.
  67. Sets the source reference on Chart Studio Cloud for size.
  68. Sets whether a font should be styled with a normal or italic face from its family.
  69. Sets the source reference on Chart Studio Cloud for style.
  70. Sets capitalization of text. It can be used to make text appear in all-uppercase or all-lowercase, or with each word capitalized.
  71. Sets the source reference on Chart Studio Cloud for textcase.
  72. Sets the variant of the font.
  73. Sets the source reference on Chart Studio Cloud for variant.
  74. Sets the weight (or boldness) of the font.
  75. Sets the source reference on Chart Studio Cloud for weight.
  76. 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.
  77. Sets the source reference on Chart Studio Cloud for namelength.
  78. 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}" as well as %{xother}, {%xother}, {%_xother}, {%xother_}. When showing info for several points, xother will be added to those with different x positions from the first point. An underscore before or after (x|y)other will add a space on that side, only when this field is shown. Numbers are formatted using d3-format's syntax %{variable:d3-format}, for example "Price: %{y:$.2f}". https://github.com/d3/d3-format/tree/v1.4.5#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/tree/v2.2.3#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 source and target are node objects.Finally, the template string has access to variables value and label. Anything contained in tag <extra> is displayed in the secondary box, for example "{fullData.name}". To hide the secondary box completely, use an empty tag <extra></extra>.
  79. Sets the source reference on Chart Studio Cloud for hovertemplate.
  80. The shown name of the link.
  81. Sets the source reference on Chart Studio Cloud for label.
  82. Sets the color of the line around each link.
  83. Sets the source reference on Chart Studio Cloud for color.
  84. Sets the width (in px) of the line around each link.
  85. Sets the source reference on Chart Studio Cloud for width.
  86. An integer number [0..nodes.length - 1] that represents the source node.
  87. Sets the source reference on Chart Studio Cloud for source.
  88. An integer number [0..nodes.length - 1] that represents the target node.
  89. Sets the source reference on Chart Studio Cloud for target.
  90. A numeric value representing the flow volume value.
  91. Sets the source reference on Chart Studio Cloud for value.
  92. Sets the source reference on Chart Studio Cloud for meta.
  93. Sets the trace name. The trace name appears as the legend item and on hover.
  94. Sets the alignment method used to position the nodes along the horizontal axis.
  95. 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.
  96. Sets the source reference on Chart Studio Cloud for color.
  97. Assigns extra data to each node.
  98. Sets the source reference on Chart Studio Cloud for customdata.
  99. Groups of nodes. Each group is defined by an array with the indices of the nodes it contains. Multiple groups can be specified.
  100. 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.
  101. 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
  102. Sets the source reference on Chart Studio Cloud for align.
  103. Sets the background color of the hover labels for this trace
  104. Sets the source reference on Chart Studio Cloud for bgcolor.
  105. Sets the border color of the hover labels for this trace.
  106. Sets the source reference on Chart Studio Cloud for bordercolor.
  107. Sets the source reference on Chart Studio Cloud for color.
  108. HTML font family - the typeface that will be applied by the web browser. The web browser can only apply a font if it is available on the system where it runs. Provide multiple font families, separated by commas, to indicate the order in which to apply fonts if they aren't available.
  109. Sets the source reference on Chart Studio Cloud for family.
  110. Sets the kind of decoration line(s) with text, such as an under, over or through as well as combinations e.g. under+over, etc.
  111. Sets the source reference on Chart Studio Cloud for lineposition.
  112. Sets the shape and color of the shadow behind text. auto places minimal shadow and applies contrast text font color. See https://developer.mozilla.org/en-US/docs/Web/CSS/text-shadow for additional options.
  113. Sets the source reference on Chart Studio Cloud for shadow.
  114. Sets the source reference on Chart Studio Cloud for size.
  115. Sets whether a font should be styled with a normal or italic face from its family.
  116. Sets the source reference on Chart Studio Cloud for style.
  117. Sets capitalization of text. It can be used to make text appear in all-uppercase or all-lowercase, or with each word capitalized.
  118. Sets the source reference on Chart Studio Cloud for textcase.
  119. Sets the variant of the font.
  120. Sets the source reference on Chart Studio Cloud for variant.
  121. Sets the weight (or boldness) of the font.
  122. Sets the source reference on Chart Studio Cloud for weight.
  123. 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.
  124. Sets the source reference on Chart Studio Cloud for namelength.
  125. 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}" as well as %{xother}, {%xother}, {%_xother}, {%xother_}. When showing info for several points, xother will be added to those with different x positions from the first point. An underscore before or after (x|y)other will add a space on that side, only when this field is shown. Numbers are formatted using d3-format's syntax %{variable:d3-format}, for example "Price: %{y:$.2f}". https://github.com/d3/d3-format/tree/v1.4.5#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/tree/v2.2.3#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 sourceLinks and targetLinks are arrays of link objects.Finally, the template string has access to variables value and label. Anything contained in tag <extra> is displayed in the secondary box, for example "{fullData.name}". To hide the secondary box completely, use an empty tag <extra></extra>.
  126. Sets the source reference on Chart Studio Cloud for hovertemplate.
  127. The shown name of the node.
  128. Sets the source reference on Chart Studio Cloud for label.
  129. Sets the color of the line around each node.
  130. Sets the source reference on Chart Studio Cloud for color.
  131. Sets the width (in px) of the line around each node.
  132. Sets the source reference on Chart Studio Cloud for width.
  133. Sets the padding (in px) between the nodes.
  134. Sets the thickness (in px) of the nodes.
  135. The normalized horizontal position of the node.
  136. Sets the source reference on Chart Studio Cloud for x.
  137. The normalized vertical position of the node.
  138. Sets the source reference on Chart Studio Cloud for y.
  139. Sets the orientation of the Sankey diagram.
  140. Sets the maximum number of points to keep on the plots from an incoming stream. If maxpoints is set to 50, only the newest 50 points will be displayed on the plot.
  141. The stream id number links a data trace on a plot with a stream. See https://chart-studio.plotly.com/settings for more details.
  142. HTML font family - the typeface that will be applied by the web browser. The web browser can only apply a font if it is available on the system where it runs. Provide multiple font families, separated by commas, to indicate the order in which to apply fonts if they aren't available.
  143. Sets the kind of decoration line(s) with text, such as an under, over or through as well as combinations e.g. under+over, etc.
  144. Sets the shape and color of the shadow behind text. auto places minimal shadow and applies contrast text font color. See https://developer.mozilla.org/en-US/docs/Web/CSS/text-shadow for additional options.
  145. Sets whether a font should be styled with a normal or italic face from its family.
  146. Sets capitalization of text. It can be used to make text appear in all-uppercase or all-lowercase, or with each word capitalized.
  147. Sets the variant of the font.
  148. Sets the weight (or boldness) of the font.
  149. Assign an id to this trace, Use this to provide object constancy between traces during animations and transitions.
  150. Sets the value formatting rule using d3 formatting mini-languages which are very similar to those in Python. For numbers, see: https://github.com/d3/d3-format/tree/v1.4.5#d3-format.
  151. Adds a unit to follow the value in the hover tooltip. Add a space if a separation is necessary from the value.
  152. 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).