Momentum & degen

Live example: app/demo/momentum-and-degen.tsx in the example app.

Momentum coloring with degen particle bursts and screen shake

Momentum

Momentum drives the live dot and badge color (up / down / flat). By default it’s auto-detected from recent data.

<LiveChart data={data} value={value} momentum />

The momentum prop accepts:

true — auto-detect (default)
false — disabled, always flat
"up" / "down" / "flat" — a forced value
MomentumConfig — auto-detect with custom sensitivity

<LiveChart
  data={data}
  value={value}
  momentum={{ threshold: 0.12, lookback: 20 }}
/>

threshold is the fraction of the lookback range the tail delta must exceed to register as directional; lookback is how many recent points feed the range calculation.

Degen mode

Degen mode adds a particle burst (and, by default, a screen shake) on momentum swings — great for trading / meme-market UIs.

<LiveChart data={data} value={value} degen />

Tune it with DegenOptions:

<LiveChart
  data={data}
  value={value}
  degen={{
    scale: 1,
    downMomentum: true,      // also trigger on down swings
    shake: true,
    shakeIntensity: 1,
    burstParticleCount: 20,
    colors: ["#22c55e", "#86efac"],
  }}
/>

Degen is available on both LiveChart and LiveChartSeries. On multi-series each visible series bursts off its own dot, in that series’ color, on its own upward momentum swing (per-outcome).

Particle bursts render through a single batched Skia drawAtlas call: one white-circle sprite is rasterized once, then every active particle is blitted with its own transform and color in that one draw. So even dense bursts stay cheap. This is automatic — no API or config change.

Reacting to shake

onDegenShake fires on the JS thread when a shake starts (unless shake is false) — useful for haptics:

import * as Haptics from "expo-haptics";

<LiveChart
  data={data}
  value={value}
  degen
  onDegenShake={({ direction }) => {
    Haptics.impactAsync(
      direction === "up"
        ? Haptics.ImpactFeedbackStyle.Heavy
        : Haptics.ImpactFeedbackStyle.Light,
    );
  }}
/>;

See the full DegenOptions fields in the LiveChart reference.

Getting started

Chart types

Interaction

Annotations & overlays

Dynamic styling & effects

Styling & theming

Live data & engine

Momentum

Degen mode

Reacting to shake

​Momentum

​Degen mode

​Reacting to shake

Momentum

Degen mode

Reacting to shake