Chart Events

In 3.0 we deprecated the onChart- events.

Chart events notify you about:

Internal state changes - for example, when a layout is run and positions update. These are passed as an object to the onChange prop with details of the change.
User interactions - for example, when the user clicks on a node. User event handlers are passed a set of arguments with more information about the event.

If present, calling preventDefault() in an event's handler will prevent the default behavior.

Events generally occur on items (i.e., nodes, links and annotations), but they can can also be triggered against parts of items, or sub-items. See Styling Chart Items for more details about sub-items.

The chart also supports standard element events, including onKeyDown, onFocus etc.

<Chart
  items={{this.state.items}}
  onClick={({id}) => { console.log(`User clicked on ${id}`); }}
/>

onChange(change)

Invoked whenever the chart triggers a change of state. Typically caused by layouts and user interactions.

Parameters

change: object; An object describing the change.

onClick(props)

Invoked when the user clicks or taps on the chart surface.

Default actions depending on the clicked item:

Node or link: Selects the item (adds to selection if consistentCtrl is pressed).
Background: Deselects all.
Navigation controls: Performs the navigation action.
Overview icon: Opens or closes the overview window.

To listen for right click, use the onContextMenu event.

Parameters

props: object

onCombineLinks(summaryDefinition)

Invoked each time a summary link is created or updated. You can adjust the style of the summary link by calling setStyle with an object with style information. You can optionally include a string id property if you wish to use your own identifiers instead of the default. These must be unique.

<Chart onCombineLinks={
  (summaryDefinition) => {
     const { links, id1, id2, id, setStyle } = summaryDefinition;
     setStyle({
       // insert any styling properties
       width: Math.sqrt(Object.keys(links).length)
     });
  }
}/>

Parameters

summaryDefinition: object; An object describing the summary link and its contents.

onCombineNodes(comboDefinition)

Invoked each time a combo is created or updated in one of the following ways:

The combine prop is set to a new object.
The data properties used in the properties array change on any chart node.
A node with data properties used in the properties array is added or removed from the chart.
A node change inside the combo triggers a combo resize (e.g. by node resize, node shape change or label change).

<Chart onCombineNodes={
  (comboDefinition) => {
     const { nodes, combo, id, setStyle } = comboDefinition;
     setStyle({
       // insert any styling properties
       open: false,
       label: {
         text: combo.country,
       }
     });
  }
}/>

Parameters

comboDefinition: object; An object describing the combo and its contents.

onContextMenu(props)

Invoked on a right click, long press or left click + Ctrl for MacOS.

Default action: Suppresses the onClick event.

Parameters

props: object

onDoubleClick(props)

Invoked when the user double-clicks or double-taps on the chart surface.

Parameters

props: object

onDrag(props)

Invoked continuously while the cursor moves during a drag.

Parameters

props: object

onDragEnd(props)

Invoked when the drag is finished and pointer is released, or when the drag is canceled.

Default actions depending on the drag type:

'node' or 'link' - Moves selected items to their final positions. Prevent the default action to snap the drag back.
'marquee' - Updates the chart selection.
'pan' or 'overview' - Accepts the final viewport position.
'create-link' - Creates the link.

Parameters

props: object

onDragOver(props)

Invoked when the cursor dragging a node or an annotation moves over another item during a drag. Switch animation off during drag events to ensure they complete before associated animations start.

Parameters

props: object

onDragStart(props)

Invoked when a drag is started. Switch animation off during drag events to ensure they complete before associated animations start.

Default action: Creates a dragger. Prevent the default action to disable dragging.

Parameters

props: object

onHover(props)

Invoked when the user hovers over an item for a specified time. You can modify the delay in the hoverDelay Chart option. Only invoked when the hover id changes. To apply custom styling when an item is hovered over, consider using onItemInteraction.

Parameters

props: object

onItemInteraction(props)

Invoked each time an item or sub-item is hovered over or selected. Use hoverDelay to modify the event delay.

If both onItemInteraction and selection option are used to style an item, selection option takes precedence. Set it to false to override this.

The interaction styling set by the event's setStyle function only affects the properties/sub-properties specified and it is cleared once the user interaction is over.

onLinkAggregation(aggregateLinkDefinition)

Beta

Invoked each time an aggregate link is created, deleted or updated. The update occurs when a child link is added or removed, a child link's arrow changes, or when the custom property in data object used for aggregating links is changed. To style an aggregate link, call setStyle with an object with style information.

The onLinkAggregation event is in beta from v4.4.

<Chart onLinkAggregation={
  (aggregateLinkDefinition) => {
     const { links, id1, id2, id, aggregateByValue, change, setStyle } = aggregateLinkDefinition;
     setStyle({
       // insert any styling properties
       width: Math.sqrt(Object.keys(links).length)
     });
  }
}/>