AreaCOMPONENT 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 series, left to right.

• title

  string = "Weekly active sessions"

  Heading.

• subtitle

  string = "Sessions per month, this year"

  Muted line under the heading.

• seriesName

  string = "Sessions"

  Name shown in the tooltip row.

• highlight

  integer = 9

  Index of the point the tooltip ends on.

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

• color

  integer = 0

  Which palette colour (--chart-1 to --chart-5, as 0 to 4) draws the series.

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

• drawSeconds

  number = 3.6

  How long the line takes to draw.

• holdSeconds

  number = 1.6

  How long the last frame holds on the tooltip.

• markers

  boolean = true

  A dot at every data point as the line passes it.

• camera.tightZoom

  number = 2.5

  Zoom while riding the line tip.

• camera.wideZoom

  number = 0.99

  Zoom of the whole chart.

• camera.lead

  number = 330

  Screen pixels the camera leads the tip by.

• 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 grid and labels while the shot is tight; they snap sharp on the pull out.

• camera.drift

  number = 3

  Handheld drift in pixels on the holds.

• AreaChart