Data Formats

The fill color. Defaults to gray for nodes and links and rgba(0, 0, 0, 0) for annotations.

Used to store custom data on an item. Used by graph functions, layouts and combos.

An array of objects describing the glyphs shown on the item.

Defines a border around a node. Set a color property to make a border appear.

<Chart items={{
    node1: {
      border: {
         color: 'maroon'
      }
    }
  }}
/>

An object describing the position of the node on the Leaflet map.

Crops an image to a cutout circle. Affected by cross-origin restrictions and does not apply to font icons.

An object describing a 'donut' border of segmented sections around the node. Doesn't apply to nodes with shape set to 'box'. If both donut and border are set then donut takes precedence.

Fades the item into the background. Can be used in the setStyle function passed to onItemInteraction to foreground items.

The font icon to use on the node. Use imageAlignment for positioning and scaling.

<Chart items={{
   node1: {
     fontIcon: {
       text: 'fas fa-user', // or '\u{f007}'
       fontFamily: 'Font Awesome 5 Free',
     },
   },
   node2: {
     fontIcon: {
       text: 'person',
       fontFamily: 'Material Icons',
     },
   },
 }}
/>

Adds halos to the node. Halos are concentric circles which are drawn around nodes. A node can have up to ten halos.

The URL to the node image. Unavailable images are shown as a blue X. If requesting images directly from external domains, see Cross-Origin Images.

Defines one or more labels for a node as described in Node Label. Labels can be styled using an array of one or more objects which is in beta from v4.0. See also Node Styling.

The node's shape. Can also be set to an object with parameters in world units to set a rectangular node.

Scales the node size by an enlargement factor. Does not apply to nodes with width and height set in the shape property.

Associates timestamps with the item. A timestamp can represent a single moment or a period of time.

<TimeBar items={{
    node1: {
      times: [{ time: new Date(2019, 4, 1) }],
    },
    node2: {
      times: [
        {
          time: {
            start: 1554713715658,
            end: 1558624743356,
          },
        },
      ],
    },
  }}
/>

The label background color. Ignored if image is set.

Whether the label should be displayed in bold font.

The border around the label.

The color of the label font.

The font family to use for the label. Defaults to the fontFamily property of the labels options in the chart's options prop.

The label font icon. Use position and margin for positioning and offset and fontSize for scaling. If text is also set, only fontIcon is shown. If image is also set, fontIcon is ignored.

The font size (px) of the label. Set to 'auto' to size the font automatically depending on the node size. Ignored if image is set.

The URL to the label image. To specify image size, set both maxHeight and maxWidth. To set its position and offset within the node, use position and margin. Also supports border but other label customization properties are ignored.

The space between the label and the next label or the parent node. Use a number for equal margin on all sides, a string (separated by spaces) containing two, three or four numbers, an array (separated by commas) containing two, three or four numbers, or an object setting values for individual properties such as top or right.

The height of the label container. For non-image labels, use this when fontSize is set to 'auto' to set the maximum height of the text. For image labels, if maxWidth is also set, specifies the height of the image.

The width of the label container, defaulting to that of the parent node. For non-image labels, set this option when textWrap is set to 'normal' to reduce the maximum text width before a line break, or when fontSize is set to 'auto' to set the maximum text width. For image labels, if maxHeight is also set, specifies the width of the image.

The minimum height of the label container. It will increase to fit the content if necessary. When set to 'stretch', it fills the whole height of the parent node. Ignored if image is set.

The minimum width of the label container. It will increase to fit the content if necessary. When set to 'stretch', it fills the whole width of the parent node. Set to a number if textWrap is set to 'normal' to increase the minimum text width before a line break. Ignored if image is set.

The space between the label border and the content inside the label. Use a number for equal padding on all sides, a string (separated by spaces) containing two, three or four numbers, an array (separated by commas) containing two, three or four numbers, or an object setting values for individual properties such as top or right. Ignored if image is set.

The position of the label's top left corner relative to the top left node corner. Can either be a compass point string ( 'n', 'ne' etc.) to place the label outside the node, or an object with horizontal and/or vertical properties to place the label inside the node.

Default position for nodes and closed combos is in the middle and centre of the node. Default position for open combos is outside and below the combo.

The label text. If either fontIcon or image is set, text is ignored.

