Skip to main content

Circular Sankey

First Steps

Select the sheet or parameter you want to use for the Sankey diagram. The list shows all sheets added to the dashboard. Click the desired sheet name. Optionally, select a second sheet for node customizations from the dropdown. Click Save to confirm your selection.

Data Format

Data must include three columns: source, target, and value for each link. You can add extra fields to further customize the Sankey. A second sheet can be used for node customizations, which should have a column with node names and other columns for customizations. Node names must match those in the first sheet.

Customization

Sankey customization is performed via the settings button. Three customization methods are available:

  • Direct: Enter a value directly in the window.
  • Parameter: Select a parameter; its value defines the characteristic.
  • Field: Select a field in the sheet; its values define the element aspects.

Customizations may be applied to both links and nodes.

NameDefaultAccepted ValuesAdditional Informations
background colorwhiteHTML names, hexadecimal, rgb. See color names and codesEx: LightBlue, #ADD8E6, rgb(173, 216, 230).
link colorcolorHTML names, hexadecimal, rgb. See color names and codesEx: LightBlue, #ADD8E6, rgb(173, 216, 230).
palettenonetableau 10, tableau 20, colorblind, seattle grays, traffic light, miller stone, superfishel stone, nuriel stone, jewel bright, summer, winter, green-orange-teal, red-blue-brown, purple-pink-gray, hue circle, custom hue circle
speedspeedNumbersDefines speed of animated dash
alertalerttrue, falseIf true, link blinks in red
alignmentjustifyjustify, left, right, center
link typearrowsnone, arrows, animated dash, full arrows
degraded colorfalsetrue, falseRequires node color to be defined
percentagenonetrue, falseDisplay percentages at source, target, or both
display valuesfalsetrue, false
adaptive labelsfalsetrue, falseIf true, labels adapt to the link size, otherwise size is fixed.
font size10NumbersThe font size of percentages are always 2px thinner than the font size.

Node Customization Options

NameDefaultAccepted ValuesAdditional Informations
node positioningautomaticautomatic, manualIf manual, node positions must be defined.
node color propagationnonesource, target, noneDefines how node colors are propagated from link's colors.
node shaperectanglerectangle, arrow
add imagesnonenone, from file explorer, from file catalog, from field valuesSee Image Catalog for available images.
node colorcolorHTML names, hexadecimal, rgbEx: LightBlue, #ADD8E6, rgb(173, 216, 230).
node palettenonetableau 10, tableau 20, colorblind, seattle grays, traffic light, miller stone, superfishel stone, nuriel stone, jewel bright, summer, winter, green-orange-teal, red-blue-brown, purple-pink-gray, hue circle
node alertalerttrue, falseIf true, node blinks in red
horizontal sortfalsetrue, falseSort numbers for horizontal grid
vertical sortfalsetrue, falseSort numbers for vertical grid

Filtering

Two types of filters are supported: link filters and node filters.

Filter Configuration Procedure

  1. Click the filter button.
  2. Select Target Sheet: Choose the sheet where you want to apply the filter.
  3. Choose Source and Target Field: Set the source and target fields. The value from the source field will be passed to the target field.
  4. Save: Click Save to confirm the filter.

Filter Application

Click a node to apply the filter to the target sheet. Hold Ctrl and click to select multiple elements.

Freeing Filters

To remove the filter:

  • Click the selected element
  • Click an empty part of the graph
  • Click the free filter button

Filter Removal

To delete a filter, check its row in the table and click Remove.

Add Images

If you set the add images field to anything other than "none," a new button appears in the extension. Click it to open a window where you can map images to a field. Choose images from the file explorer, the file catalog, or field values. For field value mode, field values must match image names. Images must be under 20KB. Enable Dark mode to switch image color from black to white. You can set a default image in the first row; any undefined value uses the default. See the Image Catalog for available images.

Node Sizing

Adjust node width with the horizontal + and - buttons. Change node height with the vertical + and - buttons.

Step by step tutorial

Create a sheet with source, target, and value columns. Optionally, create a second sheet for node customizations. The second sheet must have a column with node names and other columns for customizations. Node names must match those in the first sheet. Add both sheets to the dashboard (they can be hidden).

To customize nodes, use the settings as shown:

In this example, to color the links, the option degraded color is set to true and the node colors are used to create the link colors.

To add icons to nodes, set the add images field to a value other than "none" (for example, "from file catalog"). After saving, an image icon appears in the extension's top right corner. Click it to open the image selection and mapping window.

To set up a filter, click the filter icon. You can create both link and node filters. Select the target sheet, source field, and target field, then save. The filter is now active. Click a node or link to apply the filter. Hold Ctrl and click to select multiple elements.

To manually position nodes, set node positioning to "manual". Then, click and drag nodes to the desired location.

Adjust node width and height using the horizontal and vertical + and - buttons.