Chart Options

You can set various options and defaults on the chart itself by setting the options prop.

<Chart
  options={{
    backgroundColor: 'rgb(60, 60, 60)',
    iconFontFamily: 'Font Awesome 5 Free',
    overview: {
      visible: false
    },
    navigation: {
      position: 'se'
    }
  }}
/>

The options prop accepts an object with the following format:

backgroundColor

string default: 'white'

The color to use for the background of the chart itself.

backgroundGradient

array

Set to give the chart a linear background gradient. The gradient runs from top to bottom of the chart. To create a gradient you must define an array of at least two color/stop objects.

<Chart options={{
  backgroundGradient: [
    { color: 'yellow', stop: 0 },
    { color: 'red', stop: 1 },
  ],
}}/>

color

string

The color for the specified location.

The point at which the background color is set. A value of 0.4 would mean that the background takes on the specified color at 40% of the chart's height (the top of the chart is at 0%). If there are colors on either side of this stop, then the background color will transition linearly from/to these colors. We recommend using values between 0 and 1.

combo

object

Options to control combo behavior.

autoSelectionStyle

boolean default: true

When true, provides default combo selection behavior. Nodes and links that are selected and within combos or summary links, or connected to a combo, are brought into the foreground of the chart along with any neighbors they have. This includes showing the contents of summary links. Other items in the chart are faded. If chart items have fade set explicitly these items will not be altered.

controlColor

string

The color to use for the navigation and overview window control. Only the hue and saturation values of the color are used: the lightness is fixed.

controlTheme

'light' | 'dark' default: 'light'

The color theme of the navigation and overview window controls.

dragPan

boolean default: true

If true, drag operations will pan the chart automatically if the mouse or touch position moves near the edge of or outside the chart area. If false, the chart will not pan if the mouse or touch position moves near the edge of the chart area during a drag operation, and the drag will be canceled if the mouse moves outside the chart area.

fadeOpacity

number default: 0.2

The opacity level of faded items. In the range 0 to 1, where 0 is totally transparent.

fit

string or object default: 'auto'

Controls how the chart view should respond to changes. Note that these behaviors do not take effect if the view prop is set. Valid values are:

'all' - Fits all items to the viewport at the end of an update.
'auto' - Automatically adjusts the view during the update. This setting shows changes without disrupting their context.
'none' - Does not adjust the view during the update. Note that layouts may still adjust node positions relative to the chart.
'selection' - Fits the currently selected items to the viewport at the end of an update.
object - Fits the specified items to the viewport at the end of an update. Accepts a dictionary whose properties are valid chart items. Defaults to 'auto' if no valid items are passed.

handMode

boolean default: true

Controls the default behavior of navigation:

If true, dragging over the background pans the view.
If false, dragging over the background creates a selection marquee.

hoverDelay

number default: 150

The number of milliseconds delay before the onItemInteraction and onHover events are triggered.

iconFontFamily

string default: 'sans-serif'

The default font family to use for font icons, such as 'FontAwesome' or 'Octicon'. If the font isn't supported by the browser, or if none is set, 'sans-serif' is used.

imageAlignment

[pathOrName: string]: ImageAlignmentOptions

Sets the position and scale for images and font icons on nodes. The object accepts properties where property names are image or font icon paths and property values are the values to be adjusted.

When using images and font icons in label objects for node and annotation labels, image alignment is handled differently. See fontIcon and image.

<Chart options={{
  imageAlignment: {
    'fas fa-user': { size: 2 },
    '/assets/img/logo.png': { size: 1.5 }
  }
}}/>

Value

A dictionary where the id is the image path or icon name, and the value contains the following properties:

dx

number default: 0

Sets how far to move the icon horizontally. The value is a percentage from -50 to 50.

dy

number default: 0

Sets how far to move the icon vertically. The value is a percentage from -50 to 50.

size

number default: 0

The factor by which you want to resize the icon relative to its parent. Must be greater than 0.

labels

object

Options to control the appearance of labels on items.

fontFamily

string default: 'sans-serif'

