ZoomCharts Documentation

Version: 1.21.1 (2024-11-08)

NetChart.settings.style

This section is defined by the type NetChartSettingsStyle.

Chart style settings.

Properties

allObjectsStyleFunction: (nodes: Array<ItemsChartNode>, links: Array<ItemsChartLink>) => { modifiedNodes: Array<ItemsChartNode>; modifiedLinks: Array<ItemsChartLink>; }
Default value: null

An "all included" style function.

Parameters

all nodes that currently loaded on the chart

Return value
Data type: anonymous type

links and nodes that the style function has modified. Or null to mark all objects as modified.

Properties
modifiedNodes: Array<ItemsChartNode>
classSplitChar: string
Default value: " "

Which character is used to delimit multiple node or link classes in the class string for node and link data

Introduced in version 1.16.0.
View section details

The style for the resizable selection box.

fadeTime: number
Default value: 600

Removed object fadeout time.

View section details

Items are small UI elements that provide extra information. Items are attached to nodes or links and can display a label, image or both.

linkAutoScaling: "linear" | "logaritmic"
Default value: null

Link radius auto distribution method.

Valid values:
  • null - scaling disabled
  • linear - distribute link radii linearly between min, max value of linkRadiusExtent
  • logaritmic - distribute link radii logarithmically between min, max value of linkRadiusExtent.
View section details

The class rules to apply individual style for link subset. Use known CSS class definition practice. Define one or more classes by specifying name and style and apply those by node definition. If multiple classes applied separate them with space and class rules will cascade in order of class definition.

linkDecorationMinSize: number
Default value: 4

Link decorations are not painted if link is shorter than this.

linkDecorationScale: number
Default value: 4

Link decoration size calculated as a product of the link radius and scale factor. The value lower than linkDecorationMinSize will take no effect.

linkDetailMinSize: number
Default value: 12

Link details like labels, items are hidden if link width in pixels is below this value.

linkDetailMinZoom: number
Default value: 0.5

Link details like labels, items are not rendered if chart zoom is below this value.

View section details

Additional style to apply when a link is hovered.

See also
linkLabelScaleBase: number
Default value: 1

Base node size of link label that scales with link size.

linkLengthAutoScaling: "linear" | "logaritmic"
Default value: null

Link length auto distribution method.

Valid values:
  • null - scaling disabled
  • linear - distribute link lengths linearly between min, max value of linkLengthExtent
  • logaritmic - distribute link lengths logarithmically between min, max value of linkLengthExtent.
linkLengthExtent: [number, number]
Default value: [ 0.3, 150 ]

Min and max value of link length before zooming is applied.

linkRadiusExtent: [number, number]
Default value: [ 0.6, 30 ]

Min and max value of link half-width before zooming is applied.

linkRules: Dictionary<(node: ItemsChartLink) => void>
Default value: {}
This property is deprected; use linkStyleFunction instead

An object defining one or more functions used to calculate node rendering style. Structure: { 'rule1':function1(nodeObj), 'rule2':function2(nodeObj) } The functions are executed in lexicographic order whenever node data or links change. Each function can modify the nodeObj to add specific style elements.

View section details

Additional style to apply when link is selected.

See also the selection property that is applied to selected nodes and links.

See also
linkStrengthAutoScaling: "linear" | "logaritmic"
Default value: null

Link strength auto distribution method.

Valid values:
  • null - scaling disabled
  • linear - distribute link strengths linearly between min, max value of linkStrengthExtent
  • logaritmic - distribute link strengths logarithmically between min, max value of linkStrengthExtent.
linkStrengthExtent: [number, number]
Default value: [ 0.1, 1 ]

Min and max value for link strength.

linkStyleFunction: (node: ItemsChartLink) => void
Default value: null

A a style function for links. Will be called whenever a link property or data has changed. Use to dynamically set link style fields.

Parameters
multilinkAutoCurve: number
Default value: 1

If the multilinks are curved, how much should they automatically curve away from each other. 0 for no curvature change, 1 for balanced curving away. More extreme or in between values can also be used.

multilinkSpacing: number
Default value: 10

Distance between multiple links between two nodes.

View section details

Default node style.

See also
View section details

Default node anchor style.

nodeAutoScaling: "linear" | "logarithmic" | "square"
Default value: null

Controls automatic node scaling. The radii are distributed in the range defined by nodeRadiusExtent.

Valid values:

  • null - scaling disabled
  • linear - distribute node radii linearly
  • logaritmic - distribute node radii logarithmicaly
  • square - distribute node radii using square function
View section details

