Chart Props
Controls whether one or more links between a pair of nodes are displayed as an aggregate link. Set to true to aggregate all the links between each pair of nodes.
Setting aggregateLinks to a new object calls the onLinkAggregation event handler, allowing you to update the aggregate link styles.
Note that:
- Graph functions ignore aggregate links and calculate the results based on the unaggregated chart.
- To background or hide aggregate links, you need to background or hide all of their child links.
Aggregate links are in beta from v4.4.
aggregateBy
required string The key of the custom data on the child link's data property to be used to aggregate links together. One aggregate link is created between two nodes for each value of the data. Remove the data property or set it to undefined to prevent the link from being aggregated.
boolean
default: false Controls whether separate aggregate links are created for each of the directions the child links could have.
object Controls animations on the chart.
boolean
default: true Animates transitions between chart states. Set to false during drag events to ensure they complete before associated animations start.
number
default: 250 The total duration in milliseconds in which animations should run. This time is shared between all animations on a particular update.
A dictionary containing positions of annotations. There are two ways of positioning:
- Subject-relative positioning using the
angleanddistanceproperties - World-coordinate positioning using the
xandyproperties
Value
An object representing an annotation's position.
string | number
default: 'n' In subject-relative positioning, the angle relative to annotation subject(s). Use a compass point value ( 'n', 'ne' etc.) or integer degrees clockwise from the top (in the range 0-359).
number
default: 20 In subject-relative positioning, the distance between the annotation and its subject(s) in view coordinates.
x
required number In world-coordinate positioning, the horizontal coordinate.
y
required number In world-coordinate positioning, the vertical coordinate.
string If the chart receives a className, it will not apply any default styles. We recommend styling the chart's parent element, rather than passing a className to the chart itself.
object Specifies how nodes should be grouped into combos. Defines a hierarchy of properties on the data object to combine by, and specifies how deeply nodes should be combined within this hierarchy.
Setting the combine property to a new object will cause the onCombineNodes and onCombineLinks event handlers to be called, allowing you to update the styles of all combos and summary links.
<Chart
combine={{
// Combine items first by City, then by State, then by Country
properties: ['City', 'State', 'Country'],
// Combine items only one level deep, i.e. just by City
level: 1
}}
/> number The combo nesting level. A value of 0 means no nodes will be combined, 1 combines nodes using the first property in the properties array, 2 combines by the first and then the second properties in the array, and so on. If level is not specified then ReGraph uses all properties in the properties array.
properties
required array of strings The hierarchy of properties which are used to control combos. These properties come from the data property of nodes. Nodes with matching property values are combined into a single combo that represents the property value itself. The first property in the array is the deepest/innermost combo, and the last is the outermost combo.
'rectangle' | 'circle'
default: 'circle' The shape of combos.
[id: string]: Node | Link | Annotation A dictionary of nodes, links and annotations, where each property is an item id and each value is the definition of that item.
Value
An object describing a node, link or an annotation.
object The currently active layout, used to position any nodes without an entry in the positions object. Setting this will run a layout and may cause node positions to change.
Controls the shape of links. Most effective with sequential layouts. Curved links will join nodes in a way that aligns with the orientation property. Deprecated since v4.5. Use linkShape instead.
string The name of the custom property on the node's or combo node's data property that defines which level the node/combo belongs to in the radial or sequential layout. The property must contain a numeric value, where the lowest number is the center or top respectively.
If both level and top are specified, level is used.
- 'radial' must have either
levelortopspecified. - 'sequential' assigns levels automatically if neither are specified.
'angled' | 'curved' | 'direct'
default: 'direct' The default shape for the path taken by links. The direction of 'curved' and 'angled' links is inferred from orientation. Can be overridden using linkShape for open combos or linkShape for individual links. See the Link Shapes documentation.
'angled' links are in beta from v5.1.
'organic' | 'sequential' | 'structural' | 'radial' | 'lens' | 'standard' | 'tweak'
default: 'organic' The layout name to apply. 'Standard' and 'tweak' layouts are deprecated since 4.0.
string | object When the layout name is 'sequential', specifies the order of nodes/combos within the same layout level of a connected component in the chart. Any disconnected nodes or combos are ignored.
string The key of the custom data value on the node's data property that orders the items within the same level in sequential layout. When specified, items are ordered alphanumerically and in the descending order unless sortBy is also set.
'ascending' | 'descending'
default: 'descending' The direction of ordered items.
'left' | 'right' | 'up' | 'down'
default: 'down' The orientation of sequential layouts.
'rectangle' | 'circle' | 'aligned'
default: 'circle' | 'aligned' The packing mode to arrange subgraphs. Not used by 'lens'. The 'aligned' packing is only available for sequential and it's the default option for this layout.
object The positioning of nodes that share the same neighbors and level in the sequential layout. If property is set in orderBy, stacking only applies to nodes also sharing the same property value.
'grid' | 'none'
default: 'none' If set to 'grid', four or more same-level nodes with identical connections are stacked in a grid.
number
default: 1 The spacing between levels in sequential layout. Values must be positive.
'auto' | 'equal'
default: 'equal' The type of spacing between levels in sequential layout. Set to 'auto' if individual levels contain unevenly sized items (nodes or combos) to optimize use of space and get more even distribution of levels.
number
default: 5 The spacing between nodes, with higher values making nodes closer. Ranges from 0-10.
string | array of strings A node id or an array of ids that should be at the top of a sequential layout or in the center of a radial layout. Components without top specified are unchanged during the layout but can be arranged by packing.
If both level and top are specified, top is ignored.
- 'radial' must have either
levelortopspecified. - 'sequential' assigns levels automatically if neither are specified.
boolean
default: false Set to true to display a Leaflet map. Note that Leaflet must be available in the global scope.
object Specifies options on the Chart. See Chart Options.
[nodeid: string]: PositionsOptions A dictionary containing positions for each node and combo in the chart. Passing an empty object runs a new layout and returns new positions via the onChange handler. For organic layout, passing positions manually fixes these nodes in the chart even when a layout is run.
Value
An object representing a node or combo's position in world coordinates.
[id: string]: boolean A dictionary with a truthy property for each selected item.
Value
Indicates that an item should be selected by the chart. Note that annotations cannot be selected.
object Standard styling properties for the element. We recommend styling the chart's parent element, not the chart itself. Default is:
{
position: 'relative',
height: '100%',
minHeight: '100px',
width: '100%',
} object Settings to precisely control the view of the chart (note that all properties must be specified).
Chart Mode
required unknown