HTML configuration and layouts

createRelationGraph(host, config) accepts RGHtmlConfig:

type RGHtmlConfig = {
  options?: RGOptions;
  data?: RGJsonData;
  events?: RGListeners;
  renderers?: RGHtmlRenderers;
  layers?: RGHtmlLayers;
  plugins?: readonly RGHtmlPlugin[];
  ui?: {
    toolbar?: boolean | RGHtmlToolbarOptions;
    miniView?: boolean | RGHtmlMiniViewOptions;
    editing?: boolean | RGHtmlEditingOptions;
  };
  relationGraphCore?: new () => RelationGraphCore;
};

Common configuration

const graph = await createRelationGraph('#graph', {
  options: {
    layout: {layoutName: 'tree', from: 'left'},
    defaultNodeWidth: 140,
    defaultNodeHeight: 54,
    defaultNodeBorderRadius: 6,
    defaultLineColor: '#8a949e',
    defaultLineWidth: 2,
    defaultLineShape: 6,
    showToolBar: true,
    showMiniView: true,
    wheelEventAction: 'zoom',
    dragEventAction: 'move',
    moveToCenterWhenRefresh: true,
    zoomToFitWhenRefresh: true
  },
  data,
  ui: {
    toolbar: true,
    miniView: {position: 'br', width: 220, height: 130}
  }
});

Option groups

Group	Common fields
View	viewSize, backgroundColor, backgroundImage, fullscreenElementXPath
Nodes	defaultNodeWidth, defaultNodeHeight, defaultNodeShape, defaultNodeColor, defaultNodeBorderRadius
Lines	defaultLineColor, defaultLineWidth, defaultLineShape, defaultJunctionPoint, defaultLineMarker
Interaction	wheelEventAction, dragEventAction, disableDragNode, disableZoom, disableDragCanvas
Expansion	defaultExpandHolderPosition, reLayoutWhenExpandedOrCollapsed
UI	showToolBar, toolBarDirection, toolBarPositionH, toolBarPositionV, showMiniView
Performance	performanceMode, overviewMode, overviewEnterZoom, overviewExitZoom, maxDomNodes
Refresh	moveToCenterWhenRefresh, zoomToFitWhenRefresh, useAnimationWhenRefresh

See Graph options for the complete core option reference. The HTML platform uses the same RGOptions semantics.

Built-in layouts

options: {
  layout: {
    layoutName: 'tree',
    from: 'left',
    levelDistance: 180,
    min_per_width: 120,
    max_per_width: 220
  }
}

layoutName	Typical use
fixed	Use x and y from input data
center	Root-centered radial relationships
tree	One-way or bidirectional hierarchy
smart-tree	Direction-aware relationship tree
folder	Organization charts and compact folder trees
circle	Circular relationship views
force	Networks and clusters

Layout fields vary by algorithm. See Built-in layouts.

Runtime updates

graph.updateOptions({
  backgroundColor: '#10151b',
  defaultLineColor: '#a8b3bd'
});

await graph.setLayouter({layoutName: 'force', maxLayoutTimes: 300});
graph.doLayout();

Pass only changed fields to updateOptions(). Do not mutate the read-only view returned by graph.getOptions().

EasyView and performance mode

The performance policy can move from DOM/SVG to a Canvas overview for large graphs or low zoom. Overview rectangle radius is node.borderRadius ?? defaultNodeBorderRadius ?? 5; when the projected radius is below 3 CSS pixels, it draws a plain rectangle.

options: {
  performanceMode: 'auto',
  overviewMode: 'auto',
  maxDomNodes: 1200
}

Next: Data, events, and API.