ZoomCharts Documentation

ZoomCharts.Configuration.NetChartSettingsStyle

Inheritance hierarchy

This type inherits from ItemsChartSettingsNodesLayerStyle. Through this type it also inherits members from ItemsChartSettingsItemsLayerStyle.

Methods

This type does not define any methods.

Properties

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

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>
Introduced in version 1.16.0.

The style for the resizable selection box.

fadeTime: number

Removed object fadeout time.

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"

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.

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

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

linkDecorationScale: number

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

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

linkDetailMinZoom: number

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

Additional style to apply when a link is hovered.

See also
linkLabelScaleBase: number

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

linkLengthAutoScaling: "linear" | "logaritmic"

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]

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

linkRadiusExtent: [number, number]

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

linkRules: Dictionary<(node: ItemsChartLink) => void>
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.

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"

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]

Min and max value for link strength.

linkStyleFunction: (node: ItemsChartLink) => void

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

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

Distance between multiple links between two nodes.

Default node style.

See also

Default node anchor style.

nodeAutoScaling: "linear" | "logarithmic" | "square"

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

Additional style to apply for background nodes.

See also

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

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

nodeDetailMinZoom: number

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

Additional style to apply when node is expanded.

See also

Additional style to apply when node is focused.

See also

Additional style to apply when a node is hovered.

See also

Node label style.

nodeLabelScaleBase: number

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

Additional style to apply when a node position is locked.

See also

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

See also
nodeRadiusExtent: [number, number]
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>
This property is deprected; use nodeStyleFunction instead

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

See also

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

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

Color for fade out animation of removed objects.

scaleLinksWithZoom: boolean

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

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
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
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

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

lineWidth: number
shadowBlur: number
shadowColor: string
shadowOffsetX: number
shadowOffsetY: number
sizeConstant: number
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

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
Introduced in version 1.17.2.

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

selfLinkHeightFactor: number
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"
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
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