kinetograph.

Rings fill one at a time with the camera riding each head, then it pulls back on the whole chart.

$npx kinetograph add ring-chart
Source

Props

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

  • data

    list

    The rings, innermost first.

  • title

    string = "Goal completion"

    Heading.

  • subtitle

    string = "Share of target reached, by channel"

    Muted line under the heading.

  • centerLabel

    string = "Average"

    Label under the average in the middle.

  • 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.

  • strokeWidth

    number = 58

    Thickness of each ring in pixels.

  • ringGap

    number = 14

    Gap between rings in pixels.

  • ringSeconds

    number = 1.5

    Time a ring takes to fill from empty to full (shorter for shorter rings).

  • holdSeconds

    number = 1.6

    How long the last frame holds.

  • camera.tightZoom

    number = 2

    Zoom while riding a ring.

  • camera.wideZoom

    number = 1.02

    Zoom of the whole chart.

  • camera.orbit

    number = 0.7

    How far the camera follows the head around the ring (1 rides on it).

  • 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 ring names other than the current ring.

Compositions

  • RingChart