Sankey Diagram Component Properties

Data Source

Data

The data property for a Sankey diagram is an array of objects describing either a single node or a full link. The three main properties used are the “from”, “to” and “value” properties that can be redefined in the bindings property under dataSource. As long a data point has either a “from” or “to” property, it will be drawn on the diagram.

Nodes on the diagram are drawn in the order encountered in the data array. For example, if the first three data points are {"from":"B","nodeColor":"#f00"},{"from":"A","to":"C","value":10},{"from":"B","to":"D","value":15} then the B to D link is drawn above the A to C link because although the B to D link was defined later, the B node was encountered first.

Each link can also have sub data on the “sub” property including links in the sub data. If any links have sub data, clicking on that link will replace the current displayed data with that sub data and a breadcrumb navigation menu is available in the top left.

Other properties can be added to control the appearance of the nodes and links. The documentation on the property fields available is here.

Node Info

As well as using the property fields on the main data property they can be added to the nodeInfo property. Each data point needs a property called name matching the node the properties are going to affect. The property fields are the same as used for the data property.

Bindings

Using the bindings properties, the names of the “from”, “to” and “value” bindings on the data property can be redefined.

Disable Drill Down

If there is sub data on any data points this will disable the data being replaced when a link is clicked and remove the navigation bar.

Insert Example Data

When the boolean trigger is tripped a default set of data is put into the data, nodeInfo and bindings properties.

Chart Display

Display Horizontal

Sets’s whether the links flow left to right or top to bottom. The node width property only affects the node when in horizontal orientation the same as node height only affects the node when in vertical orientation.

Sort Nodes By

Instead of the default sorting, node can instead be sorted by name or value. This will not change how colours are assigned or the IDs of the links, only the order they are drawn on the diagram.

Node Padding

The default padding in between the nodes on each level

Padding

The padding between the chart box and the chart itself

Link Trace

If this property is set to true, when a link is hovered over all links in any paths from that link in both directions to the ends of the chart will have their opacity changed to the linkTraceOpacity property.

Link Trace Opacity

The opacity of any link highlighted when linkTrace is true. If set to the same value as the link template opacity, no change will be seen.

Colors

As nodes are encountered in the data property, they are assigned a colour from this array. When the end of the array is reached it loops back to the beginning. It is reccommended to have at least five different colours. For help with picking a set of colours this page has some great information.

Background

The background of the chart can be either transparent (default), a solid colour or a gradient. The opacity of the background can also be set. Gradient background can either be linear or radial. Linear gradients can have their rotation set while radial gradients can have their center position set. The colours for a gradient background are supplied as an array of hex codes.

Chart Titles

A chart can have a title and/or a subtitle. Both can have the colour, size, font weight and padding adjusted.

Node Template

The node template hold all of the default values to be used when creating nodes on the diagram. Most of these can be overriden with properties on the data points. Documentation for these property fields can be found here.

Clickable

When set to false, disables the onClick event for the node.

Draggable

When set to true, nodes can be moved around by clicking and holding on them. The new position is not preserved and when the diagram redraws for any reason nodes will be reset to their original position. Setting clickable to false does not stop them from being draggable if this is true.

Height and Width

The node width property only affects the node when in horizontal orientation the same as node height only affects the node when in vertical orientation.

Show Tooltip On

When the node tooltip has text set this property sets when to show it. Hover is when the mouse is over the node, hit is when it is clicked and always will have all nodes display their tooltip.

Border

The border width, opacity and colour can be set. The dash pattern can also be set. More information about the dash pattern can be found at this page.

Node Label

Location and Rotation

For the locationX and locationY properties, 0.5 is the center of the node and 0 and 1 are the relevant edges. The properties can be set outside this range to move the label outside of the node. The rotation of the label is in degrees. The point of reference on the label for location and rotation is the middle left of the label.

Max Width, Truncate Label and Wrap Label

This is the maximum width is how much of the label to show before it is truncated or wrapped if either of those options are set. Truncation and wrapping will only happen at the end of words, never in the middle of one.

Appearance

The labels colour, font weight and size can all be set.

Link Template

The link template hold all of the default values to be used when creating links on the diagram. All of these can be overriden with properties on the data points. Documentation for these property fields can be found here.

Color Mode

The colour for the link can be set to take the colour of the node it is coming from, take the colour from the node it is going to, be a gradient between the colours of the nodes at either end or all be a solid, defined colour.

Opacity and Hover Opacity

The base opacity of the link can be set as well as the opacity when hovered over when link tracing is not on.

Tension and Control Point Distance

The tension is how curvy the link will be and the control point distance is how far along the link will go before it turns.

Border

The border width, opacity and colour can be set. The dash pattern can also be set. More information about the dash pattern can be found at this page.

Show Middle Line

The middle line is a fixed width line that will display in the middle of the link. It’s colour, width, opacity and dash pattern can all be set. If the link is set to 0 opacity, the middle line will still show if set to true. More information about the dash pattern can be found at this page.

Tooltips

Background

By default, the tooltips will get their background colour from the object they are associated with and the font colour will be set accordingly. If the getFillFromObject property is set to false they will all instead be the color of the color property and take their font colour from the font.color property. The font weight and size can be set independant of where the tooltip gets its colour from.

Tooltip Text and Tooltip HTML

The text for the tooltip can be set using either a formatted text property or a HTML property. The HTML will take priority for on the display of the diagram but will not appear on any exported images. If exporting is required, it is recommended that the tooltipText property is used. Any property of the link or node can be accessed through [] in text or {} in html strings.

Export

An export menu can be turned on and it’s position can be adjusted to be in any of the four corners. The following formats are available for export:

  • Image: PNG, JPG, SVG, PDF
  • Data: JSON, CSV, XLSX, HTML, PDF
  • Print
Sidebar