Effects & chrome

exaggerate

Tightens the Y-axis so small movements fill the chart height. Ideal for heart rate, temperatures, or prices that tick in tiny increments.

<LiveChart :data="data" :value="value" exaggerate />

Live preview uses the shared engine via React bindings; copy the Vue snippet above.

Resting heart rate. Custom formatter, exaggerated Y-axis.

degen

Burst particles and a light chart shake on momentum swings — for when subtlety is not the goal.

<LiveChart :data="data" :value="value" degen />
<LiveChart
  :data="data"
  :value="value"
  :degen="{ scale: 1.5, downMomentum: true }"
/>

type DegenOptions = {
  scale?: number; // particle count/size multiplier (default 1)
  downMomentum?: boolean; // particles on down swings (default false)
};

Degen mode (chart shake and particles) with momentum arrows.

pulse / fill / lineWidth

Prop	Default	Role
`pulse`	`true`	Soft glow pulse on the live tip
`fill`	`true`	Gradient under the line
`lineWidth`	`2` (via palette)	Stroke width in px

Badge

Prop	Default	Role
`badge`	`true`	Live value pill at the tip
`badgeVariant`	`"default"`	`"default"` (accent) or `"minimal"` (quiet pill)
`badgeTail`	`true`	Pointer tail toward the tip
`formatValue`	`toFixed(2)`	Badge + tooltip text

<LiveChart badge-variant="minimal" />
<LiveChart :badge="false" />

Minimal chrome recipe

<LiveChart
  :data="data"
  :value="value"
  :badge="false"
  :fill="false"
  :grid="false"
  :pulse="false"
  :momentum="false"
  :scrub="false"
  color="#94a3b8"
/>

See also the React recipe Just a line (same engine; swap imports to livecharts/vue).