The alignment of the content inside the label. Applies when labels are not sized automatically to their content due to minHeight and/or minWidth options set. Ignored if image is set.

Text wrapping inside the label. By default, no text wrapping is used. If set to 'normal', the label content is wrapped on whitespaces created by the space bar. To control line breaks, use minWidth / maxWidth, or the '\n' or '\r' characters. To set a fixed width for a wrapped label, set both minWidth and maxWidth to the same value.

Sets the appearance of the link at the id1 end.

Sets the appearance of the link at the id2 end. Same options available as for end1.

Fades the item into the background. Can be used in the setStyle function passed to onItemInteraction to foreground items.

Sets a flow animation on the link. Shown as dashed, overriding the lineStyle property.

The identity of the node at one end of the link.

The identity of the node at the other end of the link. This may be the same as id1 to create a "self link".

Places a label at the middle of the link.

The style of the link line.

The shape of the path taken by the link. See the Link Shapes documentation.

The priority of the link. Links with larger priority values are drawn on top of links with lower values. This is in beta from v5.1.

Associates timestamps with the item. A timestamp can represent a single moment or a period of time.

<TimeBar items={{
    node1: {
      times: [{ time: new Date(2019, 4, 1) }],
    },
    node2: {
      times: [
        {
          time: {
            start: 1554713715658,
            end: 1558624743356,
          },
        },
      ],
    },
  }}
/>

The width of the link line. Arrowheads, if present, will enlarge to match the width.

The border around the annotation.

The style of the connector between the annotation and the annotated subject(s). The connector has three parts:

• A line towards the subject, or multiple lines if there are multiple subjects.
• The decoration at the subject end of the line(s). Can be set in the subjectEnd option for any annotations.
• A container around the subject(s). Can be set in the container option for node and combo annotations.

Defines one or more annotation labels as described in Annotation Label. Annotation label supports the same properties as Node Label and can be styled using an array of one or more objects which is in beta from v4.0. See also Node Styling.

The annotation's dimensions in view units. Annotations are always rectangular.

The id(s) of the item(s) to which the annotation refers. This can be the id, an array of ids, or a dictionary of the ids with truthy values. Set to an empty array for annotation without subjects.

Note that subject cannot be changed by the onItemInteraction event.

The label background color.

Whether the label should be displayed in bold font.

The border around the label.

The color of the label font.

The font family to use for the label. Defaults to the fontFamily property of the labels options in the chart's options prop.

The label font icon. Use position and margin for positioning and offset and fontSize for scaling. If text is also set, only fontIcon is shown. If image is also set, fontIcon is ignored.

The font size (px) of the label. Set to 'auto' to size the font automatically depending on the annotation size.

The URL to the label image. To specify image size, set both maxHeight and maxWidth. To set its position and offset within the node, use position and margin. Also supports border but other label customization properties are ignored.

The space between the label and the next label or the parent annotation. Use a number for equal margin on all sides, a string (separated by spaces) containing two, three or four numbers, an array (separated by commas) containing two, three or four numbers, or an object setting values for individual properties such as top or right.

The maximum height of the label container. Use this option when fontSize is set to 'auto' to set the maximum height of the text.

The maximum width of the label container. It defaults to the parent annotation width. Set this option when textWrap is set to 'normal' to reduce the maximum text width before a line break, or when fontSize is set to 'auto' to set the maximum text width.

The minimum height of the label container. It will increase to fit the content if necessary. When set to 'stretch', it fills the whole height of the parent annotation.

The minimum width of the label container. It will increase to fit the content if necessary. When set to 'stretch', it fills the whole width of the parent annotation. Set to a number if textWrap is set to 'normal' to increase the minimum text width before a line break.

The space between the label border and the content inside the label. Use a number for equal padding on all sides, a string (separated by spaces) containing two, three or four numbers, an array (separated by commas) containing two, three or four numbers, or an object setting values for individual properties such as top or right.

The position of the label's top left corner relative to the top left annotation corner. Can either be a compass point string ( 'n', 'ne' etc.) to place the label outside the annotation, or an object with horizontal and/or vertical properties to place the label inside the annotation.

The label text. If both text and fontIcon are set, text is ignored.

The alignment of the content inside the label. Applies when labels are not sized automatically to their content due to minHeight and/or minWidth options set.

