Delta indicator
Change indicators as chips, arrows or inline text, with inverse metrics, neutral state, a tiny trend line and a tooltip explaining the comparison.
Preview
This week
vs last week · hover for detail- Revenue$48,210+12.4%
- Churn rate2.1%-16%
- p95 latency342 ms+14.8%
- Active teams1,2840%
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| current | number | — | This period's value. |
| previous | number | — | The comparison period's value. |
| variant | "chip" | "arrow" | "inline" | "chip" | Tinted pill, arrow badge with text, or text only. |
| invert | boolean | false | Lower is better; colours flip. |
| neutralThreshold | number | 0.005 | Changes smaller than this fraction count as neutral. |
| period | string | "the previous period" | Comparison period for the tooltip and spoken text. |
| trend | number[] | — | Recent values for a tiny trend line. |
| showAbsolute | boolean | false | Also show the absolute change. |
| valueFormatter | (value: number) => string | 1 decimal | Formats values in the tooltip and absolute change. |
| size | "sm" | "md" | "md" | Indicator size. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.