Chord 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.
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
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
Radius and Inner Radius
These are the inner and outer sizes of the nodes. The radius is a percentage of the chart display area and the inner radius is a percentage of the outer radius.
Padding
The padding between the chart box and the chart itself
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.
Enabled
When set to false, the nodes aren’t drawn but the space where they would be drawn remains.
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.
Collapsable
When set to true, the nodes will collapse down and any links from them will not be drawn. Only functions when clickable is set to true.
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.
Corner Radius and Inner Corner Radius
These define how rounded the inner and outer corners of the nodes are. Sizes are in pixels
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
Rotation
The rotation of the label is in degrees. The point of reference on the label for rotation is the center 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. Most 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 or all be a solid, defined colour.
Opacity
The base opacity of the link can be set.
Show Tooltip On
When the link tooltip has text set this property sets when to show it. Hover is when the mouse is over the link, hit is when it is clicked and always will have all links 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.
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