The default font family to use, such as 'arial' or 'helvetica'. If the font isn't supported by the browser, or if none is set, 'sans-serif' is used.

legacyGlyphAndLabelOrdering

boolean default: false

If set to true, labels are drawn over glyphs. If false, glyphs are drawn over labels.

maxLength

number

The maximum character length of a node or link label before it is truncated. If set, labels are truncated to the length specified, and the last three characters are replaced with ....

offset

number

An integer to move the label text up or down. Useful only for certain fonts where the baseline is irregular (e.g. Open Sans).

showOnHover

boolean default: true

If true, hovering over a node or a link reveals the full length of all their truncated labels.

links

object

Options to control the appearance of links.

arrowSize

'normal' | 'small' | 'large' | 'xlarge' default: 'normal'

Controls the size of arrows on links. Note that arrowhead size is proportional to the link width.

avoidLabels

boolean default: true

Whether link ends should avoid node labels. Does not apply to labels positioned by numeric values in the positions object.

endSpacing

'loose' | 'tight' default: 'tight'

Controls the spacing between nodes and link ends connected to them. If set to 'loose', there is a small gap between the node and the link end. Also affects the spacing between node subjects and annotation lines.

glyphOrientation

'along' | 'horizontal' default: 'horizontal'

Controls the orientation of multiple glyphs on links without labels. If set to 'along', glyphs are drawn along the link. If set to 'horizontal', glyphs are drawn horizontally.

gradientTransition

number default: 0.75

Only for links with a color gradient. Controls the size of the fraction at the midpoint of the link where the color transition occurs. The value is between 0 and 1, with 0 providing an immediate transition between colors. The rest of the link is drawn with solid colors.

inlineLabels

boolean default: false

Rotates labels and glyphs on links to match the link orientation. Note that enabling inlineLabels overrides the glyphOrientation option.

marqueeSelection

'center' | 'ends' | 'off' default: 'center'

Controls how links are selected when dragging a selection marquee.

logo

object

Settings for the logo to be displayed in a corner of the chart.

image

string

The URL of the logo to be displayed, or null for no logo. On Retina devices, ReGraph will also check for a double-resolution @2x version of the logo, e.g. 'path/to/images/[email protected]'.

position

'ne' | 'se' | 'sw' | 'nw' default: 'ne'

The position of the logo.

x

number default: 0

The horizontal offset in pixels from the logo's default position.

y

number default: 0

The vertical offset in pixels from the logo's default position.

map

object

Specifies options for the Leaflet map.

<Chart options={{
  map: {
    tiles: 'http://example.com/path/{z}/{x}/{y}.png'
  }
}}/>

leaflet

object

Pass options directly into the Leaflet constructor. See the Leaflet API for more details.

tiles

string | object

An option to set the url template for map tiles. Accepts either a string in the form of http://example.com/path/{z}/{x}/{y}.png, or an object in the Leaflet TileLayer options format with an additional url property. If the url template isn't set, OpenStreetMap is used as a default tile provider. If set to null, the tile layer isn't created.

maxItemZoom

number default: 4

Sets the maximum zoom for items, from minZoom to 4. Using the default value is suggested for optimal result.

minZoom

number default: 0.05

Sets the minimum zoom for the view. Use a smaller value to allow the chart to be zoomed out further. The value can be from 0.001 to 1.

object | boolean

An object whose properties are the settings for the navigation controls. For brevity, you can pass a value of false to hide the navigation controls.

'ne' | 'se' | 'sw' | 'nw' default: 'nw'

The position of the navigation controls.

boolean default: true

Whether the navigation controls are displayed.

number default: 0

The horizontal offset in pixels from the navigation controls' default position.

number default: 0

The vertical offset in pixels from the navigation controls' default position.

When the label is an array of objects and label's backgroundColor or color is set
When the label is an object, backgroundColor or color is set, and position is set

color

string default: 'rgb(255, 109, 102)'

Adds the following selection styles:

Nodes, combos: a colored halo
Links: a selection marker
Node, combo, link labels: a colored background