Additional style to apply for background nodes.

See also
View section details

The class rules to apply individual style for node subset. Use known CSS class definition practice. Define one or more classes by specifying name and style and apply those by node definition. If multiple classes applied separate them with space and class rules will cascade in order of class definition.

nodeDetailMinSize: number
Default value: 5

Node details like labels, items, images are hidden if node width in pixels is below this value.

nodeDetailMinZoom: number
Default value: 0.2

Node details like labels, items, images are not rendered if chart zoom is below this value.

View section details

Additional style to apply when node is expanded.

See also
View section details

Additional style to apply when node is focused.

See also
View section details

Additional style to apply when a node is hovered.

See also
nodeLabelScaleBase: number
Default value: 30

Base node size of node label that scales with node size.

View section details

Additional style to apply when a node position is locked.

See also
View section details

Additional style to apply when node data is not yet loaded.

See also
nodeRadiusExtent: [number, number]
Default value: [ 10, 150 ]
Version 1.17.0: if all nodes have the same size, the maximum is now used instead of the minimum.

Min and max value of node radius, before zooming is applied. To use this, specify nodeAutoScaling.

nodeRules: Dictionary<(node: ItemsChartNode) => void>
Default value: {}
This property is deprected; use nodeStyleFunction instead

An object defining one or more functions used to calculate node rendering style.

See also
View section details

Additional style to apply when node is selected.

See also the selection property that is applied to selected nodes and links.

See also
nodeStyleFunction: (node: ItemsChartNode) => void
Default value: null

A a style function for nodes. Will be called whenever a node property or data has changed. Use to dynamically set node style fields.

Parameters
removedColor: string
Default value: "#EEE"

Color for fade out animation of removed objects.

scaleLinksWithZoom: boolean
Default value: null

Determines if link radius (width) is automatically scaled when the chart is zoomed in or out. If set to null, the value is inherited from scaleObjectsWithZoom

scaleObjectsWithZoom: boolean
Default value: true

Determines if node radius is automatically scaled when the chart is zoomed in or out. If scaleLinksWithZoom is not set, this value also impacts links.

selection: anonymous type

The common selection drawn for both links and nodes.

The difference between this and linkSelected and nodeSelected if that those are applied for each item individually, while this selection style is drawn as a background for all selected items. So if this specifies a semi-transparent fill color, at no point will there be two overlapping selections visible - instead one common background polygon will be drawn.

Properties
enabled: boolean
Default value: true
Introduced in version 1.16.3.

Specifies if the common selection style should be rendered. If this is set to false, nodeSelected and linkSelected styles should be specified so that the selection can be visualized.

fillColor: string
Default value: null
Version 1.16.3: default changed to null.

The fill color of the selection shape. The default null means that the same color as the chart background will be used (assuming white when transparent is specified). The fill color is required if shadow color is specified since otherwise the shadow might be invisible.

lineColor: string
Default value: "rgba(0,0,0,0)"

The outline color of the selection shape. Must be specified for the shadow to be rendered.

lineWidth: number
Default value: 1
shadowBlur: number
Default value: 8
shadowColor: string
Default value: "rgba(0,0,0,0.8)"
shadowOffsetX: number
Default value: 1
shadowOffsetY: number
Default value: 3
sizeConstant: number
Default value: 0.5
Version 1.16.3: default changed to 0.5, for nodes the value is now affected by the zoom level.

Specifies the size in pixels by which the shape size is increased. This value is further multiplied by the zoom level.

sizeProportional: number
Default value: 0

The multiplier by which the radius of node is increased to get the selection shape size. Value of 0.2 means that the size is increased by 20% (multiplied by 1.2).

selfLinkAngle: number
Default value: 60
Introduced in version 1.17.2.

The angle of the self-link in degrees. Limited to 0 < selfLinkAngle <= 90.

selfLinkHeightFactor: number
Default value: 1
Introduced in version 1.17.2.

The "height" of the self links, how far away from the node center it will extend. This is a factor of the node radius. Must be positive.

selfLinkShape: "quadratic" | "parabolic"
Default value: "quadratic"
Introduced in version 1.17.2.

The shape of the self-link. "Parabolic" makes sure the ends of the link point towards the center, but the self-link looks more "squished". "Quadratic" produces a more natural curve, but the ends of the link will not point at the center.

selfLinkWidthFactor: number
Default value: 1
Introduced in version 1.17.2.

The "width" of the self links, how wide in parallel to the node it will extend. This is a factor of the default width, as determined by the shape. 1 is the default width. Must be non-negative.

X