ZoomCharts Documentation

Layout

Pie chart automatically computes size and location of the chart and labels.

First some room is reserved for Title and Credits. After that configuration parameters are used to determine pie position and size:

Pie center and angle

• settings.pie.x = null - pie center X coordinate in pixels
• settings.pie.y = null - pie center Y coordinate in pixels
• settings.pie.startAngle = -Math.PI*0.5 - start angle of the pie. Use this to rotate the pie or make a half-pie
• settings.pie.endAngle = Math.PI*1.5 - end angle of the pie. Use this to rotate the pie or make a half-pie

X and Y can be one of:

• null - center will be calculated automatically
• 0..1 - center is fraction of chart width and height
• 1... - position on chart in pixels

Main pie layout

• settings.pie.radius = null - radius of the pie, see below
• settings.pie.innerRadius = 0.3 - radius of hollow center of the pie
• settings.pie.outerMargin = 1 - outer margin to add when automatically computing radius, in pixels
• settings.pie.adaptiveRadius = true - dynamically adapt pie radius depending on amount of outside labels

Radius can be one of:

• null - radius will be calculated automatically based on available chart area
• 0..1 - fraction of Min(width, height)
• 1... - radius in pixels

When radius = null and adaptiveRadius = true pie radius will change dynamically to make room for labels.

Inner radius can be one of:

• 0..1 - fraction of the radius
• 1... - radius in pixels

Inner pies

• settings.pie.showInnerPies = true - weather to show inner pies
• settings.pie.showInnerPiesExport = true - weather to show inner pies when exporting image
• settings.pie.margin = 2 - margin between pies in pixels
• settings.pie.centerMargin = 5 - whitespace in the center in pixels

Labels

• settings.labels.enabled = true - weather to show labels
• settings.labels.connectorLength = 20 - distance between pie and labels in pixels
• settings.labels.connectors = true - weather to paint label connectors
• settings.labels.interLabelSpacing = 0.6 - distance between labels, fraction of label line height
• settings.labels.lineSpacing = 0.4 - distance between multiple lines within a label, fraction of label line height
• settings.labels.margin = 4 - margin around each label in pixels
• settings.labels.insideLabel = "append" - what to do when there is no room for inside label

Outside labels are placed around the pie at connectorLength distance form the pie. Labels are split into multiple lines if there is not enough room for a single-line label. When the available space allows, labels will be vertically aligned, if not they are wrapped around the pie.

Inside labels are simply placed at the center of each slice. insideLabel option governs what to do when there is not enough room: "append" - append to the outside label, "always" - always show the inside label, "auto" - hide if not enough room.