Text wrapping inside the label. By default, no text wrapping is used. If set to 'normal', the label content is wrapped on whitespaces created by the space bar. To control line breaks, use minWidth / maxWidth, or the '\n' or '\r' characters. To set a fixed width for a wrapped label, set both minWidth and maxWidth to the same value.

The glyph position relative to the node or combo. Values are integer angles measured clockwise from north (in the range 0-359). Multiple glyphs on the same node or combo must be positioned using the same positioning property (either angle or position).

Applies a blink animation to the glyph.

Applies a border to the glyph. Borders on image glyphs without a glyph background are not supported.

The glyph fill color. If set for image and font icon glyphs, images and font icons are shown inside the glyph. If not set, images and font icons also replace the glyph background.

The font icon to use on the glyph. Use imageAlignment for positioning and scaling.

The URL of the image to use for the glyph. The image can be any size, but 64X64 should be adequate.

Specifies the label of the glyph. If a label is specified and a glyph fill color is set, the a label take precedence over images and font icons on the same object.

The position of the glyph relative to the node or combo. Values are compass points. Multiple glyphs on the same node or combo must be positioned using the same positioning property (either angle or position).

Sets the distance from the center of the node or closed combo at which the glyph is drawn. Only available when the glyph's angle is defined. If specified, link ends will no longer avoid the glyph.

Sets an enlargement factor on the glyph.

When the type of sub-item is 'label', 'glyph', 'donut' or 'halo', specifies which label, glyph, donut segment or halo in the array to access. Note that the 'index' is not required when there is only one 'label' sub-item.

function onClick({id, x, y, button, subItem}) {
  if (subItem && subItem.type === 'glyph') {
     console.log(subItem.index); // 0 for first glyph, 1 for second, etc
   }
}

The end of the link the sub-item is attached to. Only set if the type is 'arrowhead', 'glyph' or 'label'.

The subjects of the annotation the sub-item is a part of. Only set if the type is 'container' or 'connection'.

The type of the sub-item:

• 'donut', 'halo' - node decorations
• 'label', 'glyph' - node, link and annotation decoration
• 'arrowhead' - arrows on link ends
• 'container' - the container surrounding annotation subjects
• 'connection' - the line and subject end of the annotation connector

If an alt key was held down when the event occurred.

If a consistent control key (ctrl key, cmd key on MacOS) was held down when the event occurred.

If a control key was held down when the event occurred.

If the meta key was held down when the event occurred.

If a shift key was held down when the event occurred.

Sets the arrangement of items inside an open combo. Accepts a string with the arrangement name or an object to also set additional options.

Defines a border around the combo. Defaults to a grey border for open combos, and no border for closed combos. See node border.

Sets the style of the closed combo. All Node properties are supported.

<Chart onCombineNodes={({setStyle}) => {
  setStyle({
    // open combo will be white
    color: 'white',
    closedStyle: {
      // closed combo will be blue
      color: 'blue',
    },
  });
}}/>

The fill color. Defaults to rgba(240,240,240,0.8) for open combos, and grey for closed combos.

Used to store custom data on a combo. Used by graph functions and layouts.

Fades the combo into the background. Defaults to false, unless all the children are faded causing the default to be true.

An array of objects describing the glyphs shown on the combo. Glyphs are not inherited between open and closed combos.

If arrange is set to 'grid', this can be set to an object in the form of { rows: number } or { columns: number } to set the row/column dimension of the grid.

Deprecated since v5.0. Use the gridShape option in the arrange property instead.

Overrides the default id of the combo.

Defines one or more labels for a combo. Combo labels can be styled using an array of one or more objects which is in beta from v4.4. See also Node Styling.

Closed combos with no label inherit the open style label if the open label is an object. Default position for nodes and closed combos is in the middle and centre of the node. Default position for open combos is outside and below the combo.

Opens the combo so that its children are visible.

Scales the closed combo size by an enlargement factor. When the combo is open, only glyphs and labels are scaled.

Display the summary link's contents. You can supply a boolean to hide or show all child links, or supply a dictionary with truthy values for each child link you want to display.

Override the default id of the summary link.

Display the summary link.

Creates a temporary link dragger which will draw a link between the target node and the cursor.

Set to false to drag child nodes independently of their parent combos.

The type of drag.