ZoomCharts Documentation

Items

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

To reduce clutter items are painted only below a zoom threshold settings.style.itemsMinZoom = 0.7.

Item attributes

All attributes are optional

Style

The default style is defined in settings.style.item.

The default values are:

    align:"left",
    aspectRatio: 4,
    textStyle:{fillColor: "black", font:"12px Arial"},
    backgroundStyle:{fillColor:"rgba(255,255,255,0.7)"}}

Text style

The textStyle field can have the following attributes:

Background style

The backgroundStyle field can have the following attributes:

Node item placement

When placed on a node, item center coordinates are calculated as follows:

Link item placement

When placed on a link, px, lx offsets are along link length and py, ly are perpendicular to link.

Item center coordinates are calculated as follows:

    item.pos = link.center
         + link.direction * link.length * 0.5 * item.px
         + rotate90(link.direction) * link.radius * item.py
         + link.direction * item.lx
         + rotate90(link.direction) * item.ly
         + item.(x,y)
X