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

• text: item text
• image: image URL
• x, y: offset from object center in pixels
• px, py: offset from object center as fraction of object size
• lx, ly: link only, offset relative to link direction.
• imageSlicing = [left, top, width, height]: optional slicing to use tiled images.
• textStyle: label rendering style.
• backgroundStyle: background rendering style.
• align: text align, one of "left", "right" or "center".
• aspectRatio: desired aspect ratio of the item. Text will be wrapped into multiple lines to maintain aspect ratio.
• padding = 0: padding between item content and item border.
• borderRadius = 999: radius of item border in pixels. Similar to CSS border radius property. Zero radius will show a rectangle.
• scaleWithSize: if true item size is scaled proportionally to node/link radius. The size is determined by fontSize * radius / nodeLabelScaleBase or linkLabelScaleBase for links.
• scaleWithZoom: if true item size is scaled proportionally to zoom.

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:

• font = "12px Arial": font to use, including size, bold, italic.
• fillColor = "black": text color

Background style

The backgroundStyle field can have the following attributes:

• fillColor = "black": item background color
• lineColor = null: item outline color
• lineWidth = 1: item outline width in pixels

Node item placement

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

• x = node.x + item.x + node.hwidth * item.px
• y = node.y + item.y + node.radius * item.py

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)