ZoomCharts Documentation

Display style

The display style of nodes and links is fully customizable.

Node display

There are two distinct node looks to choose from using a global setting settings.style.node.display or per node setting node.display.

Image

Image

Currently the mode is a global setting. This can change in future versions.

Style attributes

Node and link objects have a number of style attributes.

Node style attributes

Link style attributes

Style rules

Style rules is a more powerful system to dynamically construct and update the visual look of nodes and links. Whenever a property is changed on node or link, style functions are evaluated to update the look.

A typical set of style rules looks something like this:

    nodeStyleFunction: function(node) {
            node.label.title = node.data.name;
            node.radius = node.data.size;

            if (node.data.image) {
              node.image="/images/people/"+node.data.image;
              node.fillColor = "white";
            } else {
              node.image = null;
              node.fillColor = "gray";
            }

            if (node.focused) { 
                node.fillColor = "orange";
            }
        }
    },
    linkStyleFunction: {
        function(link) {
            var linkColors = { 
                "friend":"orange",
                "family":"green",
                "acquaintance":"grey"
            };

            link.radius = 10;
            link.fillColor = linkColors[link.data.type];
        }
    }

Style setting precedence

There are different style settings available that are applied on top of each other. For example, if you define shadow for selected nodes, when the node is hovered, the shadow might now be shown because the hover style takes precedence.

Here is the order how the different style settings are applied:

Auto scaling

There are several options to automatically distribute node and link radius values over a specified range.

The following distribution algorithms are available:

There are multiple automatic distribution settings:

The distribution ranges can be specified by the following settings:

X