DonutCOMPONENT 1.00chart

Every prop has a default, so the component renders as it is. Change any of them in Studio or in code.

• data

  list

  The slices, clockwise from 12 o'clock.

• title

  string = "Traffic sources"

  Heading.

• subtitle

  string = "Visitors by channel, last 30 days"

  Muted line under the heading.

• centerLabel

  string = "Visitors"

  Label under the total in the middle.

• leader

  integer = -1

  Slice that steps out at the end; -1 for the largest.

• mode

  light | dark = "light"

  Colour theme: light or dark.

• palette

  primary | monochrome | ocean | sunset | grove | vivid = "primary"

  Chart palette: primary (indigo, yellow, fuchsia, mist, black), monochrome, ocean, sunset, grove or vivid.

• format.prefix

  string

  Before the number, e.g. "$".

• format.suffix

  string

  After the number, e.g. "%" or "k".

• format.decimals

  integer

  Digits after the decimal point.

• format.group

  string

  Thousands separator, a comma by default. Empty for none.

• innerRatio

  number = 0.66

  Inner radius over outer radius; 0 draws a pie.

• padDegrees

  number = 1.6

  Gap between slices in degrees.

• cornerRadius

  number = 12

  Corner radius of the slices in pixels.

• sliceSeconds

  number = 0.75

  How long each slice takes to sweep.

• holdSeconds

  number = 1.6

  How long the last frame holds.

• camera.tightZoom

  number = 2

  Zoom while orbiting the ring.

• camera.wideZoom

  number = 1.04

  Zoom of the whole chart.

• camera.orbit

  number = 0.62

  How far the camera follows the head around the ring (1 rides on it, lower keeps nearer the middle).

• camera.motionBlur

  number = 1

  Strength of the motion blur on the fast moves; 0 turns it off.

• camera.rackFocus

  number = 4

  Blur in pixels on the middle readout while the camera orbits.

• DonutChart