A radar chart fills in axis by axis as the camera circles it, then a second series springs open.

$npx kinetograph add radar-chart
Source

Props

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

  • metrics

    list

    The axes, clockwise from the top.

  • series

    list

    The polygons. The first is the one the camera follows.

  • max

    number = 100

    The value at the outer ring.

  • levels

    integer = 5

    Number of grid rings.

  • title

    string = "Vehicle comparison"

    Heading.

  • subtitle

    string = "Scored 0 to 100 on six measures"

    Muted line under the heading.

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

  • axisSeconds

    number = 0.55

    How long the head takes along each edge of the first series.

  • holdSeconds

    number = 1.8

    How long the last frame holds.

  • camera.tightZoom

    number = 2.2

    Zoom while orbiting.

  • camera.wideZoom

    number = 1.02

    Zoom of the whole chart.

  • camera.orbit

    number = 0.72

    How far the camera follows the head out from the centre.

  • camera.roll

    number = 3.5

    Degrees of roll the orbit leans into.

  • 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 labels away from the head.

Compositions

  • RadarChart